最近对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();
};
});
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: "" //模版路径
}
});
总结：这里主要讲了，一个angualr项目的基本目录，方便之后去创建一个项目，不会说没有思路，这里的js文件主要有，app.js、controllers.js、services.js、filters.js、directives.js，分别是基本配置、控制器、服务、过滤器、指令，在配合模版（.html）使用,实现mvc模式的设计思路，之后每一分块会继续学习，继续深入，然后记录下来，在这里先讲目录。这确实是一门很有前途的技术，会好好学习的！
更多专业前端知识，请上 【猿2048】www.mk2048.com