理解第一个Angular应用.png

1 (双向)数据绑定

数据绑定: 数据从 页面 转移(传递)到内存, 而且这个操作由框架来完成
双向数据绑定: 数据可以从View(视图层/页面)流向Model（模型）, 也可以从Model流向View

视图(View): 也就是我们的页面(主要是Andular指令和表达式)
模型(Model) : 作用域对象(当前为$rootScope), 它可以包含一些属性或方法
当改变View中的数据, Model对象的对应属性也会随之改变: ng-model指令数据从View==>Model
当Model域对象的属性发生改变时, 页面对应数据随之更新: {{}}表达式数据从Model==>View
ng-model是双向数据绑定, 而{{}}是单向数据绑定 3.ng-init 用来初始化当前作用域变量。

<body ng-app="" ng-init="username='lily'">
<input type="text" ng-model="username">
<p>name1:{{username}}</p>
<input type="text" ng-model="username">
<p>name1:{{username}}</p>

<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
</body>

2 作用域对象和控制器对象

1. 作用域对象 :

一个js实例对象, ng-app指令默认会创建一个根作用域对象($rootScope)
它的属性和方法与页面中的指令或表达式是关联的

2. 控制器:

用来控制AngularJS应用数据的 实例对象
ng-controller : 指定控制器构造函数, Angular会自动new此函数创建控制器对象
同时Angular还有创建一个新的域对象$scope, 它是$rootScope的子对象
在控制器函数中声明$scope形参, Angular会自动将 $scope 传入

<body ng-app="" ng-init="">
<div ng-controller="myController">
  <input type="text" ng-model="firstName">
  <input type="text" ng-model="lastName">
  <p>name1:{{firstName + '-' + lastName}}</p>
  <p>name2:{{getName()}}</p>
</div>


<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  // 构造函数
  function myController($scope) {//形参必须是$scope
    console.log($scope)
    console.log(this instanceof myController)//true
    $scope.firstName = 'joy'
    $scope.lastName = 'lily'
    $scope.getName = function() {
      return ($scope.firstName + '-' + this.lastName)
    }
  }

</script>
</body>

3 声明式和命令式区别，依赖注入

依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。 一句话 --- 没事你不要来找我，有事我会去找你。

<button id="btn">点我一下</button>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  //下面整个函数就是 依赖注入
  window.onload = function() {
    document.getElementById("btn").onclick = function(event) {
      alert(event.clientX)//event  就是 依赖对象
    };
  }
</script>

angular的 $scope对象就是依赖对象，并且是 声明式 依赖注入的形式进行使用。！！！形参必须是特定的名称, 否则Angular无法注入抛异常
回调函数的event的就是依赖对象
回调函数有形参就是依赖注入

1声明式和命令式的区别

1.命令式：命令程序执行的时候每一步都是按照自己的指令，更注重执行的过程
2.声明式：更注重执行的结果。
//声明式是对命令式的局部包装，类似map方法就是封装好了

//命令式
    var arr = [1,2,3,4,5];
    var newArr = [];
    for(var i=0;i<arr.length;i++){
      var num = arr[i]*2;
      newArr.push(num);
    }
    console.log(newArr);

 //声明式
    var newArr2 = arr.map(function (item) {
      return item*2;
    });
    console.log(newArr2);

4 模块对象和控制器对象

1模块 module

