AngularJS基础概念

作用域、控制器、指令

作用域

利用的作用域是和利用的数据模型相关联的,同时功效域也是表明式执行的上下文。$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组件的属性或因素

    值绑定:模板语法{{}}能够将表明式绑定到视图上

    过滤器:能够在视图中选用函数,用来进行格式化

    表单控件:用来核算用户输入的控件

作用域能做如何

    提供观察者以监视数据模型的变迁

    能够将数据模型的转移文告给全数应用,甚至是系统外的组件

    能够进行嵌套,隔开分离业务职能和多少

    给表明式提供运算时所需的实践环境

成效域包括了渲染视图时所需的功力和数据,它是独具视图的唯1源头。能够将作用域掌握成视图模型(view
model)

指令和成效域

指令在AngularJS中被大规模运用,指令平常不会创立本身的$scope,但也有例外,比如ng-controller和ng-repeat指令会创设和谐的子效率域并将它们附加到DOM成分上。

控制器

控制器的功能是拉长视图。AngularJS的控制器是1个函数,用来向视图的功用域中增加额外的作用。我们用它来给功用域对象设置伊始状态,并增添自定义行为。

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

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

利用正视注入能够尽大概精简控制器。

AngularJS同任何JavaScript框架最重视的3个有别于是,控制器并不合乎用来实施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时用哪个种类评释格式来合作指令定义。能够安装3个或几个格式。

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并从未限制在命令的模板中硬编码字符串

1旦不将U凯雷德L和链接文本混在指令内部,能够为其余应用大家指令的人提供更加好的体验。我们的靶子是关怀指令的公物接口,就像是别的任何编制程序语言同样。

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

是因为指令会创造2个切断效用域,所以只要要完结双向数据绑定,必要3个新的绑定策略

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>

示范二:在上边包车型大巴例子中,文本字段会被禁止使用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

以身作则一:通过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

示范一:在底下的事例中,我们透过ng-init指令将someProperty的值设置为true。将someProperty同ng-checked绑定在1起,AngularJS会输出标准的HTML
checked属性,那样暗中同意会把复选框勾选:

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

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

演示2:那几个事例刚好和例一相反

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

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

ng-selected

演示壹: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

当使用当前成效域中的属性动态创建UBMWX三L时,应该用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

能够在整整文档中只行使3回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片段到当下的采纳中。模板的U智跑L被限制在与运用文书档案相同的域和商业事务下,能够经过白名单或卷入成被信任的值来突破限制。更进一步,要求思考跨域财富共享和同源规则来担保模版可以在其他浏览器中平常加载。

要留意,使用ng-include时AngularJS会自动成立3个子成效域,如若您想利用有个别特定的作用域,必须在同二个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所对应的h一的内容。

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

$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上2个数据模型内的性子,而不是$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在第2个开关或submit类型(input[type=submit])的输入字段上应用。

为了防止处理程序被频繁调用,只利用方面八个指令中的3个。

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动态设置成分的类,方法是绑定3个代表全部必要增加的类的表明式。重复的类不会加上。当表明式爆发变化时,先前加上的类会被移除,新类会被增加。

以身作则壹:上边包车型地铁例子会用ng-class在叁个随机数大于5时将.red类加多到1个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>

相关文章