野兽的Angular Api 学习、翻译及理解 - - ngCloak、ngController、ngInit、ngModel

野兽的 ng api 学习 -- ngCloak、ngController、ngInit、ngModel

ngCloak

ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示。这个指令可以用来避免由HTML模板显示造成不良的闪烁效果。

格式: ng-cloak   class=“ng-cloak“

使用代码:

<div ng-cloak>{{‘Hello World‘}}</div>

<div class="ng-cloak">{{‘Hello World‘}}</div>

ng有两种绑定数据到页面的写法,ngBind和{{hash}},ngBind需要一个载体(比如:<span ng-bind="‘Hello World‘"></span>),而{{hash}}方式直接绑定(比如:{{‘Hello World‘}}),ngBind绑定的话,在不断的刷新或者载入页面过慢的情况下不会出现绑定表达式的闪烁,但是{{hash}}方式就会出现表达式闪烁的情况了(在交互体验上没做的那么完善,把未执行计算的表达式显示出来)。

在用{{hash}}方式的时候需要解决表达式闪烁现象,就需要用到ngCloak指令了,ngCloak指令的实现是先将绑定元素的设置为display:none,然后在数据解析出来后又显示出来。详情可点击http://www.cnblogs.com/whitewolf/p/3495822.html做进一步学习和了解。

ngController

ngController 指令给页面附上一个controller类。这是Angular如何支持MVC设计模式的关键所在。

格式:ng-controller=“value”

value:controller的名称。

使用代码:

<div ng-app="Demo">

<div ng-controller="testCtrl">

{{greeting}}

</div>

</div>

<script>

angular.module("Demo", [])

.controller("testCtrl", ["$scope", function ($scope) {

$scope.greeting = "Hello World";

}])

</script>

ngController指令将在js上定义控制器绑定到页面元素上,那么这一块元素就有这个控制器进行操作了,在controller的$scope上绑定各种数据,可在view内的ngController范围馁进行绑定和展示。

ngInit

ngInit指令允许你在当前范围内执行自定义行为(指定表达式)。

格式:ng-init=“value”

value:表达式。

使用代码:

<div ng-app="Demo">

<div ng-controller="demoCtrl">

<div ng-repeat="innerList in list" ng-init="outerIndex = $index">

<div ng-repeat="value in innerList" ng-init="innerIndex = $index">

<span class="example-init">list[ {{outerIndex}} ][ {{innerIndex}} ] = {{value}};</span>

</div>

</div>

</div>

</div>

<script>

这个指令用于在一块范围内定义值或者表达式。比如上述例子代码,是把第一层循环的索引传入第二层循环中。

ngModel

Angular的双向数据绑定关键所在。ngModel指令通过这个指令创建的controller给input、select、textarea(或者自定义窗体)绑定scope上的某个属性值。

ngModel主要负责:

  • 将视图绑定到模型中,一些指令像input、textarea或者select的需求。
  • 提供验证行为。
  • 保持控制状态。
  • 给元素设置相关css类,包括动画。
  • 将控制注册给父窗体。

使用代码:

<div ng-app="Demo">

<div ng-controller="demoCtrl">

<input ng-model="greeting">

</div>

</div>

<script>

angular.module("Demo", [])

.controller("demoCtrl", ["$scope", function ($scope) {

$scope.greeting = "Hello World";

}])

</script>

ngModel指令完美的诠释了Angular的双向数据绑定,很多ng教程的说明双向数据绑定都会用到它。

也就是我们在view修改值后,后端的对应的值也跟着发生一样的变化。

今天下雨,宅着写了一天的代码,当真是风雨无阻啊....编程这东西是会上瘾的....

时间: 2024-10-10 13:38:54

野兽的Angular Api 学习、翻译及理解 - - ngCloak、ngController、ngInit、ngModel的相关文章

野兽的Angular Api 学习、翻译及理解 - - $sce 和 $sceDelegate

