《AngularJS权威教程》

9.1.2 类布尔属性
  1. ng-href
    当使用当前作用域中的属性动态成立U帕杰罗L时,应该用ng-href代替href。
  2. ng-src AngularJS会告诉浏览器在ng-src对应的表明式生效在此以前不要加载图像

第四章、作用域

第三章、模块

模块包括了举足轻重的运用代码。2个采纳能够包罗多少个模块,每2个模块都包含了概念具体效果的代码。
AngularJS允许我们使用angular.module()方法来声称模块,那几个措施能够经受三个参数,第三个是模块的称号,第三个是依靠列表,相当于能够被注入到模块中的对象列表。
angular.module(name,requires);

  • name是模块的名号,字符串变量。
  • requires包蕴了多少个字符串变量组成的列表,每一个成分都以贰个模块名称,本模块依赖于这一个模块,注重需求在本模块加载在此以前由注入器进行预加载。

//是用来定义模块的
angular.module('myApp', []);
// 用于获取应用
angular.module('myApp')

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 指令定义1个 AngularJS 应用程序。ng-app
证明全数被它富含的要素都属于AngularJS 应用
ng-model 指令把成分值(比如输入域的值)绑定到应用程序。
ng-controller
指令定义了应用程控器。DOM成分上的ng-controller注解全体被它含有的要素都属于某些控制器。
AngularJS 表明式写在双大括号内:{{ expression }}。

  • 它们得以分包文字、运算符和变量。
  • 能够写在 HTML 中
  • 支撑过滤器,不援助标准判断,循环及那些。

{{ name }} 是透过 ng-model=”name” 举办共同。

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第3个参数是称呼,前边是3个数组,数组的前方是声称注入的内容,可以是n个,最终是个function,function的参数个数也亟须是n个,必须跟后面注脚注入的内容逐条对应,就这么完结了重视注入

10.1.6 replace(布尔型)

replace是1个可选参数,要是设置了那个参数,值必须为true,因为默许值为false。暗中认可值意味着模板会被当作子成分插入到调用此命令的元素内部

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.2.2 隔开效率域

拥有隔离成效域的通令最要紧的利用情状是创设可复用的零部件

10.2 指令效能域

第玖章、指令详解

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属性格外首要:那决定了我们将表明音信展现给用户时怎么着引用表单输入字段。
10.2.1 scope参数(布尔型或对象)

scope参数是可选的,能够被设置为true或叁个目的。暗中同意值是false。
当scope设置为true时,会从父成效域继承并创造3个新的效能域对象。
放到指令ng-controller的坚守,正是从父级作用域继承并创设贰个新的子功用域。
假如要创制3个可见从表面原型继承效能域的命令,需将scope属性设置为true

8.1 自定义HTML成分和属性

因而AngularJS模块API中的.directive()方法,大家能够通过传播一个字符串和1个函数来注册一个新命令。在那之中字符串是这几个命令的名字函数应该回到
二个对象涵盖了用来定义和安插指令所需的方法和质量。
<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允许通过创办新的子成效域或许隔开分离效用域来消除这些广阔难题

第六章、表达式

  • 拥有的表明式都在其所属的效能域内部实行,并有访问当地$scope的权限;
  • 若果表达式产生了TypeError和ReferenceError并不会抛出尤其;
  • 区别意利用其它流程序控制制效果(条件决定,例如if/eles)
  • 能够承受过滤器和过滤器链。
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 嵌入链接函数会与相应的嵌入功用域进行预绑定

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

4.2 成效域能做哪些

成效域的效劳:

  • 提供观看者以监视数据模型的更动;
  • 可以将数据模型的变更布告给整个应用,甚至是系统外的机件;
  • 能够拓展嵌套,隔断业务职能和多少;
  • 给说明式提供运算时所需的实施环境。

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

其次章、数据绑定

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属性实行绑定

6.2 插值字符串

