《AngularJS权威教程》

老二段、数据绑定

2.2 简单的数绑定

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>Simple app</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">
        </script>
    </head>
    <body>
        <input ng-model="name" type="text" placeholder="Your name">
        <h1>Hello {{ name }}</h1>
    </body>
</html>

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 控制器嵌套

<div ng-controller="ParentController">
    <div ng-controller="ChildController">
        <a ng-click="sayHello()">Say hello</a>
    </div>
    {{ person }}
</div>

点击按钮时,可以于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()方法开展严格的上下文转义。

<div ng-controller="MyController">
    <input ng-model="to" type="email" placeholder="Recipient" />
    <textarea ng-model="emailBody"></textarea>
    <pre>{{ previewText }}</pre>
</div>
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' }}
      <!-- ["Lerner","Likes","Eat"] -->
      
    • 对象
      AngularJS会将待过滤对象的性能和是目标中之同名属性进行比,如果属性值是字符串就会判定是否包含该字符串。

      {{ [
        {'name': 'Ari','City': 'San Francisco','favorite food': 'Pizza'},
        {'name': 'Nate','City': 'San Francisco','favorite food': 'indian food'}
         ] | filter:{'favorite food': 'Pizza'}
      }}
      <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->
      
    • 函数
      本着每个元素都实行此函数,返回非假值的素会起于新的数组中连返回。

      {{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
      <!-- ["Ari"] -->
      $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 }}<!-- San -->
  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 
    }}
    <!--[
            {"name":"Q","status":"sleeping"},
            {"name":"Nate","status":"awake"},
            {"name":"Ari","status":"awake"}
        ]-->
    

7.1 自定义过滤器