模块也是一个对象
创建模块对象： angular.module('模块名', [依赖的模块])
通过模块添加控制器：* module.controller('MyController', function($scope){//里面是操作 $scope的语句})，
angular的整体设计也是多模块的 * 核心模块： angular.js * 扩展模块： angular-router.js, angular-message.js, angular-animate.js

<body ng-app="myApp">

  <div ng-controller="c">
    <input type="text"  ng-model="empName">
    <p>员工姓名1:{{empName}}</p>
  </div>

  <div ng-controller="c1">
    <input type="text"  ng-model="empName">
    <p>员工姓名2:{{empName}}</p>    
  </div>

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
  // console.log(angular)
  // 创建模块对象
  var myModule = angular.module('myApp', []);
  //优化,链式调用
  angular.module('myApp', [])
    .controller('c', ['$scope', function(a){//显示声明 依赖注入
      a.empName = 'lucy'
    }])
    .controller('c1', ['$scope', function(b){//返回值是？模块对象
      b.empName = 'tom'
    }])
</script>

5 表达式

使用Angular表达式:

语法: {{expression}}
作用: 显示表达式的结果数据
注意: 表达式中引用的变量必须是当前域对象有的属性(包括其原型属性)

操作的数据

基本类型数据: number/string/boolean
undefined, Infinity, NaN, null解析为空串: "", 不显示任何效果
对象的属性或方法
数组

<div ng-controller="MyController">
  <p>{{123}}</p>
  <p>{{'abc'}}</p>
  <p>{{abc}}</p>
  <p>{{true}}</p>
  <p>{{abc.split('')}}</p>
  <p>{{abc.split('').reverse()}}</p>
  <p>{{abc.split('').reverse().join('')}}</p>
</div>


</body>
<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type='text/javascript'>
  // 创建模块对象
  angular.module('myApp',[])
  .controller('MyController',['$scope',function(a){
    a.abc = 'ABC'
  }])
</script>

1表达式与语句区别

1、表达式：通常有一个返回值，可以放在任何需要值得地方，比如函数调用的参数，一个变量名，一个运算，

2、语句：通常表示一个完整的执行单位，一段完整的js可执行的代码，有的语句也可以用表达式来执行，叫做表达式语句。

3、区别：语句用封号结尾，有些语句我们没有加封号，比如console.log虽然我们没有加封号，但也是语句，因为js引擎会自动解析并且加上封号。 js引擎在解析的时候会自动的加上封号

4、特例：if语句，就不用加封号可也是完整的语句。

6 指令

1. Angular指令

Angular为HTML页面扩展的: 自定义标签属性或标签
与Angular的作用域对象(scope)交互,扩展页面的动态表现力

2. 常用指令(一)

ng-app: 指定模块名，angular管理的区域
ng-model：双向绑定，输入相关标签
ng-init：初始化数据
ng-click：调用作用域对象的方法（点击时）
ng-controller: 指定控制器构造函数名，内部会自动创建一个新的子作用域（外部的）
ng-bind：解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
ng-repeat：遍历数组显示数据，数组有几个元素就会产生几个新的作用域： $index, $first, $last, $middle, $odd, $even
ng-show: 布尔类型，如果为true才显示
ng-hide: 布尔类型，如果为true就隐藏

<body ng-app="myApp" >

<div ng-controller="MyCtrl" ng-init="age=12">

    <div>
        <h2>价格计算器(自动)</h2>

        数量：<input type="number" ng-model="count1">

        价格：<input type="number" ng-model="price1">

        <p>总计：{{count1 * price1}}</p>
    </div>

    <div>
        <h2>价格计算器(手动)</h2>

        数量：<input type="number" ng-model="count2">

        价格：<input type="number" ng-model="price2">
        <button ng-click="getTotalPrice()">计算</button>

        <p>总计：{{totalPrice}}</p>
    </div>

    <!--
    * ng-repeat： 遍历数组显示数据， 数组有几个元素就会产生几个新的作用域
        * $index, $first, $last, $middle, $odd, $even
    -->
    <h3>人员信息列表</h3>
    <ul>
        <li ng-repeat="person in persons">
            偶数行：{{$even}},奇数行{{$odd}},
            中间的：{{$middle}},
            最后一个：{{$last}},
            第一个：{{$first}},
            第{{$index + 1}}个，
            {{person.name}}----{{person.age}}</li>
    </ul>

    <!--
    * ng-bind： 解决使用{{}}显示数据闪屏（在很短时间内显示{{}}）
    -->
    <!--当使用ng-bind的时候表达式不在生效-->
    <p ng-bind="count2">{{'asdfdsfds'}}</p>
    <p>{{count2}}</p>
    <!--
      * ng-show: 布尔类型， 如果为true才显示
      * ng-hide: 布尔类型， 如果为true就隐藏
    -->
    <button ng-click="switch()">切换</button>
    <p ng-show="isLike">我喜欢贾静雯</p>
    <p ng-hide="isLike">贾静雯喜欢我</p>

</div>
<script type='text/javascript' src='../../js/angular-1.5.5/angular.js'></script>
<script type='text/javascript'>
   
    //创建模块对象
    angular.module('myApp', [])
            .controller('MyCtrl', ['$scope', function ($scope) {

                $scope.count1 = 1;
                $scope.price1 = 20;
                $scope.count2 = 1;
                $scope.price2 = 10;
                $scope.totalPrice = $scope.count1 * $scope.price1;
                $scope.getTotalPrice = function () {
                    $scope.totalPrice =  this.count2 * this.count2;
                };

                $scope.persons = [
                    {name : 'kobe', age : 39},
                    {name : 'anverson', age : 41},
                    {name : 'weide', age : 38},
                    {name : 'tim', age : 40},
                    {name : 'curry', age : 29}

                ];
                $scope.isLike = true;
                $scope.switch = function () {
                
                    $scope.isLike = !$scope.isLike;
                }
            }])
</script>

</body>

3.常用指令(二)

ng-class: 动态引用定义的样式 {aClass:true, bClass:false}
ng-style: 动态引用通过js指定的样式对象 {color:'red', background:'blue'}
ng-click: 点击监听, 值为函数调用, 可以传$event
ng-mouseenter: 鼠标移入监听, 值为函数调用, 可以传$event
ng-mouseleave: 鼠标移出监听, 值为函数调用, 可以传$event
ng-disabled: 设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

<style>
  .evenB {
    background-color: grey;
  }

  .oddB {
    background-color: green;
  }
</style>
<body ng-app="myApp" ng-controller="MyController">

<div style="width: 100px;height: 100px;background-color: red"
     ng-mouseover="over()" ng-mouseleave="leave()" ng-style="myStyle">
</div>
<div>
  <ul>
      <li ng-repeat="p in persons" ng-class="{evenB:$even, oddB:$odd}">
        {{p.name}}---{{p.age}}
      </li>
  </ul>
</div>

<script type='text/javascript' src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript">
  angular.module('myApp', [])
      .controller('MyController', function ($scope) {
        $scope.over = function () {
          $scope.myStyle = {
            background: 'blue'
          };
        };
        $scope.leave = function () {
          $scope.myStyle = {
            background: 'green'
          };
        };


        $scope.persons = [
          {name: 'Tom', age: 12},
          {name: 'Tom2', age: 13},
          {name: 'Tom3', age: 14},
          {name: 'Tom4', age: 15},
          {name: 'Tom5', age: 16}
        ];
      });
</script>
</body>

ng-submit

ng-submit 指令用于在表单提交后执行指定函数。

<form ng-submit="*expression*"></form>

Smart Table是基于AngularJS模块特性开发出来的一款优秀的表格组件，默认就支持过滤、排序等核心功能。开发者基于它也可以开发插件，满足个性化需求。比如分页、排序数据、通过Ajax获取等。

<table st-table='xx.data' st-pipe="xx"></table>

ng-change

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作。

ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

语法： <div ng-change="expression"></div>

<input>, <select>, 和 <textarea> 元素支持。


<body ng-app="myApp">
<div ng-controller="myCtrl">
  <p>在输入框中输入一些信息:</p>
  <input type="text" ng-change="myFunc()" ng-model="myValue" />
  <p>输入框已经修改了 {{count}} 次。</p>
</div>

<script>
  angular.module('myApp', [])
    .controller('myCtrl', ['$scope', function($scope) {
      $scope.count = 0;
      $scope.myFunc = function() {
        $scope.count++;
      };
    }]);
</script>
</body>
</html>

aria-hidden

aria-hidden="true" 加到元素上会把该元素和它的所有子元素从可访问性树上移除。

aria-hidden="true" 不应该被用在可聚焦的元素上。也不应该被用在可聚焦元素的父元素上。

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

向指令添加过滤器

过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。

orderBy 过滤器根据表达式排列数组：

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

AngularJS 服务(Service)

AngularJS 内建了30 多个服务。

$location 服务

它可以返回当前页面的 URL 地址。 $location 服务是作为一个参数传递到 controller 中。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

两秒后显示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。4

每一秒显示信息:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

$ocLazyLoad

ocLoayLoad是AngularJS的模块按需加载器。按需加载的对象:一些 .js文件或者 .html文件。

一般，分路由、按功能来区分、打包成不同的多个或单个controller.directive.server模块

按需加载的场景:

1 路由加载 $stateProvider(resolve/uiRouter)

基于uiRouter的resolve是在加载controller和template之前所执行的一系列操作，它帮助我们初始化我们所要前往的那一个视图。只有be solved(操作完成)，controller才会被实例化。因此，我们可以在resolve步骤里面加载我们所需要的controller。

angular.module('myApp').config(function ($stateProvider) {
    $stateProvider
        .state('index', {
            url: '/',
            views: {
                'lazyLoadView': {
                    templateUrl: 'partials/main.html',
                    controller: 'AppCtrl'
                }    
            },
            resolve: {
                loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad){
                    return $ocLazyLoad.load('js/AppCtrl.js')
                }]
            }
        })

2 依赖加载

在依赖项里面导入我们所需要的一系列模块(这里有一层'[ ]'符合哦)

angular.module('gridModule', [[
    'bower_components/angular-ui-grid/ui-grid.js',
    'bower_components/angular-ui-grid/ui-grid.css'
]]).controller('GridModuleCtrl', ['$scope', function($scope){
    //...
}])

3 Cotroller里动态加载

angular.module('myApp')
.controller('AppCtrl', ['$scope','$ocLazyLoad', function($scope, $ocLazyLoad){
    $scope.loadBootstrap = function(){
        $ocLazyLoad.load([
          'bower_components/bootstrap/dist/js/bootstrap.js',
          'bower_components/bootstrap/dist/css/bootstrap.css'
        ])
    }
   var unbind = $scope.$on('ocLazyLoad.fileLoaded', function(e, file){
        $scope.bootstrapLoaded = true;
         console.log('下载boot完成');
         unbind();
    })
}])

4 html模板里面嵌套的controller (config) oc-lazy-load指令和$ocLazyLoadProvider的配置

    <div oc-lazy-load="gridModule">
        <div ng-controller="GridModuleCtrl">
            <span>{{test}}</span><br/>
            <div ui-grid="gridOptions" class="gridStyle"></div>
        </div>
    </div>
</div>

$ocLazyLoadProvider.config({
        modules: [{
            name: 'gridModule',
            files: [
                'js/gridModule.js'
            ]
        }]
    })

AngularJS 路由

通过 AngularJS 路由可以实现SPA。

通常URL 形式为 runoob.com/first/page

AngularJS 通过 #! + 标记 实现，例如：

http://runoob.com/#!/first

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS 路由实例 - 菜鸟教程</title>
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular.min.js"></script>

<-- 1、载入了实现路由的 js 文件：angular-route.js -->
<script src="https://cdn.staticfile.org/angular.js/1.7.0/angular-route.min.js"></script>
<script type="text/javascript">

// 2、包含了 ngRoute 模块作为主应用模块的依赖模块
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#!/home">Home</a>
      <a href="#!/about">About</a>
    </div>
      
 <--3、使用 ngView 指令。该 div 内的 HTML 内容会根据路由的变化而变化。-->     
    <div ng-view="">
    </div>
  </div>
</body>
</html>

AngularJS $http

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.6.3/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="siteCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("https://www.runoob.com/try/angularjs/data/sites.php")
  .then(function (response) {$scope.names = response.data.sites;});
});
//**$http.get()**  从web服务器上读取静态 **JSON 数据**。
//当从服务端载入 JSON 数据时， **$scope.names** 变为一个数组。
</script>

