Angularjs权威教程

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,661 | 阅读时长 ≈ 10

needTime
前十章：简单内容；后几章，还没有记录

2018.3.8 四 20:19 天#13

全书 35 章，由浅入深地讲解了AngularJS 的基本概念和基本功能，包括
模块、作用域、控制器、表达式、指令、路由、依赖注入等，

后半部分深入到 AngularJS 应用开发，系统地讨论了服务器通信、事件、架构、动画、本地化、安全、缓存、移动应用等主题。
本书适合各个层次的 AngularJS 开发人员学习，无论是出于工作需要，还是好奇心的驱使，只要你想彻底理解 AngularJS，本书都会让你满载而归。

著　　　　[美] Ari Lerner
译　　　　赵望野　徐　飞　何鹏飞

人民邮电出版社出版发行　　
字数：760千字
2014年 8 月第 1 版
2014年 8 月北京第 1 次印刷

AngularJS提供了一系列健壮的功能，以及将代码隔离成模块的方法，
这对提高可复用性、可维护性和可测试性都是非常有益的。它的核心功能包括DOM操作、动画、
模板、双向数据绑定、路由、历史管理、Ajax和测试，等等。

第二章

2.3 数据绑定的最佳实践
由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，
通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。

第三章 模块

3.1.2 requires（字符串数组）
requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这
些模块，依赖需要在本模块加载之前由注入器进行预加载。

第四章 作用域

应用的作用域是和应用的数据模型相关联的， 同时作用域也是表达式执行的上下文。 $scope
对象是定义应用业务逻辑、控制器方法和视图属性的地方。

$rootScope是AngularJS中最接近全局作用域的对象。在$rootScope上附加太多业
务逻并不是好主意，这与污染JavaScript的全局作用域是一样的。

angular.module(‘myApp’, [])
.run(function($rootScope) {
$rootScope.name = “World”;
});

第五章 控制器

function FirstController($scope) {
$scope.message = “hello”;
}
将控制器命名为[Name]Controller而不是[Name]Ctrl是一个最佳实践。

正如我们看到的那样，AngularJS会在创建作用域时调用控制器方法。
细心的读者会发现，我们是在全局作用域中创建的这个函数。这样做并不合适，因为会污染全局命名空间。更合理的方式是创建一个模块，然后在模块中创建控制器，

控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。 尽可能地精简控制器是很好的做法。作为AngularJS开发者，使用依赖注入来访问服务可以实现这个目的。

AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

第六章 表达式

6.1 解析 AngularJS 表达式

angular.module("myApp", []) 
.controller('MyController',  
function($scope,$parse) { 
$scope.$watch('expr', function(newVal, oldVal, scope) { 
    if (newVal !== oldVal) { 
    // 用该表达式设置parseFun 
    var parseFun = $parse(newVal); 
    // 获取经过解析后表达式的值 
    $scope.parsedValue = parseFun(scope); 
    } 
}); 
});

6.2 插值字符串

angular.module('myApp', []) 
.controller('MyController', function($scope, $interpolate) { 
    // 设置监听 
    $scope.$watch('emailBody', function(body) { 
    if (body) { 
        var template = $interpolate(body); 
        $scope.previewText =  
        template({to: $scope.to}); 
    } 
    }; 
});

$_MORE: P42-44 自定义及注入服务
如果要修改这两个符号的设置，需要在创建新模块时将$interpolateProvider注入进去。
下面我们来创建一个服务，第14章会对服务进行深入讨论。

第七章 过滤器

也可以用自定义函数进行过滤（在这个例子中函数定义在$scope上）:
{\{ ["Ari","likes","to","travel"] | filter:isCapitalized }}

isCapitalized函数的功能是根据首字母是否为大写返回true或false，具体如下所示：

$scope.isCapitalized = function(str) { 
    return str[0] == str[0].toUpperCase(); 
};

我们也可以给filter过滤器传入第二个参数，用来指定预期值同实际值进行比较的方式。

| filter:{'favorite food': 'Pizza'} }}
  1. {\{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
  2. {\{ San Francisco is very cloudy | limitTo:-6 }}
  3. | orderBy:'name':true }}

