weixin_30847939
weixin_30847939

《AngularJS权威教程》

第二章、数据绑定

2.2 简单的数据绑定



    
        Simple app
        
    
    
        
        
Hello {
      { name }}

ng-app 指令定义一个 AngularJS 应用程序。ng-app 声明所有被它包含的元素都属于AngularJS 应用
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-controller 指令定义了应用程序控制器。DOM元素上的ng-controller声明所有被它包含的元素都属于某个控制器。
AngularJS 表达式写在双大括号内：{ { expression }}。

  • 它们可以包含文字、运算符和变量。
  • 可以写在 HTML 中
  • 支持过滤器,不支持条件判断，循环及异常。

{ { name }} 是通过 ng-model="name" 进行同步。

2.3 数据绑定的最佳实现

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

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

第三章、模块

模块包含了主要的应用代码。一个应用可以包含多个模块，每一个模块都包含了定义具体功能的代码。
AngularJS允许我们使用angular.module()方法来声明模块，这个方法能够接受两个参数，第一个是模块的名称，第二个是依赖列表，也就是可以被注入到模块中的对象列表。
angular.module(name,requires);

  • name是模块的名称，字符串变量。
  • requires包含了一个字符串变量组成的列表，每个元素都是一个模块名称，本模块依赖于这些模块，依赖需要在本模块加载之前由注入器进行预加载。
//是用来定义模块的
angular.module('myApp', []);
// 用于获取应用
angular.module('myApp')

第四章、作用域

4.1 视图和 $scope

AngularJS启动并生成视图时，会将根ng-app元素同$rootScope进行绑定。$rootScope是所有$scope对象的最上层。$rootScope是AngularJS中最接近全局作用域的对象
$scope对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。

4.2 作用域能做什么

作用域的功能：

  • 提供观察者以监视数据模型的变化；
  • 可以将数据模型的变化通知给整个应用，甚至是系统外的组件；
  • 可以进行嵌套，隔离业务功能和数据；
  • 给表达式提供运算时所需的执行环境。

ng-controller和ng-repeat指令会创建自己的子作用域并将它们附加到DOM元素上。

第五章、控制器

控制器并不适合用来执行DOM操作、格式化或数据操作，以及存储数据之外的状态维护操作，允许在$scope上设置数据

5.1 控制器嵌套


    
    {
      { person }}

点击按钮时，可以在ChildController中访问ParentController中$scope.person的值

var app=angular.module("myApp",[]);
app.controller("myController",['$scope','aService',...,function($scope,aService,...){
    //可以注入你写的factory，provider等等
}]);

controller第一个参数是名称，后面是一个数组，数组的前面是声明注入的内容，可以是n个，最后是个function，function的参数个数也必须是n个，必须跟前面声明注入的内容一一对应,就这样实现了依赖注入

第六章、表达式

  • 所有的表达式都在其所属的作用域内部执行，并有访问本地$scope的权限；
  • 如果表达式发生了TypeError和ReferenceError并不会抛出异常；
  • 不允许使用任何流程控制功能（条件控制，例如if/eles）
  • 可以接受过滤器和过滤器链。

6.1 解析angularjs表达式

$watch(watchFn, watchAction, deepWatch)
watchFn该参数是一个带有Angular表达式或者函数的字符串，它会返回被监控的数据模型的当前值
watchAction这是一个函数或者表达式，当watchFn 发生变化时会被调用。
如果是函数的形式，它将会接收到watchFn的新旧两个值，以及作用域对象的引用。function(newValue, oldValue, scope)。
deepWatch如果设置为true，这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生了变化。
$parse(expression)
将一个AngularJS表达式转换成一个函数function(context,locals)
context[object]:针对你要解析的语句，这个对象中含有你要解析的语句中的表达式(通常是一个scope object)
locals[object]: 关于context中变量的本地变量，对于覆盖context中的变量值很有用。

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 插值字符串

