9、ng-repeat 

       ng-repeat 指令用在一个对象数组上

       比如：

<div ng-app="" ng-init="names=[{name:‘Jani‘,country:‘Norway‘},

{name:‘Hege‘,country:‘Sweden‘},{name:‘Kai‘,country:‘Denmark‘}]">

<p>循环对象：</p>
<ul>

<li ng-repeat="x in names">

{{ x.name + ‘, ‘ + x.country }}

    </li>

</ul>

</div>

 注意：ng-init 指令为 AngularJS 应用程序定义了 初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。稍后您将学习更多有关控制器和模块的知识。

10、 .directive 函数

调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， 

runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

你可以通过以下方式来调用指令：

• 元素名

<runoob-directive></runoob-directive>

• 属性

<div runoob-directive></div>

• 类名

<div class="runoob-directive"></div>

• 注释

<!-- 指令: runoob-directive -->

可以限制你的指令只能通过特定的方式来调用：

• E 作为元素名使用
• A 作为属性使用
• C 作为类名使用
• M 作为注释使用

可以使用一个或者多个一起使用，比如：EAC，没有声明的话，默认都可以

比如：

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

11、验证 (ng-model)

（1）   必填项

<input id="name"  required  ng-model=‘user.name‘ />

（2）   最小长度

<input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" />

（3）   最大长度

<input type="text" id="maxlength" ng-maxlength="20" ng-model="user.maxlength" />

（4）   模式匹配

    <input type="text" id="minlength" ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" />

（5）   电子邮件

<input type="email" id="email" name="email" ng-model="user.email" />

（6）   数字

<input type="number" id="age" name="age" ng-model="user.age" class="form-control" />

（7）   url

<input type="url" id="url" name="homepage" ng-model="user.url" class="form-control" />

比如：验证用户输入

       <form ng-app="" name="myForm">
           Email:
          <input type="email" name="myAddress" ng-model="text">
           <span ng-show="myForm.myAddress.$error.email">

不是一个合法的邮箱地址

</span>

</form>

12、状态值(invalid, dirty, touched, error)

       比如：

              <form ng-app="" name="myForm" ng-init="myText = ‘test@runoob.com‘">
    <input type="email" name="myAddress" ng-model="myText" required></p>
     <h1>状态</h1>
    {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)

 {{myForm.myAddress.$dirty}} (如果值改变则为 true)
    {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)

{{ myForm.myAddress.$error.email }}
</form>

13、css类

    ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类

       ng-model 指令根据表单域的状态添加/移除以下类：

• ng-empty
• ng-not-empty
• ng-touched
• ng-untouched
• ng-valid
• ng-invalid
• ng-dirty
• ng-pending
• ng-pristine

比如：

<style>

input.ng-invalid {
    background-color: lightblue;
}

</style>
<form ng-app="" name="myForm">
    <input name="myAddress" ng-model="text" required>
</form>

14、Scope(作用域)

       Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。Scope 可应用在视图和控制器上

比如：（Scope 作用范围）

<div ng-app="myApp" ng-controller="myCtrl">
<ul><li ng-repeat="x in names">{{x}}</li></ul>
</div>
<script>

var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

根作用域：

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用

比如：

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}}式家族:</h1>
<ul> <li ng-repeat="x in names">{{lastname}}{{x}} </li></ul>
</div>
<script>

var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope, $rootScope) {
    $scope.names = ["一", "二", "三"];
    $rootScope.lastname = "蔡";
});

</script>

15、控制器方法

       比如：

<div ng-app="myApp" ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>姓名: {{fullName()}}</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘personCtrl‘, function($scope) {
    $scope.firstName = "一";
    $scope.lastName = "蔡";
    $scope.fullName = function() {
        return $scope. lastName + " " + $scope. firstName;
    }
});
</script>

16、过滤器

使用方法：

（1）  {{ price | currency }}

（2）  {{ lastName | lowercase }

（3）  {{ lastName | uppercase }

（4）   <li ng-repeat="x in names | orderBy:‘country‘">
    {{ x.name + ‘, ‘ + x.country }}
  </li>

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

17、angularjs服务（service）

    (1)$location

    注意:$location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义

    (2)$http

var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

    (3)$timeout

$timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);

注意： 取消： $timeout.cancel();

    (4)$interval

$interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);

注意：取消定时器： $interval.cancel();

    (5)自定义服务

       创建名为hexafy 的访问:

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

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

    (6)过滤器中使用自定义服务

    在过滤器 myFormat 中使用服务 hexafy:

app.filter(‘myFormat‘,[‘hexafy‘, function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

    在对象数组中获取值时你可以使用过滤器

<ul>
<li ng-repeat="x in counts">{{x | myFormat}}</li>

</ul>

18、$http

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ‘, ‘ + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘customersCtrl‘, function($scope, $http) {
    $http.get("a.json")
    .success(function(response) {$scope.names = response.records;});
});
</script>

19、select

使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出

比如：

<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select></div>
<script>

var app = angular.module(‘myApp‘, []);
app.controller(‘myCtrl‘, function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});