野兽的ng api学习 -- $sce 和 $sceDelegate $sce $sce 服务是AngularJs提供的一种严格上下文逸出服务. 严格上下文逸出服务(翻译水平有限,较渣...) 严格上下文逸出(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文语境为特权或者SCE. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码

野兽的Angular Api 学习、翻译及理解 - - $q 承诺与延迟

野兽的ng api学习 -- $q $q 一个帮助处理异步执行函数的服务.当他们做完处理时,使用它们的返回值(或异常). 受 Kris Kowa’s Q 的启发,这是一个实现promise/deferred对象的启用. $q的两种方式---这是一个更类似于Kris Kowal Q或jQuery的递延实现,另一种在一定程度上类似的ES6承诺. Deferred Api 一个被$q.defer()调用的deferred的新实例. deferred对象的目的是暴露相关承诺实例,以及APIs被执行的成功

野兽的Angular Api 学习、翻译及理解 - - ngIf、ngSwitch、ngHide/ngShow

野兽的 ng api 学习 - - ngIf.ngSwitch.ngHide/ngShow 在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ngIf ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作. 格式:ng-if=“value” value:表达式  返回结果为boolean类型. 使用代码:

野兽的Angular Api 学习、翻译及理解 - - $rootScope.Scope

野兽的ng api学习 -- $rootScope.Scope 这里讲的是一些scope的操作,如创建/注销/各种监听及scope间的通信等等. $rootScope.Scope 可以使用$injector通过$rootScope关键字检索的一个根作用域. 可以通过$new()方法创建子作用域.(大多子作用域是在HTML模板被执行编译时自动生成) 格式:$rootScope.Scope([Providers],[instanceCache]) [Providers]:当前作用域需要被提供的服务工

野兽的Angular Api 学习、翻译及理解 - - $compile编译服务与指令

野兽的ng api学习 -- $compile $compile 这是个编译服务.编译一段HTML字符串或者DOM的模板, 产生一个将scope和模板连接到一起的函数. 编译服务主要是和指令为指令服务,下面的文章也是主要介绍指令的. 下面是一个被声明的带指令定义对象的指令的示例: var myModule = angular.module(...); myModule.directive('directiveName', [“injectables”,…,function factory(inj

野兽的Angular Api 学习、翻译及理解 - - form.FormController、ngModel.NgModelController

野兽的ng api学习 -- form.FormController.ngModel.NgModelController form.FormController FormController跟踪所有他所控制的和嵌套表单以及他们的状态,就像有效/无效或者脏值/原始. 每个表单指令创建一个FormController实例. 方法: $addControl(); 给表单注册一个控制器. 使用了ngModelController的输入元素会在连接时自动执行. $removeControl(); 给表单注

@野兽的Angular Api 学习、翻译及理解 - - angular.module

@野兽的 ng api 学习 -- angular.module angular.module 创建一个全局的可用于检索和注入的Angular模块.所有Angular模块(Angular核心模块或者第三方模块)想要在应用里实现,都需要使用这个注入机制. 格式:angular.module(name,[requires],[configFn]); name :  string  创建的模块名称. [requires]: 字符串的数组  代表该模块依赖的其他模块列表,如果不依赖其他模块,则为空数组.

野兽的Angular Api 学习、翻译及理解 - - ngRoute Angular自带的路由

野兽的ng api学习 -- ngRoute ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信息. controller:字符串或函数,指定控制器. controllerAs:一个用于控制器的标识符名称.. template:字符串或函数,html模板. templateUrl:字符串或函数,html模板的地址. resolve:对象,一个可选的

野兽的Angular Api 学习、翻译及理解 - - $templateCache 和 $templateRequest

野兽的ng api学习 -- $templateCache 和 $templateRequest $templateCache 第一次使用模板,它被加载到模板缓存中,以便快速检索.你可以直接将模板标签加载到缓存中,或者通过$templateCache服务. 通过script标签: <script type=”text/ng-template” id=”template.html”> <p>This is the content of the template</p> &

野兽的Angular Api 学习、翻译及理解 - - $animate

野兽的ng api学习 -- $animate $animate $animate服务提供了基本的DOM操作功能如在DOM里插入.移除和移动元素,以及添加和删除类.这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的动画. $animate在Angular核心都是有效的,无论如何,这个服务为了支持所有动画须包含ngAnimate模块.否则,$animate只能做简单的DOM操作. 方法: enter(element,parent,after,[done]); 在D