Angular JS 笔记

Angular.JS notes

内置指令

1. 在JS中使用run的方法来访问$rootScope.
2. 在Angular中，将模型对象的某个属性设置为字符串，它会通过引用进行共享，因此在子 scope中修改属性也会修改父scope中的这个属性。
3. ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是真正生成或移除节点。

4. ng-repeat用来遍历一个集合或为集合中的每个元素生成一个模板实例.

   • $index：遍历的进度（0…length-1）。
   • $first：当元素是遍历的第一个时值为true。
   • $middle：当元素处于第一个和最后元素之间时值为true。
   • $last：当元素是遍历的最后一个时值为true。
   • $even：当$index值是偶数时值为true。
   • $odd：当$index值是奇数时值为true。

5. ng-init指令用来在指令被调用时设置内部作用域的初始状态。

6. {{ }}语法是AngularJS内置的模板语法，它会在内部 $scope和视图之间创建绑定。基于这个绑定，只要$scope发生变化，视图就会随之自动更新。事实上它也是指令，虽然看起来并不像，实际上它是ng-bind的简略形式.

   在屏幕可视的区域内使用{{ }}会导致页面加载时未渲染的元素发生闪烁，用ng-bind可以避免这个问题。除使用ng-bind来避免未渲染元素闪烁，还可以在含有{{ }}的元素上使用ng-cloak指令

7. ng-cloak指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。

8. ng-bind-template: 同ng-bind指令类似，ng-bind-template用来在视图中绑定多个表达式。
   <div
ng-bind-template="{{message}}{{name}}">
</div>
9. ng-model指令用来将input、select、textarea或自定义表单控件同包含它们的作用域的属性进行绑定。
10. ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素

<div ng-show="2 + 2 == 5">2 + 2 isn't 5, don't show</div><div ng-show="2 + 2 == 4">2 + 2 is 4, do show</div>

1. ng-change这个指令会在表单输入发生变化时计算给定表达式的值,因为要处理表单输入，这个指令要和ngModel联合起来使用
2. ng-form用来在一个表单内部嵌套另一个表单
3. ng-click用来指定一个元素被点击时调用的方法或表达式。
4. ng-select用来将数据同HTML的<select>元素进行绑定。这个指令可以和ng-model以及ng-options指令一同使用，构建精细且表现优良的动态表单。ng-options的值可以是一个内涵表达式（comprehension expression），简单来说就是它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给select标签内部的选项
5. ng-submit用来将表达式同onsubmit事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面），除非表单不含有action属性。
6. 使用ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式

自定义指令

1. directive()这个方法是用来定义指令

   directive() 方法可以接受两个参数：
   name（字符串）
   指令的名字，用来在视图中引用特定的指令。
   factory_function （函数）
   这个函数返回一个对象，其中定义了指令的全部行为。

2. restrict是一个可选的参数。它告诉AngularJS这个指令在DOM中可以何种形式被声明。默认AngularJS认为restrict的值是A，即以属性的形式来进行声明。

   可选值如下：
   E（元素）
   <my-directive></my-directive>
   A（属性，默认值）
   <div my-directive="expression"></div>
   C（类名）
   <div class="my-directive:expression;"></div>
   M（注释）
   <--directive:my-directive expression-->

3. terminal是一个布尔型参数，可以被设置为true或false。这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行.

4. template参数是可选的，必须被设置为以下两种形式之一
5. 一段HTML文字， 如果模板字符串中含有多个DOM元素，或者只由一个单独的文本节点构成，那它必须被包含在一个父元素内。换句话说，必须存在一个根DOM元素
6. 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的.
7. templateUrl（字符串或函数）：
   

   1，一个代表外部HTML文件路径的字符串；
   2，一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。

8. replace是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部

9. 指令作用域

   $rootScope这个特殊的对象会在DOM中声明ng-app时被创建, 创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}。如果这样做了，指令的模板就无法访问外部作用域了

10. scope参数是可选的，可以被设置为true或一个对象。默认值是false。当scope设置为true时，会从父作用域继承并创建一个新的作用域对象。

11. 绑定策略

本地作用域属性：
使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量：@(or @attr)
双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。= (or =attr)。

路由

angular.route VS ui.router

Angular.route模块路由：

ng-view是由ngRoute模块提供的一个特殊指令，它的独特作用是在HTML中给$route对应的视图内容占位。ng-view是一个优先级为1000的终极指令.

ng-View指令遵循以下规则:
1. 每次触发$routeChangeSuccess事件，视图都会更新。
2. 如果某个模板同当前的路由相关联：

1. 创建一个新的作用域；
2. 移除上一个视图，同时上一个作用域也会被清除；
3. 将新的作用域同当前模板关联在一起；
4. 如果路由中有相关的定义，那么就把对应的控制器同当前作用域关联起来；
5. 触发$viewContentLoaded事件；

