HTML enhanced for web apps!

Easy to build SPA Single Page App!

创建丰富的单页面应用

Created by @JinWYP / Twitter/ 新浪微博

一个写代码的产品经理 Blog

Angular Girl 社区

什么是AngularJS ?


全功能的Javascript 开源 前端框架

Design by Google


Developed in 2009 by Miško Hevery

Github 项目地址

Why Angular ?

为什么选择 Angular ?

传统网站架构

后端语言PHP + JS + Html


通常是后端语言 "渲染HTML模板"


后端语言 处理页面"URL路由请求"


如 CodeIgniter MVC 的View模板

Down arrow

Angular 设计原则

Design Principles

Angular 设计原则

Design Principles Google I/O 2013 - Design Decisions in AngularJS 优酷

VS Backbone

MVC or MVR

Router / Model & Collection / View

VS Backbone

Backbone View


var Bookmark = Backbone.View.extend({
    template: _.template(…),
    render: function() {
        this.$el.html(this.template(this.model.attributes));
        return this;
    },
    events: {
        "dblclick"                : "open",
        "click .icon.doc"         : "select"
    },
    open: function() {
        window.open(this.model.get("viewer_url"));
    },
    select: function() {
        this.model.set({selected: true});
    }
});
                        

VS Ember.js


App = Ember.Application.create();

App.Person = Ember.Object.extend({
    firstName: null,
    lastName: null,

    fullName: function() {return this.get('firstName') + " " + this.get('lastName');
    }.property('firstName', 'lastName')
});

App.IndexRoute = Ember.Route.extend({
    model: function() {
    var people = [ App.Person.create({firstName: "Tom",lastName: "Dale"}),
                    App.Person.create({firstName: "Yehuda",lastName: "Katz"}) ];
    return people;
    }
});
                        

MVR or MVVM or MOVE

MOVE,即 Models(模型)、Operations(操作)、Views(视图)、Events(事件)

Unicorn

Future of web frontend?

Will MDV become a standard?

与其他库

MOVE,即 Models(模型)、Operations(操作)、Views(视图)、Events(事件)

Unicorn Will MDV become a standard?

Angular 成熟度

经过四年的发展 框架成熟度高

Stable 1.0.7 / Unstable 1.1.5

Angular 入门容易

社区活跃

Unicorn

社区活跃

Unicorn

Google feedback 项目

Unicorn

Localytics 项目

Biggie Smalls曾说过:“代码越多,问题也就越多”。

Using AngularJS at Localytics Localytics 使用 AngularJS 经验 代替Backbone 代码减一半 Unicorn

Angular's 3D

Data Binding 数据绑定

Directive 指令与自定义指令

Dependency Injection 依赖注入

Angular's MVC

Router, Modules

Views, Templates, Controller/Scope/ViewModel

Model, Factory Service

Testing

Angular's Other Feature

内置了类似jQueryLite

Validation

Filters

Angular API 1.1.5

Angular's 3D

Data Binding 数据绑定

Data Binding 数据绑定 双向绑定

Data Binding 数据绑定

    Unicorn

Angular's 3D

Directive 指令与自定义指令

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集

它使得HTML可以转变成“特定领域语言(DSL) Domain-Specific Language。

英文文档 中文文档

Angular's Directive 指令

“x-”,“data-”来让它符合html的验证规则。这里有以下可以用的指令名称例子:ng:bind, ng-bind, ng_bind, x-ng-bind , data-ng-bind

指令可以做为元素名,属性名,类名,或者注释。下面是一些等效调用myDir指令的例子:


Angular's 3D Directive 指令

Angular 表达式 expression