要在字符串模板中做插值操作,需求在你的目的中流入$interpolate服务。
$interpolate服务是四个足以接受八个参数的函数,个中第③个参数是不可或缺的。再次回到1个函数,用来在一定的上下文中运算表达式。

  • text(字符串):2个包罗字符插值标记的字符串。
  • 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过滤器传入第3个参数,用来钦定预期值同实际值实行比较的不二法门

    • 字符串
      回到全部包括那一个字符串的因素。假使大家想回到不分包该字符串的要素,在参数前加!符号。

      {{ ['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过滤器可以将2个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"}
        ]-->
    
10.1.2 优先级(数值型)

就算二个成分上存有多个优先级相同的吩咐,注解在近年来的可怜会被先行调用。尽管内部二个的先行级更高,则无论注解的各种怎样都会被优先调用:具有更高优先级的命令总是优先运维

9.1 基础ng属性指令

10.1.5 templateUrl(字符串或函数)

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

  • 一个意味着外部HTML文件路径的字符串;
  • 2个基本上能用多少个参数的函数,参数为tElement和tAttrs,并回到一个表面HTML文件路径的字符串。

默许情状下,调用指令时会在后台通过Ajax来呼吁HTML模板文件,模板加载后,AngularJS会将它默许缓存到$templateCache服务中。在实际生产中,能够提前将模板缓存到3个定义模板的JavaScript文件中,这样就不须求通过XHPAJERO来加载模板了

第⑩章、指令简介

第拾章、内置指令

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片段到当下的施用中。模板的U宝马7系L被限定在与利用文书档案相同的域和研究下.

    <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用来遍历七个会晤或为集合中的种种成分生成3个模板实例

    • $index:遍历的快慢(0…length-1)。
    • $first:当成分是遍历的率先个时值为true。
    • $middle:当成分处于第3个和末段成分之间时值为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用来在1个表单内部嵌套另3个表单。普通的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.4 template(字符串或函数)

template参数是可选的,必须棉被服装置为以下二种情势之一:

  • 一段HTML文本;
  • 一个基本上能用三个参数的函数,参数为tElement和tAttrs,并重临贰个表示模板的字符串

在骨子里生育中,更好的采用是利用templateUrl参数引用外部模板

第五章、控制器

控制器并不合乎用来进行DOM操作、格式化或数额操作,以及存款和储蓄数据之外的意况维护操作,允许在$scope上设置数据

4.1 视图和 $scope

AngularJS运营并扭转视图时,会将根ng-app成分同$rootScope进行绑定。$rootScope是所有$scope指标的最上层。$rootScope是AngularJS中最相近全局功效域的对象
$scope对象正是一个一般性的JavaScript对象,大家可以在其上随机改动或添加属性。

10.3.1 transclude

transclude是贰个可选的参数。如果设置了,其值必须为true,它的暗许值是false。
放置平日用来创立可复用的机件,典型的事例是模态对话框或导航栏。
为了将成效域传递进入,scope参数的值必须经过{}或true设置成隔断效能域。假使没有设置scope参数,那么指令内部的功效域将被安装为流传模板的功效域
倘诺指令使用了transclude参数,那么在控制器(上边立即会介绍)中就不能寻常监听数据模型的转移了。那正是极品实践总是提出在链接函数里选拔$watch劳务的来头。

6.1 解析angularjs表达式

$watch(watchFn, watchAction, deepWatch)
watchFn该参数是三个富含Angular表明式只怕函数的字符串,它会回去被监督的数据模型的脚下值
watchAction那是3个函数恐怕表达式,当watchFn 产生变化时会被调用。
如若是函数的款型,它将会吸收到watchFn的新旧四个值,以及效用域对象的引用。function(newValue,
oldValue, scope)。
deep沃特ch即便设置为true,那几个可选的布尔型参数将会命令Angular去反省被监督对象的各种属性是还是不是发生了变通。
$parse(expression)
将1个AngularJS表达式转换来贰个函数function(context,locals)
context[object]:针对你要分析的口舌,那个指标中涵盖你要分析的言语中的说明式(经常是2个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);
        }
    });
});

10.3 绑定策略

AngularJS提供了两种形式能够将下令内部的隔离效用域,同指令外部的效用域举行数据绑定。
为了让新的通令效能域能够访问当前当地作用域中的变量,要求动用上边两种别名中的一种

  • 本土功效域属性:使用@符号将本地成效域同DOM属性的值实行绑定。指令内部作用域能够运用外部功效域的变量
  • 双向绑定:通过=能够将本地效用域上的习性同父级效率域上的本性实行双向的数据绑定。
  • 父级成效域绑定
    通过&符号能够对父级效率域实行绑定,以便在里边运营函数。意味着对这几个值实行安装时会生成1个针对性父级成效域的包裹函数。
10.1.3 terminal(布尔型)

其一参数用来报告AngularJS截止运维当前因素上比本指令优先级低的吩咐。

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();
};
10.1.1 restrict(字符串)

restrict是一个可选的参数。它报告AngularJS那个命令在DOM中能够何种情势被声称,暗中同意AngularJS认为restrict的值是A,即以属性的款式来展开宣示

相关文章