</script>

也可以使用ng-repeat 指令来创建下拉列表

比如：

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

注意：ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

将数据对象作为数据源：

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

20、tabel

   (1)$index(位置)

    表格显示序号可以在 <td> 中添加 $index

       (2)$even 和 $odd

    比如：

<table>

<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>

</tr>

</table>

21、ng-disabled

22、ng-show

    ng-show 指令隐藏或显示一个 HTML 元素，ng-show=”true”时显示，反之，则隐藏

     除此之外，也可以通过使用表达式来计算布尔值（ true 或 false）

       比如：

              <div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

23、ng-hide

24、事件

   ng-click点击事件

      <div ng-app="" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>

</div>

   切换：

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">>隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}
</p></div><script>
var app = angular.module(‘myApp‘, []);
app.controller(‘personCtrl‘, function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>

25、angular.copy()拷贝

   比如：

      <div ng-app="myApp" ng-controller="formCtrl">
       <form novalidate>
           First Name:<br>
          <input type="text" ng-model="user.firstName"><br>
           Last Name:<br>
          <input type="text" ng-model="user.lastName">
          <br><br>
          <button ng-click="reset()">RESET</button>
       </form>
       <p>form = {{user}}</p>
       <p>master = {{master}}</p>

</div>

<script>
var app = angular.module(‘myApp‘, []);
app.controller(‘formCtrl‘, function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

26、AngularJS 全局 API

27、ng-include

   使用该指令来包含html内容

   比如：

   <div class="container">
       <div ng-include="‘myUsers_List.htm‘"></div>

</div>

28、AngularJS动画

       需要引入angular-animate.min.js 库

还需在应用中使用模型 ngAnimate：

不过：如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中

var app = angular.module(‘myApp‘, [‘ngAnimate‘]);

ngAnimate 模型可以添加或移除 class 。ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

29、依赖注入(配置)

以下5个核心组件用来作为依赖注入：

• value
• factory
• service
• provider
• constant

（1）  value

（2）  factory

• factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
• 通常我们使用 factory 函数来计算或返回值

（1）  service

（2）  provider

• 通过 provider 创建一个 service、factory等(配置阶段)。
• Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory

（1）  constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的

30、ng-switch

    ng-switch 指令根据表达式显示或隐藏对应的部分。对应的子元素使用 ng-switch-when 指令，如果匹配选中选择显示，其他为匹配的则移除。通过使用 ng-switch-default 指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

比如：

    <div ng-app="">

         <input type="text" ng-model="name">

         <div ng-switch="name">

            <div ng-switch-when="hello">hello</div> // 匹配，显示

            <div ng-switch-when="world">world</div> // 匹配，显示

            <div ng-switch-default>default</div> // 不匹配，显示默认值

         </div>

      </div>

31、ng-method

    (1) angular.element 将原声对象转化成jq对象

      其中： div1是id

    (2)判断两个值是否相等

angular.equals(NaN,NaN)

(3)对象的继承angular.extend

(4)fromJson  toJson

(5)复制属性

（6）  遍历方法

（7）  绑定

32、通过指定的属性遍历(track by) ---有错，不知道为什么

<div ng-init="phones=[‘三星‘,‘华为‘,‘苹果‘,‘苹果‘]">

    <div ng-repeat="phone in phones track by $index">

         {{phone}}

</div>

</div>

33、ng-if

   条件不成立的时候，命令不执行，并且会移出元素

34、run

    //在执行的时候配置全局变量$rootScope(会先执行run方法)

var app = angular.module("appModule",[]);

app.run([‘$rootScope‘,function ($rootScope) {

    $rootScope.name = {name:2};

}]);

假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯一合理的地方就是run方法：

angular.module(‘myApp‘, [‘ngRoute‘])

.run(function($rootScope, AuthService) {

    $rootScope.$on(‘$routeChangeStart‘, function(evt, next, current) {

        // 如果用户未登录

        if (!AuthService.userLoggedIn()) {

            if (next.templateUrl === "login.html") {

                // 已经转向登录路由因此无需重定向

            } else {

                $location.path(‘/login‘);

            }

        }

    });

});

35、监听（watch）

36、ng-href/ng-src

    比如：

<a ng-href="http://www.mamicode.com/{{src}}">go！！！</a>

37、ng-model-options 

38、Controller 间通信机制

39、配置（config()）

在模块的加载阶段，AngularJS会在提供者注册和配置的过程中对模块进行配置。在整个AngularJS的工作流中，这个阶段是唯一能够在应用启动前进行修改的部分。

angularjs笔记二