码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS基础概念

时间:2015-08-12 18:44:26      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

  1. 作用域、控制器、指令

作用域

应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$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>‘ }; });

//待续

AngularJS基础概念

标签:

原文地址:http://www.cnblogs.com/1000px/p/4724914.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!