标签:
最近对AngularJs产生了浓厚的学习兴趣,于是便搜罗所有资料,开始学习起来,也希望把学习过程记录下来。
首先学习之前,需要对AngularJs进行个大概的了解:
AngularJS[1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
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‘ }); }]);
var phonecatControllers = angular.module(‘phonecatControllers‘, []); //‘phonecatControllers‘此处在app.js有进行模块依赖了,所以这里就这样写 phonecatControllers.controller("控制器名",function($scope){...})
var phonecatControllers = angular.module(‘phonecatControllers‘, []); phonecatControllers.controller("控制器名",[‘$scope‘ ,‘$http‘,function($scope,$http){...}]);
var phonecatServices = angular.module(‘phonecatServices‘, [...]); //同上所述,[...]为依赖 phonecatServices.factory(‘Phone‘, function(){ return [‘1882345555‘,‘123453222‘]; });
编写服务js,分别有factory、provider、service方法,这里使用factory,这样的话在controller.js写控制器的时候,就可以注入使用了,上面有阐述了。
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: "" //模版路径 } });
总结:这里主要讲了,一个angualr项目的基本目录,方便之后去创建一个项目,不会说没有思路,这里的js文件主要有,app.js、controllers.js、services.js、filters.js、directives.js,分别是基本配置、控制器、服务、过滤器、指令,在配合模版(.html)使用,实现mvc模式的设计思路,之后每一分块会继续学习,继续深入,然后记录下来,在这里先讲目录。这确实是一门很有前途的技术,会好好学习的!
标签:
原文地址:http://www.cnblogs.com/wuxiaobin/p/4782443.html