AngularJSAngularJS基础概念

作用域、控制器、指令

作用域

采取之作用域是暨动用的数据模型相关联的,同时作用域也是表达式执行之上下文。$scope对象是概念应用工作逻辑、控制器方法与视图属性之地方。

作用域是采取状态的底蕴。基于动态绑定,我们得依靠视图在改动数据时立刻更新$scope,也可以靠$scope在其发生变化时立刻重新渲染视图。

AngularJS将$scope设计成为和DOM类似之构造,因此$scope可以展开嵌套,也就是说可以引用父级$scope中之性。

作用域提供了监视数据模型变化的能力。它同意开发者使用中的apply机制,将数据模型的变化于总体应用范围外展开通报。我们当作用域的内外文中定义跟履表达式,同时她吧是以事件通报为其它一个控制器和行使其他一些的中介。

以用的事体逻辑都位居控制器中,而用相关的数目还位于控制器的作用域中,这是杀全面的架。

àng-app同$rootScope绑定,$rootScope是有$scope对象的最为上层。

àscope对象就是是司空见惯的JavaScript对象,我们可以于那上随意修改或补给加属性

àscope对象在AngularJS中当数据模型,但与民俗数据模型并无平等,它不担负处理同操作数据,它就是视图和HTML之间的大桥,它是视图和控制器之间的胶水

àscope的所有属性都得以自行为视图访问到。

àAngularJS不会见针对无含有AngularJS特殊声明的元素进行其它处理

咱俩可在AngularJS应用的模板中应用多种标记

    指令:将DOM元素增强吗而复用的DOM组件的性能或因素

    值绑定:模板语法{{}}可以拿表达式绑定到视图上

    过滤器:可以以视图中使函数,用来展开格式化

    表单控件:用来视察用户输入的控件

作用域能做呀

    提供观察者以监视数据模型的生成

    可以拿数据模型的变型通知为任何应用,甚至是系统外的机件

    可以开展嵌套,隔离业务职能跟数码

    给表达式提供运算时所要的实行环境

作用域包含了渲染视图时所待的效力及多少,它是富有视图的唯一源头。可以以作用域理解成视图模型(view
model)

命令和作用域

令在AngularJS中吃广大运用,指令通常不会见创自己的$scope,但为生不同,比如ng-controller和ng-repeat指令会创建好之子作用域并将它附加到DOM元素上。

控制器

控制器的来意是增长视图。AngularJS的控制器是一个函数,用来为视图的作用域中补充加额外的功力。我们之所以它们来深受作用域对象设置初始状态,并上加起定义行为。

var app = angular.module(‘app’, []);

app.controller(“firstController’, function($scope) { $scope.message =
‘hello’; });

运依赖注入可以尽量精简控制器。

AngularJS同其它JavaScript框架最要的一个界别是,控制器并无适合用来施行DOM操作、格式化操作还是数操作,以及除存储数据模型之外的状态维护操作。它独自是视图和$scope之间的桥梁。

计划良好的应用会将复杂的逻辑放到指令和劳务被,通过动指令与劳动,我们好拿控制器又做一个轻量且重新便于维护的样式。

表达式

{{expression}}将一个变量绑定到$scope上。

à所有表达式都在所属的作用域内部推行,并生看当地$scope的权位

à如果表达式发生了TypeError和ReferenceError并无见面丢掉来大

à不容许利用其他流程控制作用(ifelse)

à可以领过滤器和过滤器链

过滤器

过滤器用来格式化需要出示让用户的数目,AngularJS提供了放过滤器,也供饿了起定义过滤器的门路。

指令

于定义HTML元素和总体性

令本质上虽是AngularJS扩展具有从定义功能的HTML元素的不二法门。

angular.module(“myApp”,[])

.directive(“myDirective”, function() {

return { restrict:’E’,template:'<a href=http://baidu.com>Click
me to go to baidu</a>’}; });

经AngularJS模块API中的.directive()方法,我们好透过传播一个字符串和一个函数来注册一个初命令,其中字符串是此命令的讳,函数应该归一个对象。

directive()方法返回的目标中涵盖了用来定义和部署指令所需要的法子以及特性。