</body>
</html>

$q 参考

$q是Angular的一种内置服务，可以异步地执行函数，并且当函数执行完成时它允许你使用函数的返回值（或异常）。

var defer = $q.defer()

defer的字面意思是延迟，$q.defer() 可以创建一个deferred实例（延迟对象实例）。

var deferred = $q.defer();  //通过$q服务注册一个延迟对象 deferred
var promise = deferred.promise;  //通过deferred延迟对象，可以得到一个promise，而promise会返回当前任务的完成结果

defer的方法：

1. deferred.resolve(value) 成功解决(resolve)了其派生的promise。参数value即是successCallback函数的参数。

2. deferred.reject(reason) 未成功解决其派生的promise。此时deferred实例的promise对象将会捕获一个任务未成功执行的错误，promise.catch(errorCallback(reason){...})。

3. notify(value) 更新promise的执行状态

function asyncGreet(name) {
  var deferred = $q.defer();  //通过$q.defer()创建一个deferred延迟对象，在创建一个deferred实例时，也会创建出来一个派生的promise对象，使用deferred.promise就可以检索到派生的promise。

  deferred.notify('About to greet ' + name + '.');  //延迟对象的notify方法。

  if (okToGreet(name)) {
    deferred.resolve('Hello, ' + name + '!');  //任务被成功执行
  } else {
    deferred.reject('Greeting ' + name + ' is not allowed.');  //任务未被成功执行
  }

  return deferred.promise;  //返回deferred实例的promise对象
}

