angularjs 学习笔记1

浏览数：22 / 时间：2015年06月09日

第一次听到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 的理解和说明。如有不足之处请指出。谢谢。

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

angularjs 学习笔记1