最近对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文件目录主要如下图:
![](https://images2015.cnblogs.com/blog/720690/201509/720690-20150904231029529-348350327.png)
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