{{ 'ginger loves dog treats' | lowercase | capitalize }}
<!-- Ginger loves dog treats -->
//自定义capitalize过滤器
angular.module('myApp', [])
.filter('capitalize', function() {
    return function(input) {
    // input是我们传入的字符串
    if (input) {
        return input[0].toUpperCase() + input.slice(1);
    }
});

7.2 表单验证

而想使屏蔽浏览器对表单的默认验证行为,可以在表单元素上助长novalidate标记。
好以input元素上采取的备证选项

  • 顶小尺寸 <input type="text" ng-minlength="5" />
  • 极可怜长 <input type="text" ng-maxlength="20" />
  • 模式匹配 <input type="text" ng-pattern="[a-zA-Z]" />
  • 当表单中控制变量
    • 未修改的表单 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()方法,我们可由此传播一个字符串和一个函数来注册一个新命令。其中字符串是以此命令的名函数应该回到
一个对象涵盖了用来定义跟布置指令所欲的点子以及性能。
<my-directive></my-directive>

angular.module('myApp',[])
.directive('myDirective', function() {
    return {
        restrict: 'E',
        template: '<a href="http://google.com">
        Click me to go to Google</a>'
    };
});

用replace设置也true就拿从定义标签由转变的DOM中完全移除掉,并单独留下由模版生成的链接
restrict可以指定为素(E)、属性(A)、类(C)或注释(M)的格式来调用指令,好之经验法则就是是始终用性来声称指

8.2 向指令中传递数据

AngularJS允许通过创办新的子作用域或者隔离作用域来解决这个广阔问题

第九回、内置指令

9.1 基础ng属性指令

9.1.1 布尔属性
  1. ng-disabled
    用ng-disabled可以把disabled属性绑定到<input><textarea><select><button>表单输入字段上
  2. ng-readonly
    通过ng-readonly可以以某返回真要借用的表达式同是否出现readonly属性进行绑定:
  3. ng-checked 通过ng-checked将某表达式同是否出现checked属性进行绑定。
  4. ng-selected
    ng-selected可以本着是否出现option标签的selected属性进行绑定
9.1.2 类布尔属性
  1. ng-href
    当使用时作用域中的性质动态创建URL时,应该据此ng-href代替href。
  2. ng-src AngularJS会告诉浏览器在ng-src对应的表达式生效之前不要加载图像

9.2 在命令中使用子作用域 

  1. ng-app
    ng-app为AngularJS应用创建$rootScope,任何有ng-app属性的DOM元素用给记为$rootScope的起始点。任何嵌套在ng-app内之一声令下都见面持续其
  2. ng-controller
    ng-controller则会以$rootScope或另外一个ng-controller的作用域为原型创建新的子作用域
    子$scope就是一个JavaScript对象,其中含有从父级$scope中通过原型继承取得的主意和总体性,包括用之$rootScope
  3. ng-include
    采取ng-include可以加载、编译并包含外部HTML片段到当下的利用被。模板的URL被限定以跟利用文档相同的地方和商谈下.

    <div ng-include="/myTemplateName.html" ng-controller="MyController" ng-init="name = 'World'">
        Hello {{ name }}
    </div>
    
  4. ng-switch
    此命令与ng-switch-when及on=”propertyName”一起以,可以在propertyName发生转移
    化时渲染不同指令到视图中

    <input type="text" ng-model="person.name"/>
    <div ng-switch on="person.name">
        <p ng-switch-default>And the winner is</p>
        <h1 ng-switch-when="Ari">{{ person.name }}</h1>
    </div>
    
  5. ng-view
    ng-view指令用来安装以受路由于管理暨停放在HTML中之视图的岗位

  6. ng-if
    利用ng-if指令可以了依据表达式的值在DOM中生成还是移除一个素
    ng-if同no-show和ng-hide指令最实质的区分是,它不是经CSS显示或隐藏DOM节点,而是真的转移还是移除节点。
  7. ng-repeat
    ng-repeat用来遍历一个集合或为集聚中之每个元素生成一个模板实例

    • $index:遍历的进度(0…length-1)。
    • $first:当元素是遍历的第一独时值为true。
    • $middle:当元素处于第一单及最后元素中时值为true。
    • $last:当元素是遍历的尾声一个正值为true。
    • $even:当$index价值是偶数时值为true。
    • $odd:当$index值是奇数时值为true。
  8. ng-init
    ng-init指令用来以指令给调用时设置中作用域的起状态。
  9. {{ }} 与ng-bind
    {{
    }}语法是AngularJS内置的模版语法,它见面在里边$scope和视图之间创造绑定.在屏幕可视的区域外用{{
    }}会造成页面加载时无渲染之要素来闪烁,用ng-bind可以避这题目。
  10. ng-cloak
    除去使用ng-bind来避免不渲染元素闪烁,还足以在包含{{
    }}的要素上应用ng-cloak指令,ng-cloak指令会将里面因素隐藏,直到路由调用对应的页面时才显得出来

    <body ng-init="greeting='HelloWorld'">
        <p ng-cloak>{{ greeting }}</p>
    </body>
    
  11. ng-bind-template
    和ng-bind指令类似,ng-bind-template用来当视图中绑定多单表达式

  12. ng-model
    ng-model指令用来将input、select、text
    area或于定义表单控件同包含它们的作用域中之特性进行绑定
    俺们应一味用ngModel来绑定$scope上一个数据模型内的性质,而非是$scope上之特性,这得免以作用域或后作用域中产生性覆盖。
  13. ng-show/ng-hide
    ng-show和ng-hide根据所于表达式的价值来展示或隐藏HTML元素
    素的展示或潜伏是通过移除或长ng-hide这个CSS类来兑现的。.ng-hide类被先行定义并且它们的display属性的值也none
  14. ng-change
    是指令会在表单输入发生变化时算给定表达式的价值。因为如果拍卖表单输入,这个令要与ngModel联合起来使用。
  15. ng-form
    ng-form用来当一个表单中嵌套另一个表单。普通的HTML<form>标签不允嵌套,但ng-form可以。
  16. ng-click
    ng-click用来指定一个元素让点击时调用的方式要表达式
  17. ng-select
    ng-select用来用数据同HTML的<select>要素进行绑定。这个令可以和ng-model以及ng-options指令一同下

    <div ng-controller="CityController">
        <select ng-model="city" ng-options="city.name for city in cities">
            <option value="">Choose City</option>
        </select>
        Best City: {{ city.name }}
    </div>
    angular.module('myApp',[])
    .controller('CityController',function($scope) {
        $scope.cities = [
            {name: 'Seattle'},
            {name: 'San Francisco'},
            {name: 'Chicago'},
            {name: 'New York'},
            {name: 'Boston'}
        ];
    });
    
  18. ng-submit
    ng-submit用来将表达式同onsubmit事件进行绑定。这个命令以会堵住默认行为(发送请求并再度加载页面),除非表单不含有action属性

  19. ng-class
    采取ng-class
    动态设置元素的接近,方法是绑定一个意味有需要加上的类的表达式。
  20. ng-attr-(suffix)

    <svg>
    <circle cx="{{ cx }}"></circle>
    </svg>
    

    指出我们出一个黑性。可以用ng-attr-cx来缓解此题材。

    <svg>
    <circle ng-attr-cx="{{ cx }}"><circle>
    </svg>
    

第十节、指令详解

10.1 指令定义

directive()这个措施是故来定义指令的

angular.module('myApp', [])
.directive(name,factory_function(){
    // 指令定义放在这里
});
angular.module('myApp', [])
.directive('myDirective', function() {
    return {
        restrict: String,
        priority: Number,
        terminal: Boolean,
        template: String or Template Function:
        function(tElement, tAttrs) (...},
        templateUrl: String,
        replace: Boolean or String,
        scope: Boolean or Object,
        transclude: Boolean,
        controller: String or function(scope, element, attrs, transclude, otherInjectables){ ... },
        controllerAs: String,
        require: String,
        link: function(scope, iElement, iAttrs) { ... },
        compile: 
            // 返回一个对象或连接函数,如下所示:
            function(tElement, tAttrs, transclude) {
                return {
                    pre: function(scope, iElement, iAttrs, controller) { ... },
                    post: function(scope, iElement, iAttrs, controller) { ... }
                }
                // 或者
                return function postLink(...) { ... }
            }
    };
});

指令的生命周期开始受$compile方法并终止被link方法

10.1.1 restrict(字符串)

restrict是一个可选的参数。它告诉AngularJS这个命令以DOM中好何种形式为声称,默认AngularJS认为restrict的值是A,即坐性的形式来开展宣示

10.1.2 优先级(数值型)

倘一个因素上具备两只优先级相同的吩咐,声明在面前的要命会被先行调用。如果中间一个之先行级重强,则无声明的逐一如何还见面于事先调用:具有更强优先级的一声令下总是先运行

10.1.3 terminal(布尔型)

本条参数用来报告AngularJS停止运行时因素上比本指令优先级低的授命。

10.1.4 template(字符串或函数)

template参数是可选的,必须吃安装为以下简单种形式之一:

  • 一段HTML文本;
  • 一个得接受两单参数的函数,参数为tElement和tAttrs,并返一个表示模板的字符串

以实际上生育面临,更好之选取是下templateUrl参数引用外部模板

10.1.5 templateUrl(字符串或函数)

templateUrl是可选的参数,可以是以下项目:

  • 一个表示外部HTML文件路径的字符串;
  • 一个得承受两个参数的函数,参数为tElement和tAttrs,并回一个外部HTML文件路径的字符串。

默认情况下,调用指令时会见在后台通过Ajax来要HTML模板文件,模板加载后,AngularJS会AngularJS将它们默认缓存到$templateCache服务被。在实际上生产中,可以提前拿模板缓存到一个概念模板的JavaScript文件被,这样尽管不需经过XHR来加载模板了

10.1.6 replace(布尔型)

replace是一个可选参数,如果安了这参数,值必须为true,因为默认值为false。默认值意味着模板会吃当作子元素插入到调用此命令的元素中

10.2 指令作用域

10.2.1 scope参数(布尔型或对象)

scope参数是可选的,可以给装为true或一个靶。默认值是false。
当scope设置也true时,会由父作用域继承并创办一个初的作用域对象。
内置指令ng-controller的打算,就是从父级作用域继承并创建一个新的子作用域。
只要一旦开创一个力所能及由表原型继承作用域的指令,需以scope属性设置也true

10.2.2 隔离作用域

装有隔离作用域的命最紧要的施用状况是开创而复用的机件

10.3 绑定策略

AngularJS提供了几乎种植方式能够以指令中的割裂作用域,同命外部的作用域进行数量绑定。
为让新的命令作用域可以看时当地作用域中的变量,需要运用下三种植变化叫受到之一律种

  • 本土作用域属性:运@符号将地面作用域同DOM属性的价进行绑定。指令中作用域可以用外部作用域的变量
  • 双向绑定:通过=可以拿地方作用域上的性与父级作用域上之性质进行双向的数绑定。
  • 父级作用域绑定
    通过&符号可以对父级作用域进行绑定,以便在中运行函数。意味着对斯价值进行设置时会见变一个针对父级作用域的包裹函数。
10.3.1 transclude

transclude是一个可选的参数。如果安了,其值必须为true,它的默认值是false。
置于通常用来创造而复用的机件,典型的例证是模态对话框或导航栏。
为用作用域传递进入,scope参数的价必须经{}或true设置成隔离作用域。如果没设置scope参数,那么指令中的作用域将被装也流传模板的作用域
若是指令以了transclude参数,那么当控制器(下面马上会介绍)中即使无法正常监听数据模型的转移了。这虽是顶尖实践总是建议在链接函数里应用$watch劳之来头。

10.3.2 controller(字符串或函数)

controller参数可以是一个字符串或一个函数

angular.module('myApp', [])
.directive('myDirective', function() {
    restrict: 'A', // 始终需要
    controller: 'SomeController'
})

可当命令中通过匿名构造函数的法门来定义一个内联的控制器:

angular.module('myApp',[])
.directive('myDirective', function() {
    restrict: 'A',
    controller:
    function($scope, $element, $attrs, $transclude) {
    // 控制器逻辑放在这里
    }
});

控制器中也闹一些突出的劳动可以让注入及令中。这些劳务来:

  1. $scope 与指令元素相关联的当前作用域
  2. $element 当前下令对应的元素
  3. $attrs 由时因素的特性组成的对象
  4. $transclude 嵌入链接函数晤及相应之放到作用域进行预绑定

相关文章