要在字符串模板中做插值操作，需要在你的对象中注入$interpolate服务。
$interpolate服务是一个可以接受三个参数的函数，其中第一个参数是必需的。返回一个函数，用来在特定的上下文中运算表达式。

  • text（字符串）：一个包含字符插值标记的字符串。
  • mustHaveExpression（布尔型）：如果将这个参数设为true，当传入的字符串中不含有表达式时会返回null。
  • trustedContext（字符串）：AngularJS会对已经进行过字符插值操作的字符串通过$sec.getTrusted()方法进行严格的上下文转义。

    
    
    
{
     { previewText }}



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});
        }
    };
});

在{ { previewText }}内部的文本中可以将{ { to }}当做一个变量来使用，并对文本的变化进行实时更新。
如果需要在文本中使用不同于{ { }}的符号来标识表达式的开始和结束，可以在$inter polateProvider中配置。

第七章、过滤器

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

{
     { name | uppercase }}

在JavaScript代码中可以通过$filter来调用过滤器

app.controller('DemoController', ['$scope', '$filter',
    function($scope, $filter) {
        $scope.name = $filter('lowercase')('Ari');
    }
]);

内置过滤器

  1. currency
  2. date
  3. filter
    这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。
    我们也可以给filter过滤器传入第二个参数，用来指定预期值同实际值进行比较的方式
    • 字符串
      返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加!符号。
    {
       { ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
    • 对象
      AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。
    {
       { [
      {'name': 'Ari','City': 'San Francisco','favorite food': 'Pizza'},
      {'name': 'Nate','City': 'San Francisco','favorite food': 'indian food'}
   ] | filter:{'favorite food': 'Pizza'}
}}
    • 函数
      对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。
    {
       { ['Ari','likes','to','travel'] | filter:isCapitalized }}

$scope.isCapitalized = function(str) {
  return str[0] == str[0].toUpperCase();
};
  4. json
    json过滤器可以将一个JSON或JavaScript对象转换成字符串
  5. limitTo
    limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。
    • { { San Francisco is very cloudy | limitTo:3 }}
  6. lowercase
  7. uppercase
  8. number
    number过滤器将数字格式化成文本。它的第二个参数是可选的，用来控制小数点后截取的位数。
  9. orderBy
    orderBy过滤器可以用表达式对指定的数组进行排序。可以接受两个参数，第一个是必需的，第二个是可选的,用来控制排序的方向（是否逆向）。
    { { [{ 'name': 'Ari','status': 'awake' },{ 'name': 'Q','status': 'sleeping' },{ 'name': 'Nate','status': 'awake' }] | orderBy:'name':true }}

7.1 自定义过滤器

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

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

7.2 表单验证

如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记。
可以在input元素上使用的所有验证选项

  • 最小长度
  • 最大长度
  • 模式匹配
  • 在表单中控制变量
    • 未修改的表单 formName.inputFieldName.$pristine 如果未修改，值为true
    • 修改过的表单 formName.inputFieldName.$dirty 只要用户修改过表单，该值都返回true
    • 合法的表单 formName.inputFieldName.$valid
    • 不合法的表单 formName.inputFieldName.$invalid
    • 错误 formName.inputfieldName.$error 如果验证失败，这个属性的值为true
    • 一些有用的CSS样式 .ng-pristine{} .ng-dirty{} .ng-valid{} .ng-invalid{}
    • $parsers
    • $formatters
      给输入字段添加name属性非常重要：这决定了我们将验证信息展示给用户时如何引用表单输入字段。

第八章、指令简介

8.1 自定义HTML元素和属性

通过AngularJS模块API中的.directive()方法，我们可以通过传入一个字符串和一个函数来注册一个新指令。其中字符串是这个指令的名字函数应该返回
一个对象包含了用来定义和配置指令所需的方法和属性。

angular.module('myApp',[])
.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '
        Click me to go to Google'
    };
});

将replace设置为true就将自定义标签从生成的DOM中完全移除掉，并只留下由模版生成的链接
restrict可以指定以元素（E）、属性（A）、类（C）或注释（M）的格式来调用指令,好的经验法则就是始终用属性来声明指

8.2 向指令中传递数据

AngularJS允许通过创建新的子作用域或者隔离作用域来解决这个常见问题

第九章、内置指令

9.1 基础ng属性指令

9.1.1 布尔属性
  1. ng-disabled 用ng-disabled可以把disabled属性绑定到