为了下降前端代码的数量,提升可维护性,可测试性,学习了下AngularJS,正在准备投入项目开发中。javascript
AngularJS的概念比较多,若是面向对象方面的书理解的不透的话学习起来有些费劲,它的官方有个快速入门不错,中文版以下css
http://www.ituring.com.cn/minibook/303html
但除了入门外,要真实的写项目仍是得把模块划分,依赖关系处理,组件间通讯,文件目录安排等问题解决好才能干活。前端
根据这个学习目的,写了个DEMO,地址以下java
http://onlytiancai.github.io/codesnip/angular-demo1.htmlgit
HTML代码angularjs
<!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代码github
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开发大型项目的。app