你的位置:首页 > Java教程

[Java教程]angularjs 学习笔记1


第一次听到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: 'john.smith@example.org'} ];}SettingsController1.prototype.greet = function() { alert(this.name);};SettingsController1.prototype.addContact = function() { this.contacts.push({type: 'email', value: 'yourname@example.org'});};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.htmlapp/  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 的理解和说明。如有不足之处请指出。谢谢。