第一次听到angularjs 是在和朋友的一次聊天当中。当时我们讨论的话题是目前流行的js框架。因为朋友是做前端的他偶然说起angularjs问我听过没。当然也不懂是干什么的。朋友说就是用来绑定数据的。我的第一感觉就是那跟knockout 差不多嘛。也就没有去深入了解过。直到在一次项目中遇到页面逻辑非常复杂的情况。那时的页面非常复杂而且逻辑很多。写起来逻辑和层次很混乱。当时我就在想有没有一个前段的框架能像后端的MVC一样进行业务逻辑的分层呢？
于是抱着这个疑问去google上搜索。于是乎发现了angular 。我说这不是之前谈到过的那个框架吗？深入了解发现这他么太NB了。一看居然是google出品。瞬间觉得这是个神器 啊。简直就是为后端开发人员而生的前端js框架。 废话也不多说了直接上代码。如果你使用过类似knockout的js框架的话。一眼就能看懂下面代码的意思。
先是直接引用js
//这里写贴出来一个最简单的angular 应用的结构<html ng-app>//这里有个ng-app 你先不用知道这是干什么的。先理解为作用域
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
Hello {{‘World‘}}!
</body>
</html>
//双引号是angular的模板语法。可以在任何地方插入数据
下面我说下angular的层次结构 它分为"控制器(controller)","行为(behavior)","视图(view)","服务(services)","模型(model)"，到这我相信做过后端开发的肯定秒懂。这就是MVC嘛。对这就是MVC 跟我们开发后端程序的思想是一致的。
现在我们继续往下说先说最核心的东西控制器 把上面的代码进行改造如下
<body ng-app="controllerAsExample">
<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">
Name: <input type="text" ng-model="settings.name"/>
[ <a href="" ng-click="settings.greet()">greet</a> ]<br/>
Contact:
<ul>
<li ng-repeat="contact in settings.contacts">
<select ng-model="contact.type">
<option>phone</option>
<option>email</option>
</select>
<input type="text" ng-model="contact.value"/>
[ <a href="" ng-click="settings.clearContact(contact)">clear</a>
| <a href="" ng-click="settings.removeContact(contact)">X</a> ]
</li>
<li>[ <a href="" ng-click="settings.addContact()">add</a> ]</li>
</ul>
</div>
angular.module(‘controllerAsExample‘, [])
.controller(‘SettingsController1‘, SettingsController1);
function SettingsController1() {
this.name = "John Smith";
this.contacts = [
{type: ‘phone‘, value: ‘408 555 1212‘},
{type: ‘email‘, value: ‘[email protected]‘} ];
}
SettingsController1.prototype.greet = function() {
alert(this.name);
};
SettingsController1.prototype.addContact = function() {
this.contacts.push({type: ‘email‘, value: ‘[email protected]‘});
};
SettingsController1.prototype.removeContact = function(contactToRemove) {
var index = this.contacts.indexOf(contactToRemove);
this.contacts.splice(index, 1);
};
SettingsController1.prototype.clearContact = function(contact) {
contact.type = ‘phone‘;
contact.value = ‘‘;
};
在上面的代码中我们创建了一个模块,模块名字叫做"controllerAsExample" 这个模块的作用是通过"依赖注入的"方式调用这个控制器。而 控制器的作用范围是通过。“行为”在dom元素上打上“ng-controller” 来指定的。 在控制器内部我们可以自定义方法和模型。模型是用来存储数据的目前可以这样去理解。而方法就是类似于MVC的action来理解。action通过调用“服务”来获取数据填充到“模型”。 模型通过双向绑定的方式展示页面。页面的效果通过“行为来控制”，大概就是这么一个流程。
关于angular的分层结构一般是这样的。
templates/
_login.html
_feed.html
app/
app.js
controllers/
LoginController.js
FeedController.js
directives/
FeedEntryDirective.js
services/
LoginService.js
FeedService.js
filters/
CapatalizeFilter.js
但是我个人建议的结构是按照模块进行分层
app/
app.js
Feed/
_feed.html
FeedController.js
FeedEntryDirective.js
FeedService.js
Login/
_login.html
LoginController.js
LoginService.js
Shared/
CapatalizeFilter.js
在上面的介绍和说明中只是。大概的介绍了下angularjs 的大概结构和一些基本的语法。后期我会继续按每一个部分进行说明。比如控制器，服务等。以上就是我个人对angularjs 的理解和说明。如有不足之处请指出。谢谢。