function okToGreet(name) {
  //只是mock数据，实际情况将根据相关业务实现代码
  if(name == 'Superman') return true;  
  else return false;
}

var promise = asyncGreet('Superman');  //获得promise对象
//promise对象的then函数会获得当前任务也就是当前deferred延迟实例的执行状态。它的三个回调函数分别会在resolve(), reject() 和notify()时被执行
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
}, function(update) {
  alert('Got notification: ' + update);
});

创建自定义服务

你可以创建自定义服务，链接到你的模块中：

factory

angular.module('myApp').factory('myFunc', ['$http', 'AppConfig', '$q',function ($http, AppConfig, $q) {
    return {
    
    };

}]);

factory方式创建的服务，作用就是返回一个有属性有方法的对象。相当于：var f = myFactory();

service

创建名为hexafy 的服务:

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:

使用自定义的的服务 hexafy 将一个数字转换为16进制数:

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

smart-table

指令 st-pipe，该函数将被调用用于排序、分页或过滤事件。

<table st-table="displayedCollection" st-safe-src="rowCollection" st-pipe="customPipe">

$scope.customPipe = function(tableState){
   console.log(tableState.sort);
}

ui-sref

ui-sref参数的传递

<a ui-sref="man({id:1,name:2})">按钮</a>

路由里面配置：

