拥抱AngularJS

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应用场景：

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

　　参考资料：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私信告知，不甚感激。