分享人：左威威

GitHub: https://github.com/wewoor

Blog: http://imziv.com/

QQ: 191879617

Email: wewoor@foxmail.com

初识AngularJS

AngularJS的初始版本起于2009年，由Google团队维护。

AngularJS是一种采用MVC架构，拥有数据双向绑定, 客户端模板, 以及依赖注入等特性的的Web应用开发框架,典型的是擅长单页模式的应用(SPA)开发。Angular坚信在构建UI和应用组件时，声明式编程比命令式编程更适合。而在表达业务逻辑方面，则是命令式编程更符合。

核心概念 

  • 客户端模板（Client-Side Template)
  • MVC应用架构（Model View Controller)
  • 数据双向绑定 (Data Binding)
  • 依赖注入 （Denpendency Injection)
  • 指令 (Directives)
  • 视图和路由 (Views and Routes)
  • 表达式 (Expression)
  • 过滤器 (Filters)
  • 表单 (Forms)

       ...等等

看看实例

  • 数据绑定 (data binding)
  • 指令(directive)
  • 视图和路由（view&route)
  • 表单（form)操作

测试&自动化构建

  • Yeoman generator for AngularJS (Angular项目自动生成工具)
  • Karma（web 服务器)
  • gulp（构建工具）
  • css, html, js , 图片 等gulp打包合并插件
  • express 或者 java servlet等Web server.

构建开发流程

AngularJS & jQuery

很显然，Angular和jQuery已经是完全两种不同理念上的编程框架。Angular是面向模型（Model）的框架，而jQuery从某种程度上来讲，只是一种面向Dom编程的方法库而已，还到不到框架的层次。

Angular For IE

AngularJS 在 1.2 之后的版本不再支持 Internet Explorer 6 和 7. 在 1.3 之后的版本停止对 Internet Explorer 8 的支持. AngularJS 1.2 将会继续支持IE8, 但是核心团队不会计划花费更多的时间在1.2版本上面出现的任何问题。更多说明

选择AngularJS的理由

  • DOM与应用逻辑代码的解耦
  • 客户端与服务端编程的解耦
  • 清晰的Web应用开发架构
  • 声明式的UI编程
  • 强大的数据绑定
  • 高效，便捷的Web应用构建
  • 完善的测试，自动化构建工具
  • 丰富的教程和文档
  • 活跃的社区和强大的维护团队
 

相关资料

问与答（Q&A）

END

数据绑定（data binding)

传统模板系统中的数据绑定

Angular当中的数据绑定

图片引自https://docs.angularjs.org/guide/databinding

指令（directive)

Angular中的指令指的是在DOM元素上的标记(例如像attribute, element name, comment, css class)。而透过这些指令，AngularJS会利用HTML compiler ($compile) 去附加一些特定的行为到当前的Dom元素。例如：

<my-select></my-select> // element 形式
<span ng-bind="user.name"></span> // attribute
<button ng-click="confirm()"></button> // attribute
<span ng-class="expression"/></span> // css class

过滤器（filter)

  • currency
  • date
  • filter
  • json
  • limitTo
  • lowercase
  • number
  • orderBy
  • uppercase
  • 自定义
// API docs: https://docs.angularjs.org/api/ng/filter
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss'}}</span><br>
<span id="currency-custom">{{amount | currency:"RMB ￥"}}</span>

https://docs.angularjs.org/api/ng/filter

声明式

<nav></nav>

命令式

<nav>
      <ul>
        <li>首页</li>
        <li>关于</li>
      </ul>
</nav>
var nav = document.createElement('div'),
    panel = document.createElement('ul');

for (var i = 0; i < 2; i++ ) {
    var text = document.createElement('li');
    panel.appendChild(text);
}

nav.appendChild(panel);

document.body.appendChild(nav);

Angularjs

By Ziv 小威

Made with Slides.com

Angularjs

  • 1,024

More from Ziv 小威