$_PS: 没有` 和 \ hexo 编不过去

7.1 自定义过滤器

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

7.2 表单验证

  1. 自定义验证
    在AngularJS中自定义指令是非常容易的。鉴于目前还没有介绍到指令的相关内容，第10章再深入研究如何创建自定义验证。目前先来看一下如何通过向后端服务器发送请求，并通过响应的结果来将输入字段设置为合法或不合法，以确保输入字段中的内容是唯一的。

  1. 在表单中控制变量
    formName.inputFieldName.$pristine/$dirty .$valid/$invalid .$error
    $_MORE: 实际什么时候要，自定义验证

  2. 一些有用的CSS样式
    AngularJS处理表单时，会根据表单当前的状态添加一些CSS类（例如当前是合法的、未发生
    变化的，等等） ，这些CSS类的命名和前面介绍的属性很相似。
    它们包括：
    .ng-pristine {}
    .ng-dirty {}
    .ng-valid {}
    .ng-invalid {}

  3. 组合实例
    下面开始定义表单：

ngMessages(1.3+)
很多时候这些信息相互之间非常相似。我们可以将它们保存到模板中从而减少麻烦，而不是重新输入每个字段的错误信息。
有时，你可能希望为不同的字段自定义错误信息。没问题，你可以在这个指令内简单地插入一个自定义错误信息。

此外，甚至还可以为自定义验证创建自定义消息。可以通过修改模型的 $parsers链做到这
一点。

$_PS: 表单验证这一章，需要好好实践 验证

第八章 指令简介

8.1 指令：自定义 HTML 元素和属性

注意，还有其他内置指令（比如ng-include和ng-view）也会创建新的子作用域，这意味着它们在被调用时行为和ng-controller类似。我们在构造自定义指令时也可以创建新的子作用域。

  1. 表达式
    由于指令可以用属性的形式调用，我们可能会好奇如果给属性赋值会发生什么：
    • 用表达式来声明指令
      我们知道声明指令时既可以使用表达式，也可以不使用表达式。下面回顾一下几种合法的表达式声明：
    • 当前作用域介绍

注意，还有其他内置指令（比如ng-include和ng-view）也会创建新的子作用域，这意味着它们在被调用时行为和ng-controller类似。我们在构造自定义指令时也可以创建新的子作用域

8.2 向指令中传递数据

有好几种途径可以设置指令内部作用域中属性的值。 最简单的方法就是使用由所属控制器提供的已经存在的作用域。

尽管简单，共享状态会导致很多其他问题。如果控制器被移除，或者在控制器的作用域中也定义了一个叫myUrl的属性，我们就被迫要修改代码，这是成本很高且让人沮丧的事情。
AngularJS允许通过创建新的子作用域或者隔离作用域来解决这个常见问题。

目前为止，我们一直忽略了一个细节。实际上不能像上面的例子那样，在作用域对象内部直接设置someProperty属性。
scope: {
// 这样行不通
someProperty: ‘needs to be set’
}
实际上要在DOM中像之前提到过的那样，像给函数传递参数一样，通过属性来设置值：

1
2
3
<div my-directive 
    some-property="someProperty with @ binding"> 
</div>

现在，我们在作用域对象内部把someProperty值设置为@这个绑定策略。这个绑定策略告诉AngularJS将DOM中some-property属性的值复制给新作用域对象中的someProperty属性：
scope: {
someProperty: ‘@’
}
注意，默认情况下someProperty在DOM中的映射是some-property属性。如果我们想显式指定绑定的属性名，可以用如下方式：
scope: {
someProperty: ‘@someAttr’
}

$_MORE: P71–下一章
自定义指令：独立作用域需要实践，包括显示指定绑定的属性名

第九章 内置指令

其中一些指令重载了原生的HTML元素，比如<form>和<a>标签，当在HTML中使用标签时，并不一定能明确看出是否在使用指令。

  1. ng-controller
    由于原型继承的关系，修改父级对象中的someBareValue会同时修改子对象中的值，但反之则不行。
    如果将模型对象的某个属性设置为字符串， 它会通过引用进行共享， 因此在子$scope中修改属性也会修改父$scope中的这个属性。下面的例子展示了正确的做法：

$_MORE: P80最后–该小节结束
实践上面两句话

P82 22：30


2018.3.10 六 10:02 天#13

  1. ng-include

第十章 指令详解

10.1 指令定义

  1. factory_function （函数）
    这个函数返回一个对象， 其中定义了指令的全部行为。 $compile服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。
    angular.application(‘myApp’, [])
    .directive(‘myDirective’, function() {
    // 一个指令定义对象
    return { 
    // 通过设置项来定义指令，在这里进行覆写
    };
    });
    我们也可以返回一个函数代替对象来定义指令，但是像上面的例子一样，通过对象来定义是最佳的方式。
    当返回一个函数时，这个函数通常被称作链接传递（postLink）函数，利用它我们可以定义指令的链接（link）功能。由于返回函数而不是对象会限制定义指令时的自由度，因此只在构造简单的指令时才比较有用。

10.2.2 隔离作用域

10.3 绑定策略

10.4 AngularJS 的生命周期

10.5 ngModel

10:54


2018

第一章 AngularJS模块加载

第二章

第三章

第四章

第五章

第六章

第七章

第八章

第九章

第十章

第章


2018

knowledge is no pay,reward is kindness
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多
0%