实际上,声明指令并不需要创建一个初的自定义元素。声明指令本质上是当HTML中经元素、属性、类还是注释来填补加效果。

<my-directive></my-directive>

<div my-directive></div>

<div class=”my-directive”></div>

<!—directive:my-directive–>

当命令的定义着,设置restrict,可以告知AngularJS在编译HTML时用啦种声明格式来配合指令定义。可以装一个还是多独格式。

Eà元素 Aà属性 Cà类 Mà注释

无论有多少种声明属性的方式,我们坚持利用性能之方法,因为其发出较好的跨越浏览器兼容性:restrict:’A’

命和表达式

出于令可以据此性之款型调用,那么为属性赋值也是实用之

<h1 ng-init=”greeting=’helloworld'”>The greeting is:
{{greeting}}</h1>

就此表达式来声称指令

差一点种合法的表达式声明

<my-directive=”someExpression”></my-directive>

<div my-directive=”someExpression”></div>

<div class=”my-directive:someExpression”></div>

<!—directive: my-directive someExpression –>

于指令中传递数据

AngularJS并没界定于指令的模版被硬编码字符串

假设无以URL和链接文本混在指令中,可以为任何使用我们指令的人数供更好之体验。我们的靶子是关爱指令的官接口,就比如任何任何编程语言同样。

template:'<a href=”{{myUrl}}”>{{myLinkText}}</a>’

每当HTML中可如此使指令

<div my-directive my-url=”http://www.baidu.com” my-link-text=”Click
me to go to Google”></div>

于浏览器被运作,根据结果好窥见,标签中href和标签内文件都无安装成。

起少数栽途径得以装指令中作用域的价值,最简易的艺术尽管是以由所属控制器提供的已有的作用域

尽管简单,共享状态会招众多别题材,如果控制器被移除,或者当控制器的作用域中也定义了一个叫myUrl的特性,我们就被迫要改代码,这是本非常高且让人心寒的事情。

AngularJS允许通过创建新的子作用域或者隔离作用域来化解这大的问题。

改后底通令,看起是这样

angular.module(“myApp”, [])