$stateProvider.state('man', { 
 url: '/man.html?id&name',     //参数必须先在这边声明 
 templateUrl: '../man.html', 
})

点击连接后，浏览器的地址则会变为：/man.html/id=1&name=2

aria-hidden

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免屏幕识读设备抓取可能产生混淆的输出内容，设置了 aria-hidden=“true” 属性。即： 让这个元素对浏览器隐藏。（这里的“隐藏”更多指的是语义化的隐藏，实现弹窗效果需配合display: none等样式使用）

练习

1 统计字数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{
            resize: none;
        }
    </style>
</head>
<body ng-app="noteApp" >
    <div ng-controller="MyController">
        <h2>我的笔记</h2>
        <textarea cols="30" rows="10" ng-model="message"></textarea>
        <div>
            <button>保存</button>
            <button>读取</button>
            <button>删除</button>
        </div>
        <p>剩余：{{getCount()}}</p>
    </div>

<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

</html>

angular.module('noteApp', [])
    .controller('NoteController', function ($scope) {
        //console.log($scope.message);
        $scope.message = '';
        //定义获取剩余字数的方法
        $scope.getCount = function () {
            //判断输入数据的长度
            if(this.message.length > 100){
                $scope.message = $scope.message.slice(0, 100);
            }
            //返回剩余字数的个数
            return 100 - $scope.message.length;
        };

        //定义保存的方法
        $scope.save = function () {
            alert('note is saved');
            //将数据保存到sessionStorage中
            sessionStorage.setItem('note_key', JSON.stringify($scope.message));
            //将输入内容清空
            $scope.message = '';
        };
        //定义读取的方法
        $scope.read = function () {
            $scope.message = JSON.parse(sessionStorage.getItem('note_key') || '[]');//对读取null做了处理
        };

        // 定义删除的方法
        $scope.delete = function () {
            $scope.message = '';
        };

    });

