AngularJS基本特性介绍 - 我期望的世界 - ITeye技术网站
博客分类：
Hello World
使用AngularJS非常简单，如下：
&!doctype html&
&html ng-app&
&script src="http://code.angularjs.org/angular-1.0.1.min.js"&&/script&
Hello {{'World'}}!
以指令ng-app定义AngularJS的作用域，然后引入angular-1.0.1.min.js，这就是AngularJS的Hello World，简单但是无用。
HTML执行表达式（Expressions）
AngularJS允许在HTML直接执行表达式，如下：
1+2 = {{1+2}}!
#页面会显示 1+2 = 3！
一样的简单，同样的无用，因为在HTML直接写表达式会让代码一团糟，这样的功能最好不要用。
Directives（指令）
这个特性非常有用，这个特性扩展HTML的表现能力，通过为DOM对象增加新的属性指令为DOM对象定制行为。使用这个特性可以以更少的代码构建更加优雅的页面结构。AngularJS本身内置了一些指令，下面来看一个例子，使用了内置的ng-repeat
&div ng-init="students = [
{name:'John', age:25, gender:'boy'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Sebastian', age:10, gender:'boy'},
{name:'Samantha', age:16, gender:'girl'}
&div data-ng-repeat="student in students"&
&h3&{{student.name}}:{{student.age}}&/h3&
&/div&
上例中，首先通过ng-init指令创建了一个students的对象数组， 然后使用ng-repeat指令打印出所有学生的名字和年龄。还可以使用ng-show过滤重复值，只显示boy：
&div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"&
&h3&{{student.name}}:{{student.age}}&/h3&
或者使用ng-switch做一些更复杂的控制,年满18岁打印ADULT。
&div data-ng-repeat="student in students" data-ng-show="student.gender=='boy'"
data-ng-switch="student.age &18"&
&h3&{{student.name}}:{{student.age}}&/h3&
&p data-ng-switch-when="true"&ADULT&/p&
&/div&
这个特性比较杀手级，它为开发人员省了很多代码，对定义Web Page Structure非常有帮助。而且除了本身自带的Directives满足大部分群众的需要， 还支持定制Directive满足你的奇葩需求。
数据绑定（Data Binding）
在AngularJS中，只需要简单的使用ng-model就可以实现model和view的双向绑定，任何在view上的修改马上反应到Model，任何在Model数据上的修改马上反应到View的展示上。如下：
&div data-ng-repeat="student in students"&
&h3&{{student.name}}:{{student.age}}&/h3&
Edit Name: &input type="text" data-ng-model="student.name"&
&/div&
过滤器（Filters）
AngularJS通过Filters提供了改变数据展现形式的方法或者过滤部分数据，实现形式就是以‘|’字符分割expression： {{expression|filter1|filter2}}.例如：把student的名字全部展示为大写：
&div data-ng-repeat="student in students"&
&h3&{{student.name|uppercase}}:{{student.age}}&/h3&
和Directive一样，Filter同样支持定制：http://docs.angularjs.org/guide/filter。&&
模块化（Modules）
在AngularJs中，应用可以拆分为一个个的小模块，模块之间可以相互依赖，这样各个功能可以非常方便重用和测试。在HTML中使用ng-app指令即可定义一个Module:
&html ng-app=“AngularJSSample”&
然后在javascript中，可以非常简单的获取到这个Module，
var AngularJSSample = angular.module('AngularJSSample', []);
之后，你可以为这个Module了添加你想要得东西了，比方说我们前面提到的定制filter和Directive等。例如为定义一个Greet Filter:
var AngularJSSample = angular.module('AngularJSSample', []);
AngularJSSample.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
另外angular.module方法的第二个参数是用来指定该模块依赖哪个模块的。
零件视图（Partial Views）
AngularJS除了通过ng-app可以把一个应用拆成小模块，在模块中，还可以通过ngView定义的页面模板，然后和Route配合显示对应的View，这个特性对想写Single Page Application的同学非常有用。
依赖注入（Dependency Injection）
AngularJS中提供了config操作为一个Module注入依赖的Service，例如我想注入一个“$routeProvider"这个路由服务：
AngularJSSample.config(['$routeProvider', function($routeProvider){
路由（Routes）
AngularJS中，可以直接用javascript定义可用的路由，页面的跳转再也不用到服务器去走一圈了
AngularJSSample.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/students', {
templateUrl: 'views/students.html',
controller: 'studentsController'
}).otherwise(
templateUrl: 'views/greeting.html'
控制器（Controllers）
上面的例子中，使用了一个studentController， AngularJS中在module上使用controller操作可以为module定义一个Controller，Controller定义了一个操作的具体行为。Controller通过依赖注入的服务完成各种操作，然后通过$scope服把view需要的数据传递过去。为保证隔离性，在Controller中一定不要有任何与DOM相关的代码。 定义一个controller如下：
AngularJSSample.controller(['studentController', function ($scope) {
Scope
Scope就是用来给Controller和View之间做数据传递的,Controller往scope中添加的任何数据，View都可以访问到。
AngularJSSample.controller(['studentController', function ($scope) {
$scope.students = [
{name: 'John', age: 25, gender: 'boy'},
{name: 'Joy', age: 15, gender: 'girl'},
{name: 'Mary', age: 28, gender: 'girl'},
{name: 'Sebastian', age: 10, gender: 'boy'},
{name: 'Samantha', age: 16, gender: 'girl'}
小结
AngularJS自己定义一整套完整的逻辑，其对前端代码的规范性很有帮助，另外，内置的各种Directive会极大的减少开发人员的代码量；未来AngularJS + Restful Service可能会大行其道。
对AngualarJS的槽点有2个，第一，所有逻辑知识都暴露在JavaScript中，是否会导致一些安全问题，第二，官方的文档可用性极差啊。
ningandjin
浏览: 624665 次
来自: 成都
这东东真的好用么/
http://git.oschina.net/zzq0324/ ...
gradle+maven+springboot实战课程观看地址 ...
你好，我在maven上面下载了swagger-springmv ...
博主写的不错,
思想和写的代码都挺好
我平时都是看老外的 ...谈一谈JS消息机制和事件机制的理解
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
消息/事件机制是几乎所有开发语言都有的机制，并不是deviceone的独创，在某些语言称之为消息(Event),有些地方称之为(Message). 其实原理是类似的，只不过有些实现的方式要复杂一点。我们deviceone统一就叫消息.消息基础概念还有一些初学者不太熟悉这个机制，我们先简单介绍一些基础概念，如果熟悉的人可以跳过这个部分。一个/条消息可以理解为是一个数据结构，包含以下几个基本部分：1.消息源：就是消息的来源，发出这个消息的对象2.消息名：就是消息的唯一标示3.消息数据：消息发出后附带的数据，有可能数据是空消息从种类上又可以分为2种：1.系统消息：由操作系统或deviceone系统发送出来的消息，消息的名称是固定的。2.自定义消息：由开发者自己定义，自己发送出来的消息，消息的名字是随意的，可以任意定义。举例说明：比如用户点击一个do_Button按钮，就会触发一个系统消息，包含3个部分：1.消息源：用户点中的button对象2.消息名：touch3.消息数据：这个消息没有附带数据比如用户通过do_Button按钮触发一个自定义事件，包含3个部分：1.消息源: button对象2.消息名：用户随便定义，叫aaa，bbb，ccc都可以3.消息数据：附带的数据由触发消息的时候设定发布/订阅模式发布/订阅模式是最常用的设计模式之一，是消息机制的核心，其特点就是降低耦合度，让二个独立的对象不互相依赖。简单介绍一下，熟悉的同学可以跳过。我们先从现实的一个简单例子来说明这个问题，参考下图：从这个图我们可以看出1.消费者和出版社互相不认识，消费者不需要了解他想要的杂志是具体哪家出版社出的；出版社也不需要了解具体是哪个人定了他们出版社发行的书。2.消费者和出版社必须都认识邮局。3.消费者需要告诉邮局消费者的名字地址以及想要订阅的杂志名字4.可以多个消费者订阅同一本杂志5.邮局拿到杂志后，会一一通知消费者，通知的时候同时把杂志送到消费者手里。看完上面现实例子，我们再来看抽象的描述会更清晰一点，看下图：和上面的实际例子描述一一对应：1.系统/开发者和函数对象互相不依赖，系统/开发者只管触发一个消息，并不关心谁去接受2.系统/开发者和函数对象必须能获取到消息源对象3.函数对象订阅消息的时候需要标示消息的名称和函数对象的引用4.可以多个函数对象订阅同一个消息源同一名字的消息5.消息源触发消息会一一通知所有订阅者，并把data数据传递到回调函数对象看完抽象的描述，我们最后来看实际的deviceone开发的例子，还是以do_Button为例子。1. 当用户点击一个button，触摸到的时候，系统会获取到button这个对象作为消息源，fire一个”touch”消息，任何订阅了”touch”消息的函数对象都会接收到这个消息并引起函数的执行。//获取button对象var btn_hello = ui("btn_hello");//定义函数对象function f(){//当btn_hello这个按钮接收到手指点击就会执行下面的代码deviceone.print("f 函数接收到点击触发消息")}function f(){//当btn_hello这个按钮接收到手指点击就会执行下面的代码deviceone.print("f 函数接收到点击触发消息")}//f，f订阅button的touch消息btn_hello.on("touch",f);btn_hello.on("touch",f);2. 我们可以为button对象定义2个自定义的消息”message1”和”message2”,分别有2个函数对象订阅这2个消息。但是最后要触发这个消息必须是开发者通过调用fire函数才能触发，这就是和系统消息的区别。//获取button对象var btn_hello = ui("btn_hello");//定义函数对象function f(d){//当btn_hello这个按钮接收到开发者触发的消息message就会执行下面的代码deviceone.print("f 函数接收到message消息,消息的数据是:"+d)}function f(d){//当btn_hello这个按钮接收到开发者触发的消息message就会执行下面的代码deviceone.print("f 函数接收到message消息,消息的数据是:"+d)}//f，f订阅button的touch消息btn_hello.on("message",f);btn_hello.on("message",f);//触发消息btn_hello.fire("message","data");btn_hello.fire("message","data");看到这里，你肯定会奇怪，为什么我们要在button上自定义对象？这有神马意义？其实确实没有意义也没有必要，这里只是拿button举例子，在常规的开发中，基本不会这么用。消息的使用前面讲了这么多，现在才是deviceone消息的使用。使用其实很简单，上面的例子基本说明的了系统事件和自定义事件的使用方法。有几个概念再说明一下1.deviceone的所有对象，包括UI，MM，SM对象都可以是消息源// SM对象可以是消息源var page = sm("do_Page");page.on("loaded",function()){// 这个是page对象的系统消息,这个消息不需要手动触发，系统会自动触发}page.on("message",function(d)){// 这个是page对象的自定义消息}page.fire("message","data");// MM对象可以是消息源var http = mm("do_Http");http.on("result",function()){// 这个是http对象的系统消息,这个消息不需要手动触发，接受到http服务端的反馈后会自动触发}http.on("message",function(d)){// 这个是http对象的自定义消息}http.fire("message","data");//UI对象可以是消息源var alayout = ui("alayout_id");alayout.on("touch",function()){// 这个是alayout对象的系统消息,这个消息不需要手动触发，手机点击就会触发}alayout.on("message",function(d)){// 这个是alayout对象的自定义消息}alayout.fire("message","data");2.消息源对象有作用域，所以订阅和触发的消息源必须是是一个作用域的同一个对象。这里结合数据分享和数据传递文档来理解。看以下的例子，test1.ui和test2.ui有可能在一个page作用域，也有可能不在一个作业域，只有在一个作用域fire的消息才能正确送达回调函数。判断是否一样，可以通过打印page的地址 page.getAddress().//在test.ui.js里订阅消息var page = sm("do_Page");deviceone.print(page.getAddress());page.on("message",function(d)){deviceone.print(d);}//在test.ui.js触发消息var page = sm("do_Page");deviceone.print(page.getAddress());page.fire("message","data");如果不在同一page作用域，则可以把消息订阅在2个page都能共享到的app作用域上面的代码改成：//在test.ui.js里订阅消息var app = sm("do_App");app.on("message",function(d)){deviceone.print(d);}//在test.ui.js触发消息var app = sm("do_App");app.fire("message","data");3.同样的函数对象可以重复订阅一个对象源的消息，触发消息的时候会使函数执行多次，这是初学者经常犯的错误。var page = sm("do_Page");var count = ;function f(){deviceone.print("执行次数"+(count++));}page.on("message",f);page.on("message",f);page.fire("message");看上面的例子，如果执行的话，会打印2此，因为订阅了2次，或许你会说谁会写这样的代码？实际情况肯定没有这么容易看出来执行了重复的on函数，实际情况经常是比如在点击事件里执行on函数，每点击一下按钮，就重复订阅一次。4.消息的订阅一定要在消息的触发之前，这是初学者经常犯的错误。var page = sm("do_Page");var count = ;function f(){deviceone.print("执行次数"+(count++));}page.fire("message");page.on("message",f);看上面的例子，如果执行的话，会没有效果，或许你会说谁会写这样的代码？实际情况肯定没有这么容易看出来顺序反了，实际情况经常是比如on函数执行在某一个函数的回调函数里，你无法确定回调函数啥时候执行，是否是在fire之前执行。一般碰到这种情况可以加几个deviceone.print打印一下看看是on先执行还是fire先执行。5.有订阅就有取消订阅，取消订阅是off函数，之所以很少用，是因为closePage的时候会自动把当前page作用域订阅的消息全部释放。但是如果消息订阅在app作用域，就要注意，可能需要手动去取消订阅。否则就会出现触发消息的时候会使函数执行多次的问题。var page = sm("do_Page");var count = ;function f(){deviceone.print("执行次数"+(count++));}page.on("message",f);page.fire("message");.page.off("message");page.fire("message");看上面的例子，打印只会执行一次，因为fire一次后就取消订阅了。
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
去了解一个事物的本质，才可以征服该事物。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net}