学习笔记-AngularJs (一)

近来对AngularJs暴发了深厚的学习兴趣,于是便搜罗全体材料,开首上学起来,也愿意把学习进程记录下来。

第贰学习以前,要求对AngularJs进行个大概的了然:

AngularJS[1]  诞生于二〇〇九年,由Misko Hevery
等人开创,后为谷歌所收购。是一款不错的前端JS框架,已经被用于谷歌的多款产品中间。AngularJS有着许多特色,最为大旨的是:MVVM、模块化、自动化双向数据绑定、语义化标签、重视注入等等。

AngularJS使用了不相同的主意,它尝试去补足HTML自身在创设利用方面的通病。AngularJS通过行使大家誉为标识符(directives)的协会,让浏览器可以辨识新的语法。例如:

利用双大括号{{}}语法进行多少绑定;

动用DOM控制结构来促成迭代恐怕隐藏DOM片段;

帮衬表单和表单的证实;

能将逻辑代码关联到有关的DOM成分上;

能将HTML分结合可选取的组件。

AngularJS主要考虑的是营造CRUD应用,不切合游戏,图形界面编辑器,那种DOM操作很频仍也很复杂的接纳。

就不写hello
world的先后例子,直接先显示三个体系目录,那样对多个品类的营造才有所眉目,不至于无从入手,觉得angular.js官方给的phonecat项目是值得学习的,js文件目录主要如下图:

 

图片 1

 

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(){…}),那样的话那么大家指令、服务、过滤器都必要写在同3个js文件。当然也是足以没有错的,不过把装有js代码写在同1个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方式的筹划思路,之后每一分块会持续求学,继续深远,然后记录下来,在此地先讲目录。那实在是一门很有前景的技术,会好好学习的! 

 

相关文章