2. todoList

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="todoApp" >

<div ng-controller="TodoControl">
    <h2>我的备忘录</h2>
    <div>
        <input type="text" ng-model="newTodo">
        <button ng-click="add()">新增</button>
    </div>
    <div ng-repeat="todo in todos">
        <input type="checkbox" ng-model="todo.isChecked">
        <span>{{todo.todo}}</span>
    </div>
    <button ng-click="delete()">删除选中的记录</button>
</div>



<script type="text/javascript" src="../../js/angular-1.5.5/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>

angular.module('todoApp', [])
	.controller('TodoControl', function ($scope) {
		//初始化数据
		$scope.todos = [
			{todo : '吃饭', isChecked : false},
			{todo : '睡觉', isChecked : false},
			{todo : '打豆豆', isChecked : false}
		];

		//定义添加todo的方法
		$scope.add = function () {
			//判断添加的内容是否为空
			if(!$scope.newTodo){
				alert('输入的内容不能空');
				return
			}
			// 组合新的todo对象
			var todo = {
				todo : $scope.newTodo,
				isChecked : false
			};
			// 将新的对象添加到todos中
			$scope.todos.unshift(todo);
			//添加完将输入的内容清空
			$scope.newTodo = '';
		};

		//定义删除  todo 的方法
		$scope.delete = function () {
			//将$scope.todo的数据暂时保存
			var oldTodo = $scope.todos;
			//将$scope.todos的数据清空
			$scope.todos = [];
			//进行遍历
			oldTodo.forEach(function (item, index) {
				//将没被选中的todo添加到 $scope.todos 数组中
				if(!item.isChecked){
					$scope.todos.push(item);
				}
			});
		}
	});

AngularJS 1.x

1 (双向)数据绑定

2 作用域对象 和 控制器对象

1. 作用域对象 :

2. 控制器:

3 声明式和 命令式 区别，依赖注入

1声明式和命令式的区别

4 模块对象 和 控制器对象

1模块 module

5 表达式

1表达式 与 语句 区别

6 指令

1. Angular指令

2. 常用指令(一)

3.常用指令(二)

ng-submit

ng-change

aria-hidden

AngularJS 过滤器

向指令添加过滤器

过滤输入

AngularJS 服务(Service)

$location 服务

$timeout 服务

$interval 服务

$ocLazyLoad

AngularJS 路由

AngularJS $http

$q 参考

var defer = $q.defer()

创建自定义服务

factory

service

smart-table

ui-sref

aria-hidden

练习

1 统计字数

2. todoList

2 作用域对象和控制器对象

3 声明式和命令式区别，依赖注入

4 模块对象和控制器对象

1表达式与语句区别