设为首页 加入收藏

TOP

AngularJS - 快速入门
2015-02-02 14:22:12 来源: 作者: 【 】 浏览:7
Tags:AngularJS 快速 入门

刚开始接触时总是去wiki或各种百科以了解一番。
它们会告诉我一些MVVM、双向数据绑定、依赖注入等等名词,觉得这些名词好上档次,然后我很可能就不打算用这个东西了。


AngularJS是什么?


不考虑那些名词,本篇帮助你快速了解AngularJS的基本用法。


文用的AngularJS版本为1.2.x,1.3.x中不再用本文中提到的方式声明controller。?


先从这段开始:


?


AngularJS的指令都是以ng开头,或者也可以使用data-ng开头。 AngularJS的表达式用两个大括号表示:{{expression}}
这便是AngularJS最基本的功能:数据绑定


我们可以对各种类型进行绑定并显示:


我们用controller对一个AngularJS应用进行控制。
ng-controller定义一个controller,声明所有被它包含的元素都属于这个控制器。


例如:



当然,我们应该使用更高效的组织方式。
AngularJS支持将Controller定义在其他js文件中,比如上面的例子可以改为:


?


到目前为止,定义一个Angular app都用ng-app=""的方式。
可行,但是这个app下的变量和函数都是global的,而且会造成controller污染(pollute)。
而通常,我们用module把app组织起来。 我们可以通过ng-app="名称"angular.modele()来声明一个module。
该方法有两个参数:


比如,之前的例子可以改为:



如果将app和controller放到两个文件分别定义,则:



myApp.js:


?


myAppControllers.js:


?


这个东西可以加在表达式里面,改变表达式的输出格式。
我们可以用以下Filters:


前3种可以直接用在表达式中,比如:


?


filter和orderBy通常用于数组:



当然,数据不会这样放在一个controller里。
我们可以通过$http来请求数据并进行绑定。
上面的例子可以改为:


?


希望你喜欢,并分享我的工作~带你走近AngularJS系列


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Effective Java - 接口还是抽象类 下一篇如何使用JavaScript书写递归函数

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: