学习笔记－AngularJs （一）

最近对AngularJs产生了浓厚的学习兴趣，于是便搜罗所有资料，开始学习起来，也希望把学习过程记录下来。

首先学习之前，需要对AngularJs进行个大概的了解：

AngularJS[1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

使用双大括号{{}}语法进行数据绑定；

使用DOM控制结构来实现迭代或者隐藏DOM片段；

支持表单和表单的验证；

能将逻辑代码关联到相关的DOM元素上；

能将HTML分组成可重用的组件。

AngularJS主要考虑的是构建CRUD应用，不适合游戏，图形界面编辑器，这种DOM操作很频繁也很复杂的应用。

就不写hello world的程序例子，直接先展现一个项目目录，这样对一个项目的构建才有所眉目，不至于无从下手，觉得angular.js官方给的phonecat项目是值得学习的，js文件目录主要如下图：

 

 

js文件目录：

 

一、app.js  项目的配置文件，路由的配置，模块的依赖可以写在这里。demo：

 

var phonecatApp = angular.module('phonecatApp', [  'ngRoute',  'phonecatAnimations',
  'phonecatControllers',  'phonecatFilters',  'phonecatServices','phonecatDirectives']); 

//路由
phonecatApp.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'
});
}]);

 

 

//使用angular.moudle('phonecatApp',[...])进行模块化，phonecatApp 就是ng－app的值，ng－app指的是从拥有该指令的html标签开始，将整个控制权交给angular.js去管理，［...］是对模块的依赖，通俗地讲，就比如［］里面的 'phonecatControllers'，那么之后在controller.js（后面有讲）就可以直接

 

var phonecatControllers = angular.module('phonecatControllers', []); //'phonecatControllers'此处在app.js有进行模块依赖了，所以这里就这样写
phonecatControllers.controller("控制器名",function($scope){...})

 

以往的套路是这样的，

var phonecatApp = angular.moudle("phonecatApp",[]);

然后phonecatApp.controller("控制器名",function(){...})，这样的话那么我们指令、服务、过滤器都需要写在同一个js文件。当然也是可以没有错的，但是把所有js代码写在同一个js文件里面，太臃肿了，管理起来也难！

 

路由的设置也在这里写，路由的知识以后再详细讲，这里只是讲整个项目的目录。

 

二、controller.js  项目的控制器文件，所有控制器写在这里。demo：

var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller("控制器名",['$scope' ,'$http',function($scope,$http){...}]);

 

三、services.js  项目的服务文件，根据angualr的依赖注入机制，可以自己写服务，然后在写控制器代码时传入，如：phonecatControllers.controller("控制器名",['$scope' ,'myservice',function($scope,myservice){...}]); myservice是自定义的服务，这样就可以注入，在不同控制器调用同个业务（引入$http等来异步获取数据，因为不同控制器操作的源是一样的，所以可以封装成一个服务供调用），可以使用自定义服务来进行封装，供不同控制器注入调用，尽量不要使用$命名，以免冲突出现错误。demo：

var phonecatServices = angular.module('phonecatServices', [...]); //同上所述，［...］为依赖

phonecatServices.factory('Phone', function(){

　　return ['1882345555','123453222'];

});

编写服务js，分别有factory、provider、service方法，这里使用factory，这样的话在controller.js写控制器的时候，就可以注入使用了，上面有阐述了。

四、filters.js  项目过滤器文件，看过大概看了一下angular.js内置的一些过滤器（如date、curreny等，因为是初学，所有只是大概看了一下，之后会继续学习深入的），那往往是不够用的，往往我们需要自己自定义一些过滤器，这样的话我们就可以在我们的模板文件（.html）中引入了，如<input ng-model='xxx' type="text" onlyNum />或是<span>{{XxXX | touuper }}</span>,onlyNum（限制只能输入数字）、touuper（转换成大写字母）就是我们自定义的过滤器。demo：

var phonecatFilter = angular.module('phonecatFilters', []); //同上所述，［...］为依赖
phonecatFilter.filter('touuper', function() {
   return function(input) {
       return input.toUpperCase();
   };
});

五、directives.js 项目的指令文件，这里写的是项目中，我们自己自定义的标签，制定的标签可以引入到模板文件里面使用，其代表含义，我们在directives.js中去定义，这个也是angualr.js比较有特点的功能，原本的html标签已经很丰富的了，但是这样的自定义标签可以使htmldom结构中更能自定义话，ng-*就是指令，可以去打开源码去看，它们都会被编译我们熟悉的属性、html标签，而指令有着四种形式AEMC,分别是attrs、element、注释、class，demo：

angular.module('phonecatDirectives', []).directive("hello", function() {
return {

scope: {} ,//是否具有独立作用域
restrict: 'AEMC',   //定义类型
template: '<div>Hi everyone!</div>',  //模板
replace: true  //是否替换原来的节点

link: function(scope,element,attrs,[controller]){　

//定义指令的行为，如果不需要则不需引入

}

compile:function(){

//编译指令时的函数

}

templateUrl: ""  //模版路径
}
});

http://t.cn/RUbL4rP

总结：这里主要讲了，一个angualr项目的基本目录，方便之后去创建一个项目，不会说没有思路，这里的js文件主要有，app.js、controllers.js、services.js、filters.js、directives.js，分别是基本配置、控制器、服务、过滤器、指令，在配合模版（.html）使用,实现mvc模式的设计思路，之后每一分块会继续学习，继续深入，然后记录下来，在这里先讲目录。这确实是一门很有前途的技术，会好好学习的！