.directive(“myDirective”, function() {

return {

restrict:’A’,

replace:true,

scope: {

myUrl: ‘@’,

myLinkText:’@’

},

template:'<a href=”{{myUrl}}”>’ + ‘{{myLinkText}}</a>’ };
});

由于指令会创建一个割裂作用域,所以要是要是兑现双向数据绑定,需要一个新的绑定策略

dirApp.directive(“myDirective”, function() {

return {

restrict: “A”,

replace: true,

scope: {

myUrl: ‘=someAttr’,

myLinkText: “@”

    },

    template: “\

        <div>\

        <label>My Url Field:</label>\

        <input type=’text’\

            ng-model=’myUrl’ >\

            <a href='{{myUrl}}’>{{myLinkText}}</a>\

            </div>”

    };

});

唯的改动是用”=”的绑定策略代替了”@”

放到指令

ng-disabled

以身作则1:在底下这例子中,按钮一直忍受用,直到用户以文本字段受到输入内容:

<input type=”text” ng-model=”someProperty”
placeholder=”TypetoEnable”>

<button ng-model=”button”
ng-disabled=”!someProperty”>AButton</button>

以身作则2:在脚的例证中,文本字段会被受用5秒,直到isDisabled属性设置也true

<textarea ng-disabled=”isDisabled”>Wait5seconds</textarea>

angular.module(“myApp”, [])

.run(function($rootScope, $timeout) {

$rootScope.isDisabled = true;

$timeout(function() {

$rootScope.isDisabled = false;

},5000); });

ng-readonly

演示1:通过ng-readonly可以用有返回真要借用的表达式同是否出现readonly属性进行绑定

Type here to make sibling readonly:

<input type=”text” ng-model=”someProperty”><br>

<input type=”text” ng-readonly=”someProperty” value=”Some text
here”>

ng-checked

示范1:在底下的例子中,我们透过ng-init指令将someProperty的值设置也true。将someProperty同ng-checked绑定以并,AngularJS会输出标准的HTML
checked属性,这样默认会将复选框勾选:

<label>someProperty = {{someProperty}}</label>

<input type=”checkbox” ng-checked=”someProperty”
ng-init=”someProperty” ng-init=”someProperty=true”
ng-model=”someProperty”>

示范2:这个事例刚好和例1相反

<label>someProperty={{anotherProperty}}</label>

<input type=”checkbox” ng-checked=”anotherProperty”
ng-init=”anotherProperty=false” ng-model=”anotherProperty”>

ng-selected

演示1:ng-selected可以本着是否出现option标签的selected属性进行绑定:

<label>select two fish</label>

<input type=”checkbox” ng-model=”isTwoFish”><br>

<select>

<option>One Fish</option>

<option ng-selected=”isTwoFish”>Two Fish</option>

<select>

 

ng-href

当用时作用域中之性动态创建URL时,应该为此ng-href代替href

此地的地下问题是,当用户点击一个是因为插值动态变化的链接时,如果插值尚未生效,将会见过反至不当的页面。如果以ng-href,AngularJS会等到插值生效后,再实践点击链接的行为

<!—当href包含一个{{expression}}时总是以ng-href –>

<a ng-href=”{{myHref}}”>I am feeling lucky, when I load</a>

<!—用户单击之前,href不见面加载–>

<a href=”{{myHref}}”>I am feeling 404</a>

用插值生效事件延2秒来观实际的一言一行

angular.module(“myApp”,[])

.run(function($rootScope, $timeout)
{$rootScope.myHref=”http://baidu.com”;},2000); });

ng-src

AngularJS会告诉浏览器在ng-src对应的表达式生效前不要加载图像

示例1:

<h1>WrongWay</h1>

<img src=”{{imgSrc}}”>

<h1>Rightway</h1>

<img ng-src=”{{imgSrc}}”>

angular.module(“myApp”,[])

.run(function($rootScope, $timeout) {$timeout(function() {
$rootScope.imgSrc=’.png’;},2000); });

 

ng-app

其他有ng-app属性的DOM元素还拿于记为$rootScope的起始点

$rootScope是图域链的起始点,任何嵌套在ng-app内之指令都见面延续其

以JavaScript代码中,通过run()方法来访问$rootScope

得当所有文档中才以相同浅ng-app,如果用在一个页面被放置多只AngularJS应用,需要手动引导使用。

ng-controller

内置指令ng-controller的用意是啊嵌套在内部的命创建一个子作用域,避免用装有操作及模型都定义在$rootScope上,用者令可以在一个DOM元素上停放控制器。

ng-controller接受一个参数expression,这个参数是不可或缺的。expression参数是一个i额AngularJS表达式。子$scope就是一个JavaScript对象,其中饱含从父级$scope中经过原型继承取得的不二法门以及属性,包括利用的$rootScope.

$scope对象的天职是承载DOM中指令所共享的操作以及模型。

操作指的凡$scope上的标准JavaScript方法

型指的是$scope上保留之包含瞬时状态数据的JavaScript对象。持久化状态的数应保留到劳动着,服务之图是处理模型的持久化。

子作用域提供了一个完完全全的目标供我们运用。

值传递及援传递

下面这例子通过引用传递,在父作用域和子作用域之间实现数据双向共享:

<div ng-controller=”someController”>

{{someModel.someValue}}

<button ng-click=”someAction()”>Communicate to
child</button>

<div ng-controller=”childController”>

{{someModel.someValue}}

<button ng-click=”childAction()”>Communicate to
parent</button>

</div>

</div>

var myApp = angular.module(“myApp”,[]);

myApp.controller(“someController”, function($scope) {

$scope.someModel = {someValue: “nothing”};

$scope.someAction = function() {$scope.someModel.someValue =
“parent”;};});

myApp.controller(“childController”, function($scope) {$scope.childAction
= function() {$scope.someModel.someValue = “child”;};});

 

ng-include

利用ng-include可以加载、编译并含有外部HTML片段到眼前之采用被。模板的URL被拘以和祭文档相同之地域和协和下,可以通过白名单或包装成受信任的值来突破限制。更进一步,需要考虑跨域资源共享与同源规则来担保模版可以当旁浏览器被正常加载。

若专注,使用ng-include时AngularJS会自动创建一个子作用域,如果您想使用某个特定的作用域,必须于跟一个DOM元素上丰富ng-controller指令,比如

<div ng-include=”/myTemplateName.html” ng-controller=”myController”
ng-init=”name=’world'”> Hello {{name}} </div>

ng-switch

这个命令和ng-switch-when及on=”propertyName”一起以,可以以propertyName发生变化时渲染不同指令到视图中。

示范1:下面这事例,如果输入的情节也Ari,那么ng-switch-default对应的标签p就见面没有,取而代之的ng-switch-when所对应的h1的内容。

<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>

ng-view

欠令用来安以为路由于管理和放于HTML中的视图的位置。

ng-if

运ng-if指令可以了依据表达式的价在DOM中生成还是移除一个要素。如果赋值给ng-if的表达式的价值是false,那对应之素用会晤自DOM中移除,否则对应元素的一个仿制将受另行插DOM中。

ng-if同ng-show以及ng-hide指令最本色之界别是,它不是透过css显示或隐藏DOM节点,而是真的转移还是移除节点。

经过ng-if移除的素还加载进来以后会过来旧状态。因为元素以被移除的还要,相应的作用域也给灭绝。

ng-repeat

ng-repeat用来遍历一个汇或也集中的每个元素生成一个模板实例。集合中之每个元素还见面吃给予自己的沙盘与作用域。同时,每个模板实例的作用域都见面暴漏一些异常的特性。

$index 遍历的快慢(0—-length-1)

$first 当元素是遍历的第一只时值为true

$middle 当元素不是率先个也未是终极一个正值为true

$last 当元素是遍历的最终一个正值为true

$even 偶数

$odd 奇数

示范1:
下面的事例展示了用$odd和$even来做一个吉祥蓝相间的列表。记住,JavaScript中一再组的目从0开始,所以用!$even!$odd进行布尔值反转

<ul ng-controller=”peopleController”>

<li ng-repeat=”person in people”
ng-class=”{even:!$even,odd:!$odd}”> {{person.name}} lives in
{{person.city}} </li>

</ul>

<style>

.odd {background-color: blue;}

.even {background-color: red;}

</style>

angular.module(“myApp”,[]).controller(“peopleController”,
function($scope) {$scope.people = [{name: “Ari”, city: “San
Francisco”},{name: “Erik”, city: “Seattle”}];});

ng-init

ng-init指令用来以命令给调用时设置中作用域的初识状态。

{{}}

拖欠语法是AngularJS内置的模板语法,它见面当里$scope和视图之间创造绑定,基于此绑定,只要$scope发生变化,视图就见面跟着自动更新。

实质上它呢是命令,它是ng-bind的简易形式,用这种形式不需要创造新的因素,所以她时时叫用当行内文本中。

顾,在屏幕可视的区域外以{{}}会招页面加载时无渲染之要素来闪烁,用ng-bind可以避这题目

ng-bind

比这半个例证

<body ng-init=”greeting=’hello world'”>{{greeting}}</body>

<body ng-init=”greeting=’hello world'”><p
ng-bind=”greeting”></p></body>

ng-cloak

还有同种办法来避免不渲染元素闪烁,那就是ng-cloak

<body ng-init=”greeting=’hello world'”><p
ng-clock>{{greeting}}</p></body>

ng-cloak指令会将内因素隐藏,直到路由调用对应的页面时才显得出来。

ng-bind-template

和ng-bind类似,但足以绑定多个表达式

<div ng-bind-template=”{{message}}{{name}}”></div>

ng-model

就此来拿input select
textarea或打定义表单控件同包含它们的作用域中之性进行绑定。它可以提供并拍卖表单验证功能,在要素上安相关的CSS类(ng-valid、ng-invalid等),并负担在父表单着注册控件。

她以目前作用域中运算表达式的价值与给定的素进行绑定。如果属性并无在,它见面隐式创建并以那补偿加到即作用域中。

我们应该一直用ngModel来绑定$scope上一个数据模型内之习性,而无是$scope上的特性,这好避免以作用域或后作用域中生出性覆盖。

<input type=”text” ng-model=”modelName.someProperty”>

ng-show/ng-hide

要素的显示或躲藏是经移除或加上ng-hide这个css类来落实的。.ng-hide类被优先定义在了AngularJS的CSS文件中,并且其的display属性的价为none(用了!important标记)

ng-change

斯指令会在表单输入发生变化时算给定表达式的价。因为若拍卖表单输入,这个令要跟ngModel联合起来使用。

<div ng-controller=”equationController”>

<input type=”text” ng-model=”equation.x” ng-change=”change()” >

<code>{{equation.output}}</code>

</div>

angular.module(“myApp”,[]).controller(“equationController”,
function($scope) {

    $scope.equation = {};

    $scope.change = function() {$scope.equation.output =
parseInt($scope.equation.x) + 2; };

});

ng-form

ng-form用来以一个表单中嵌套另一个表单。普通的HTML<form>标签不允嵌套,但ng-form可以。

旋即象征其中有着的子表单都官时,外部的表单才会法定。这对于因此ng-repeat动态创建表单是挺实用之。

由未能够由此字符插值来吃输入元素动态生成name属性,所以需要用ng-form指令内每组重复的输入字段都饱含在一个表面表单元素内。

下面的CSS类会根据表单的征状态自动装

表单合法时设置ng-valid

表单不合法 ng-invalid

表单未开展改动时 ng-pristine

表单已经修改 ng-dirty

AngularJS不会将表单提交到服务器,除非她指定了action属性。要指定提交表单时调用哪个JavaScript方法,使用下两单命中之一个

ng-submit 以表单元素上运

ng-click于率先个按钮或submit类型(input[type=submit])的输入字段上使。

为避免处理程序被数调用,只下方面两个指令中的一个。

ng-click

为此来指定一个要素于点击时调用的法门要表达式

ng-select

ng-select用来用数据同HTML的<select>元素进行绑定。这个命令可以与ng-model以及ng-options指令一同以,构建精细且呈现完美的动态表单。

ng-options的值好是一个内涵表达式,其实就只是一个说法,简单地说,它可领一个数组或对象,并针对性它们进行巡回,将内的内容提供于select标签中的选择项。它可生下两种植样式

数组作为数据源

故而数组中之价值做标签

故数组中的价当入选的竹签

据此数组中的价值做标签组

于是数组中之价当入选的标签组

靶作为数据源

为此对象的键-值(key-value)做标签

就此对象的键值作为入选的标签

因而对象的键值作为标签组

因此对象的键值作为入选的标签组

示例1:

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

ng-submit

ng-submit用来拿表达式同onsubmit事件开展绑定。这个令以会拦默认行为(发送请求并重新加载页面),除非表单不含有action属性。

<form ng-submit=”submit()”
ng-controller=”formController”><input type=”submit” name=” name”
value=”Submit”></form>

ng-class

用ng-class动态设置元素的类,方法是绑定一个意味着享有需要丰富的切近的表达式。重复的近乎非会见添加。当表达式发生变化时,先前长的类会被移除,新类会被抬高。

以身作则1:下面的例证会就此ng-class在一个随机数大于5时以.red类添加到一个div上:

<div ng-controller=”lottoryController”>

<div ng-class=”{red: x > 5}” ng-if=”x > 5″>

You won!

</div>

<button ng-click=”x = generateNumber()” ng-init=”x = 0″>

Draw Number

</button>

<p>Number is: {{x}}</p>

</div>

<style>

.red {background-color: red;}

</style>

angular.module(“myApp”,[]).controller(‘lottoryController’,
function($scope) {

    $scope.generateNumber = function() {return
Math.floor((Math.random()*10+1)); };});

ng-attr-(suffix)

当AngularJS编译DOM时会见找花括号{{some
expression}}内之表达式,这些表达式会于机关注册到$watch服务被连创新至$digest循环中,成为她的平部分,但是小浏览器会针对性进行好严苛的限,SVG就是一个例子

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

运作方面的代码会抛来一个错误,指出我们发一个不法性,可以为此ng-attr-cx来缓解

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

相关文章