常用指令 : ngapp ngController ngClick ngCloak ngClass ngRepeat


  • {{item.name}}
  • {{item.name}}
  • {{item.name}}
  • {{item.name}}
  • ngClass 表达式

    1. a string of space-delimited class names, 单一样式名称
    2. an array of class names 样式名称数组
    3. a map/object of class names to boolean values. 对象,应用多个样式

    ngRepeat 表达式 循环

    1. $index – {number} – iterator offset of the repeated element (0..length-1)
    2. $first – {boolean} – true if the repeated element is first in the iterator.
    3. $last – {boolean} – true if the repeated element is last in the iterator.
    4. $middle – {boolean} – true if the repeated element is between the first and last in the iterator.
  • Demo2 Ngclass ng repeat
  • filter

    1. {{ expression | filter1 | filter2 }}
    2. orderBy
    3. filter by object

    Model Controller Scope ViewModel

    1. Model 中文文档
    2. Controller中文文档
    3. Scope
    4. View中文文档

    Demo3 ngClass ngRepeat Scope

    Angular's Module 模块

    Module 模块 中文文档

    html ng-app="myApp"

    
                                angular.module('MyApp',[]);
                            

    ngRepeat 是如何工作的?

    1. Understanding AngularJS Directives Part 1: Ng-repeat and Compile
    2. Directive isolate scope with ng-repeat scope
    3. AngulaJS directive transclude scope=false?
    4. Angularjs: 2 way binding not working in included template

    高级篇: 自定义指令 Directives

    1. 英文文档
    2. 中文文档
    3. Writing Directives - YouTube
    4. Directives - youku
    5. AngularJS Directives – Basics

    Angular world 与 非 Angular world

    1. Scopes 中文文档
    2. $watch
    3. $apply
    4. 
      var t = setTimeout( function() {
          $scope.hello++;
          console.log($scope.hello);
          $scope.$apply();
      }, 5000);
      
          //ng.$timeout 或使用angular内置封装的函数
                                  

      Demo4 $apply,$watch

    Angular's MVC 小结

    Unicorn

    Modules

    Unicorn

    创建一个Modules

    Unicorn

    在Module中创建Controller

    Unicorn

    Angular's Router 前端路由

    前端路由 与多视图 ngView 中文文档

    $location 改变URL 中文文档

    
    var demoApp = angular.module('demoapp', []);
    
    demoApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
        when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
        otherwise({redirectTo: '/phones'});
    }]);
                            

    HTML5 History API

    Angular's 3D DI 依赖注入

    Dependency Injection 依赖注入 中文文档

    使用factory 创建

    解决压缩代码变量名改变的问题

    
    var MyController = function(renamed$scope, renamedGreeter) {
    ...
    }
    MyController.$inject = ['$scope', 'greeter'];
                            

    Angular's Factory

    工场方法负责创建AngularJS中的大部分对象。比如指令,服务,过滤器。

    中文文档

    
    angualar.module('myModule', []).
    config(['depProvider', function(depProvider){
    ...
    }]).
    factory('serviceId', ['depService', function(depService) {
    ...
    }]).
    directive('directiveName', ['depService', function(depService) {
    ...
    }]).
    filter('filterName', ['depService', function(depService) {
    ...
    }]).
    run(['depService', function(depService) {
    ...
    }]);
                            

    Angular Test

    端到端测试

    中文文档

    Angular Best Practices 最佳实践

    AngularJS Best Practices (2012/12/11)

    Angular's 学习资源

    1. YouTube 视频 Misko
    2. AngularJS-Learning
    3. builtwith.angularjs.org
    4. stackoverflow.com
    5. Youku
    6. AngularJS Tutorial
    7. egghead.io
    8. AngularJS Fundamentals
    9. Angular 中文社区
    10. Angular girl

    Angular's 社区环境

      Unicorn

    Angular's 生态环境

      Unicorn

    Angular's 生态环境

    1. angular-ui
    2. angular-seed
    3. angular-seed-coffeescript
    4. grunt-angular-seed
    5. AngularJS Real Time App with Socket.IO
    6. ngmodules.org

    AngularJS 作者

    Angular FAQ

    1. IE 兼容性 英文文档 中文文档
    2. SEO yearofmoo 英文文档

    Enhanced Animation in AngularJS

    THE END

    BY JinWYP / Angulargirl.com