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: ‘[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 的理解和说明。如有不足之处请指出。谢谢。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。