拥抱AngularJS

文中一些地方AngularJS简称ng

简介:

  ng诞生于2009年,由Misko Hevery等创建,后被Google收购,为克服HTML在构建应用上的不足而设计。

  是一款优秀的前端JS框架,核心特性:MVVM(Model-View-ViewModel)、模块化、双向数据绑定、依赖注入。

  官网:https://angularjs.org/

  中文网:http://www.apjs.net/

入门:

  参考地址

书籍:

  用AngularJS开发下一代Web应用

   AngularJS权威教程

源码:

  GitHub

  https://code.angularjs.org/

API:

  AngularJS API

介绍: 

  模块介绍:(v1.4.0)

  • angular.js                  ng 核心
  • angular-route.js         ng 路由(参考地址
  • angular-animate.js          ng 动画(参考地址
  • angular-cookies.js          ng Cookie(参考地址
  • angular-sanitize.js         ng 安全模块(应对XSS)
  • angular-messages.js         ng 表单验证(参考地址
  • angular-resource.js         ng restful数据交互(然并卵,只是封装了一层$http,可以用来请求本地json文件)
  • angular-mocks.js            ng 单元测试工具类(参考地址
  • angular-loader.js           ng http请求loading效果(参考地址
  • angular-scenario.js         ng 单元测试用
  • angular-touch.js            ng gestoures(针对移动端,基于jQuery Mobile的touch事件。不过貌似不太好用
  • angular-aria.js             ng 富互联网应用(Accessible Rich Internet Applications,貌似没啥用)
  • angular-meesage-format.js   ng 编译相关(谨慎使用,该文件只有当闭合编译器的高级选项标识时才会编译)

控制器(controller):

  简单理解为-通过依赖注入的方式,把service、依赖关系以及其他对象串联到一起,然后通过$scope把它们关联到view上。

 

var app = angular.module('app', []);
app.controller('indexCtrl', ['$scope', 'demoService', function($scope, demoService) {
  $scope.name = demoService.getName();
}])

 

  路由控制:

var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/list', {
        	templateUrl: 'module/order/list.html', 
        	controller: 'listCtrl'
    	})
        .when('/detail/:orderid', {
        	templateUrl: 'module/order/detail.html', 
        	controller: 'detailCtrl'
    	})
        .otherwise({redirectTo: '/dashboard'});
}])

指令(directive):

  简单理解为-在特定DOM上运行的函数,指令可以扩展这个DOM的功能。

  应用场景:封装通用插件

 

var app = angular.module('app', []);
app.directive('tree', function($location) {
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            treeNodes: '='
        },
        templateUrl: './script/directive/template/treeTmpl.html',
        link: function($scope, $element, $attrs) {
          $scope.directTo = function(url) {
                if(!!url) {
                    $location.path(url);
                }
          }
        }
    }
})

 

  参考资料:

服务(service):

  简单理解为-单例对象

  三种构建方式:

    factory、service、provider

  区分:

  factory需要创建一个对象,并return这个对象。比较常用且容易理解。 

 

var app = angular.module('app', []);
app.factory('demoService', function() {
  var service = {
    getName: function() {
      var myName = 'Tom';   
      return myName;
    }
  };
  return service;
})

 

  service接收一个构造函数,不需要创建一个对象并return。跟factory的方式区别不大,源码里只是加了层封装。

 

var app = angular.module('app', []);
app.service('demoService', function() {
	this.getName: function() {
		var myName = 'Tom';
		return myName;
	}
})

 

 

  provider是创建service最底层的方法,需要在自带的$get()方法里做逻辑。跟上面两个的区别在于:可以通过config()方法配置创建service

 

var app = angular.module('app', []);
app.provider('demoService', function() {
	this.$get = function() {
	    var service = {
	    	getName: function() {
	    		var myName = 'Tom';
	    		return myName;
	      }
	    }
	    return service;
    }
})

 

  provider应用场景:

  1. 当我们需要在应用开始前对service进行配置的时候,eg:我们需要配置services在不同的部署环境里(开发、测试、生产),使用不同的后端接口处理时。
  2. 当我们打算发布开源时。

  参考资料:AngularJS中factory,service,provider的区别 

过滤器(filter):

  用于处理数据的格式化(format),eg:日期格式化、数字精度处理、字符串截取、对象排序等。

 

var app = angular.module('app', []);
app.filter('sortFilter', function() {
    return function(type) {
        if(type.toUpperCase() == 'ASC') {
            return 'DESC';
        } else {
            return 'ASC';
        }
    }
})

 

  参考资料:AngularJS filter详解

其他资料:

  Angular学习笔记

  AngularJS表单基础

  何时应该使用Directive、Controller、Service?

  AngularJS+RequireJS

  AngularJS与RequireJS集成

  玩转AngularJS的promise

实战总结:

  AngularJS实战总结

  AngularJS中的一些坑

  AngularJS开发一些经验总结  

深入:

  AngularJS数据双向绑定揭秘

  理解AngularJS的依赖注入

总结:

  初识ng时,被它的依赖注入所迷惑,又被它的双向数据绑定深深吸引,颠覆了以往用jQuery做项目时的思想。

  仅记得做Java项目时,spring框架有一套依赖注入的模式。前端框架中引入依赖注入的思想,不得不佩服ng作者的脑洞。

  后端出生的FE,难以抗拒地喜欢上了这个JS框架,虽然它被很多人质疑(学习成本高,太臃肿etc)。

  相信会有更多的FE engineer爱上它。

PS:

  文中若有不妥之处,请留言or私信告知,不甚感激。

      

 

posted @ 2015-07-18 06:04  tww316  阅读(1933)  评论(4编辑  收藏  举报