蛙蛙推荐:AngularJS学习笔记
2013-08-07 19:55
507 查看
为了降低前端代码的数量,提高可维护性,可测试性,学习了下AngularJS,正在准备投入项目开发中。
AngularJS的概念比较多,如果面向对象方面的书理解的不透的话学习起来有些费劲,它的官方有个快速入门不错,中文版如下
http://www.ituring.com.cn/minibook/303
但除了入门外,要真实的写项目还是得把模块划分,依赖关系处理,组件间通信,文件目录安排等问题解决好才能干活。
根据这个学习目的,写了个DEMO,地址如下
http://onlytiancai.github.io/codesnip/angular-demo1.html
页面初始化时有3个苹果,3个桔子,用户可以在输入框里重新输入桔子和苹果的数量,界面会有相应的变化
定义了两个模块
common是通用模块,
包含一个commonErrorMsg的directive用来显示全局的错误信息, 通过监听common.showerror事件来获取信息,并让字体显示为红色
myApp是整个单页面应用的模块,
包含inputCtrl, statusCtrl两个controller
包含fruits, orange, apple三个directive
包含range的filter
包含fruitsService的service
总体依赖关系如下
myApp依赖common
fruits, inputCtrl, statusCtrl都依赖fruitsService
inputCtrl通过事件隐含依赖common
总体来说上层module依赖底层module,上层controller依赖底层service
fruits是一个自定义的directive,用来显示所有水果
transclude=True表示它的子元素也受它管理,比如里面的时苹果和桔子
该directive要和inputCtrl进行通信,以便动态更改水果的数量, 所以它和inputCtrl共同依赖fruitsService,并通过fruitsService的事件进行通信。
事件基本是全局的,所以定义事件时尽量有个命名空间, 如common.showerror, fruitsService.updated
orange和apple是两个很普通的directive,其中apple还掩饰了directive里如何处理自身的UI事件
statusCtrl就监听fruitsService.updated事件,并更新自己的状态
inputCtrl里watch自身UI里的两个ng-model,适时调用fruitsService的相关方法
如果界面输入太大的数字,会向common.showerror发送消息,以在界面上提示给用户 这里没有用ng-form自带的验证就是为了演示模块间如何通信
range的filter是弥补ng-repeat的不足,让它支持类似 x in range(10)的形式
fruitsService纯粹是为了directive之间或controller之间通信和共享数据所设计
HTML代码
js代码
下面这篇帖子也很好,关于如何用AngularJS开发大型项目的。
如何组织大型JavaScript应用中的代码?
AngularJS的概念比较多,如果面向对象方面的书理解的不透的话学习起来有些费劲,它的官方有个快速入门不错,中文版如下
http://www.ituring.com.cn/minibook/303
但除了入门外,要真实的写项目还是得把模块划分,依赖关系处理,组件间通信,文件目录安排等问题解决好才能干活。
根据这个学习目的,写了个DEMO,地址如下
http://onlytiancai.github.io/codesnip/angular-demo1.html
页面初始化时有3个苹果,3个桔子,用户可以在输入框里重新输入桔子和苹果的数量,界面会有相应的变化
定义了两个模块
common是通用模块,
包含一个commonErrorMsg的directive用来显示全局的错误信息, 通过监听common.showerror事件来获取信息,并让字体显示为红色
myApp是整个单页面应用的模块,
包含inputCtrl, statusCtrl两个controller
包含fruits, orange, apple三个directive
包含range的filter
包含fruitsService的service
总体依赖关系如下
myApp依赖common
fruits, inputCtrl, statusCtrl都依赖fruitsService
inputCtrl通过事件隐含依赖common
总体来说上层module依赖底层module,上层controller依赖底层service
fruits是一个自定义的directive,用来显示所有水果
transclude=True表示它的子元素也受它管理,比如里面的时苹果和桔子
该directive要和inputCtrl进行通信,以便动态更改水果的数量, 所以它和inputCtrl共同依赖fruitsService,并通过fruitsService的事件进行通信。
事件基本是全局的,所以定义事件时尽量有个命名空间, 如common.showerror, fruitsService.updated
orange和apple是两个很普通的directive,其中apple还掩饰了directive里如何处理自身的UI事件
statusCtrl就监听fruitsService.updated事件,并更新自己的状态
inputCtrl里watch自身UI里的两个ng-model,适时调用fruitsService的相关方法
如果界面输入太大的数字,会向common.showerror发送消息,以在界面上提示给用户 这里没有用ng-form自带的验证就是为了演示模块间如何通信
range的filter是弥补ng-repeat的不足,让它支持类似 x in range(10)的形式
fruitsService纯粹是为了directive之间或controller之间通信和共享数据所设计
HTML代码
<!doctype html> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.js"></script> <script src="angular-demo1.js" charset="utf-8"></script> <title>AngularJS Demo</title> </head> <body> <p common:error_msg></p> <p ng-controller="statusCtrl">一共有{{apple_count}}个苹果,{{orange_count}}个桔子。</p> <fruits> <apple ng-repeat="n in [] | range:apple_count"></apple> <orange ng-repeat="n in [] | range:orange_count"></orange> </fruits> <p ng-controller="inputCtrl">请输入 <input type="text" ng-model="apple_count" />个苹果, <input type="text" ng-model="orange_count" />个桔子 </p> </body> </html>
js代码
angular.module('common', []); angular.module('common').directive('commonErrorMsg', function(){ return { restrict: "A", controller: function ($scope, $element, $attrs) { $element.css('color', 'red'); $scope.$on('common.showerror', function (ev, msg) { $element.html(msg); }); } } }); var myApp = angular.module('myApp', ['common']); myApp.directive('fruits', function(fruitsService) { return { restrict: "E", transclude: true, replace: true, template: '<ul ng-transclude></ul>', controller: function ($scope, $element, $attrs) { $scope.$on('fruitsService.updated', function () { $scope.apple_count = fruitsService.apple_count; $scope.orange_count = fruitsService.orange_count; }); } } }) .directive('orange', function() { return { restrict: "E", template: '<li>桔子</li>' } }) .directive('apple', function() { return { restrict: "E", template: '<li><a ng-click="show()" href="#">苹果</a></li>', link: function(scope, element, attrs) { scope.show = function(){ alert('我是一个苹果'); }; } } }) .controller('statusCtrl', function($scope, fruitsService) { $scope.$on('fruitsService.updated', function () { $scope.apple_count = fruitsService.apple_count; $scope.orange_count = fruitsService.orange_count; }); }) .controller('inputCtrl', function($scope, fruitsService, $rootScope) { $scope.$watch('apple_count', function (newVal, oldVal, $scope) { if (newVal > 10){ $rootScope.$emit('common.showerror', '苹果数量太多了'); }else{ fruitsService.set_apple_count(newVal); } }, true); $scope.$watch('orange_count', function (newVal, oldVal, $scope) { if (newVal > 10){ $rootScope.$emit('common.showerror', '桔子数量太多了'); }else{ fruitsService.set_orange_count(newVal); } }, true); fruitsService.set_apple_count(3); fruitsService.set_orange_count(2); }) .filter('range', function() { return function(input, total) { total = parseInt(total); for (var i=0; i<total; i++) input.push(i); return input; }; }) .service('fruitsService', function ($rootScope) { this.set_apple_count = function (apple_count) { this.apple_count = apple_count; $rootScope.$broadcast('fruitsService.updated'); }; this.set_orange_count = function (orange_count) { this.orange_count = orange_count; $rootScope.$broadcast('fruitsService.updated'); }; });
下面这篇帖子也很好,关于如何用AngularJS开发大型项目的。
如何组织大型JavaScript应用中的代码?
相关文章推荐
- 蛙蛙推荐:ASP.NET MVC学习笔记
- 蛙蛙推荐:ASP.NET MVC学习笔记
- [蛙蛙推荐]SICP第一章学习笔记-编程入门
- 推荐功能学习笔记(二)PCA
- python学习笔记2 学习网站博客推荐
- angularjs学习笔记-正确的使用控制器
- AngularJS学习笔记
- AngularJS学习笔记2——AngularJS的初始化
- AngularJs学习笔记--concepts(概念)
- AngularJS学习笔记之基本指令(init、repeat)
- LensKit<开源推荐系统框架Java>学习笔记
- 推荐系统学习笔记之四 Factorization Machines 因子分解机 + Field-aware Factorization Machine(FFM) 场感知分解机
- AngularJS学习笔记
- AngularJs学习笔记--Forms
- cocos2d-x学习笔记06:如何将win32移植到android 推荐
- AngularJs学习笔记--Scope
- 百思学习笔记13-推荐关注左侧
- angularjs学习笔记--作用域
- AngularJS学习笔记(四)内置指令
- AngularJs学习笔记一