使用When方法进行路由：这个方法可以接受两个参数（when(path,
route)）。
第一个参数是路由路径，这个路径会与$location.path进行匹配，$location.path也就是当前URL的路径。
第二个参数是配置对象，决定了当第一个参数中的路由能够匹配时具体做些什么。配置对象中可以进行设置的属性包括controller、template、templateURL、resolve、redirectTo和reloadOnSearch。

angular.module('myApp', []).config(['$routeProvider', function($routeProvider) {$routeProvider.when('/', {templateUrl: 'views/home.html',controller: 'HomeController'}).when('/login', {templateUrl: 'views/login.html',controller: 'LoginController'}).when('/dashboard', {templateUrl: 'views/dashboard.html',controller: 'DashboardController',resolve: {user: function(SessionService) {return SessionService.getCurrentUser();}}}).otherwise({redirectTo: '/'});}]);

ui.router

这里是如何设置一个基本url。

$stateProvider    .state('contacts', {        url: "/contacts",        templateUrl: 'contacts.html'    })

当我们访问index.html/contacts时， ‘contacts’状态将被激活，同时index.html中的ui-view将被’contacts.html’填充。或者，通过transitionTo(‘contacts’)方法将状态转变到’contacts’状态，同时 url 将更新为index.html/contacts。

通常，url动态部分被称为参数，有几个选项用于指定参数。基本参数如下：

$stateProvider    .state('contacts.detail', {        // 这里设置了url参数        url: "/contacts/:contactId",        templateUrl: 'contacts.detail.html',        controller: function ($stateParams) {            // If we got here from a url of /contacts/42            expect($stateParams).toBe({contactId: 42});        }    })

或者，你也可以使用花括号的方式来指定参数：

// 与前面的设置方法等效url: "/contacts/{contactId}"

‘/hello/’ - 只匹配’/hello/’路径，没有对斜杠进行特殊处理，这种模式将匹配整个路径，而不仅仅是一个前缀。
‘/user/:id’ - 匹配’/user/bob’、’/user/1234!!!’，甚至还匹配 ‘/user/’，但是不匹配’/user’和’/user/bob/details’。第二个路径段将被捕获作为参数”id”。
‘/user/{id}’ - 与前面的示例相同,但使用花括号语法。

嵌套状态的路由控制
在嵌套状态的路由控制中，默认方式是子状态的 url 附加到父状态的 url 之后。

$stateProvider  .state('contacts', {     url: '/contacts',     ...  })  .state('contacts.list', {     url: '/list',     ...  });

• ‘contacts’状态将匹配”/contacts”

• ‘contacts.list’状态将匹配”/contacts/list”。子状态的url是附在父状态的url之后的。

  绝对路由（^）
  如果你使用绝对 url 匹配的方式，那么你需要给你的url字符串加上特殊符号”^”。

$stateProvider  .state('contacts', {     url: '/contacts',     ...  })  .state('contacts.list', {     url: '^/list',     ...  });

路由将成为:

• ‘contacts’状态将匹配”/contacts”
• ‘contacts.list’状态将匹配”/list”。子状态的url没有附在父状态的url之后的，因为使用了^。

$stateParams 服务
之前看到的 $stateParams服务是一个对象，包含 url 中每个参数的键/值。$stateParams可以为控制器或者服务提供 url 的各个部分。
注意：$stateParams服务必须与一个控制器相关，并且$stateParams中的“键/值”也必须事先在那个控制器的url属性中有定义。

// 如果状态中 url 属性是：url: '/users/:id/details/{type}/{repeat:[0-9]+}?from&to'// 当浏览'/users/123/details//0'// $stateParams 对象将是{ id:'123', type:'', repeat:'0' }// 当浏览'/users/123/details/default/0?from=there&to=here'// $stateParams 对象将是{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }

只有当状态被激活并且状态的所有依赖项都被注入时，$stateParams对象才存在。这代表你不能再状态的resolve函数中使用$stateParams对象，可以使用$state.current.params来代替。

$urlRouterProvider
$urlRouterProvider负责处理在状态配置中指定的url路由方式之外的 url 请求的路由方式。$urlRouterProvider负责监视$location，当$location改变后，$urlRouterProvider将从一个列表，一个接一个查找匹配项，直到找到。所有 url 都编译成一个UrlMatcher对象。

命名视图
在ui-router中，一个$state下可以有多个视图，它们有各自的模板和控制器。这一点也是ng-route所没有的， 给了前端路由极大的灵活性。来看例子：

<!-- index.html --><body>  <div ui-view="filters"></div>  <div ui-view="tabledata"></div>  <div ui-view="graph"></div></body>

这一个模板包含了三个命名的ui-view，可以给它们分别设置模板和控制器：

$stateProvider  .state('report',{    views: {      'filters': {        templateUrl: 'report-filters.html',        controller: function($scope){ ... controller stuff just for filters view ... }      },      'tabledata': {        templateUrl: 'report-table.html',        controller: function($scope){ ... controller stuff just for tabledata view ... }      },      'graph': {        templateUrl: 'report-graph.html',        controller: function($scope){ ... controller stuff just for graph view ... }      }    }  })