AngularJS读书笔记-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文件目录主要要下图:

 

AngularJS 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(){…}),这样的话那么我们指令、服务、过滤器都需要写于跟一个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模式之计划思路,之后每一样分开块会连续读书,继续深入,然后记录下来,在此间先谈目录。这真是如出一辙派系死有前景的技巧,会好好学习的! 

 

相关文章