AngularJS notes -- from 《AngularJS权威教程》（1）

最新推荐文章于 2020-06-26 09:47:47 发布

ilvtt1314

最新推荐文章于 2020-06-26 09:47:47 发布

阅读量555

点赞数

分类专栏： angularJS

angularJS 专栏收录该内容

4 篇文章

订阅专栏

1. 当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。调用$digest().

2. 只要遇到 $ 符号，你都可以只把它看作一个Angular对象。

3. ng-app范围内属于angularJS应用。

4. ng-controller范围内属于某个控制器。

5. 定时器对象：

$timeout(function() {
updateClock();
}, 1000)

6. 在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。

function MyController($scope) {
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date()
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};

7. 一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。

angular.module('myApp', []);

8. 作用域提供了监视数据模型变化的能力。它允许开发者使用其中的 apply 机制，将数据模型的变化在整个应用范围内进行通知。

9. AngularJS启动并生成视图时，会将根 ng-app 元素同 $rootScope 进行绑定。 $rootScope 是所有 $scope 对象的最上层。$rootScope 是AngularJS中最接近全局作用域的对象。在 $rootScope 上附加太多业务逻并不是好主意，这与污染JavaScript的全局作用域是一样的。

10. $scope 对象的生命周期处理有四个不同阶段。

-- 在创建控制器或指令时，AngularJS会用 $injector 创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。

-- 当Angular开始运行时，所有的 $scope 对象都会附加或者链接到视图中。

-- 当事件循环运行时，它通常执行在顶层 $scope 对象上（被称作 $rootScope ），每个子作用域都执行自己的脏值检测。

-- 当一个 $scope 在视图中不再需要时，这个作用域将会清理和销毁自己。

11. AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。

12. 将控制器命名为 [Name]Controller 而不是 [Name]Ctrl 是一个最佳实践。

13. 合理的方式是创建一个模块，然后在模块中创建控制器

var app = angular.module('app', []);
app.controller('FirstController', function($scope) {
$scope.message = "hello";
});

14. 尽可能地精简控制器是很好的做法。作为AngularJS开发者，使用依赖注入来访问服务可以实现这个目的。

15. AngularJS的控制器只是视图和 $scope 之间的桥梁。

16. AngularJS允许在 $scope 上设置包括对象在内的任何类型的数据，并且在视图中还可以展示对象的属性。

17. AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对于ng-app 所处的层级来讲，它的父级作用域就是 $rootScope 。例外：在指令内部创建的作用域被称作孤立作用域。除了孤立作用域外，所有的作用域都通过原型继承而来，也就是说它们都可以访问父级作用域。

18. 默认情况下，AngularJS在当前作用域中无法找到某个属性时，便会在父级作用域中进行查找。如果AngularJS找不到对应的属性，会顺着父级作用域一直向上寻找，直到抵达 $rootScope为止。如果在 $rootScope 中也找不到，程序会继续运行，但视图无法更新。

19. 控制器应该尽可能保持短小精悍，而在控制器中进行DOM操作和数据操作则是一个不好的实践。设计良好的应用会将复杂的逻辑放到指令和服务中。

20. $watch 函数会监视 $scope 上的某个属性。只要属性发生变化就会调用对应的函数。可以使用 $watch 函数在 $scope 上某个属性发生变化时直接运行一个自定义函数。

??????? 21. 插值字符串

22. 在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。

23. 调用过滤器：

HTML格式：
{{ name | uppercase }}

JS格式：
$scope.name = $filter('lowercase')('Ari');

HTML格式带参数：
<!-- 显示：123.46 -->
{{ 123.456789 | number:2 }}

可以用 | 符号作为分割符来同时使用多个过滤器

24. 内置过滤器：

-- currency

-- date

-- filter：第一个参数可以为字符串、对象或是一个用来从数组中选择元素的函数。（？？？？？第二个参数用来指定预期值同实际值进行比较的方式）。

-- json：将一个JSON或JavaScript对象转换成字符串。

-- limitTo：根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。

-- lowercase

-- number：将数字格式化成文本。它的第二个参数是可选的，用来控制小数点后截取的位数。

-- orderBy：？？？？第一个参数（函数、字符串、数组）；第二个参数控制排序的方向（是否逆向\true or false）

-- uppercase

25. 自定义过滤器写在module中

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

====================

{{ 'ginger loves dog treats' | lowercase | capitalize }}