标签：
这几天开始学习Angular这个MVC框架, 边看官网文档和youtube视频边做实例, 现在整理下自己的学习所得与大家分享, 也希望有Angular的大牛们来指教和探讨.
我们设想一个最基本的Web应用场景: 从服务器获取数据,通过这些数据来动态渲染我们的页面. 假设我们目前需要获取一组团队所有成员的信息并且显示, 团队成员的信息有成员名字, 年龄.
(示例的控件在页面上的截图)
首先我们需要为我们所需要渲染的页面写一个简单的模板:
创建这个控件的时候我使用的是flatui所设计的扩展bootstrap的一套css. 大家可以去这里下载免费的flatui版本: https://github.com/designmodo/Flat-UI/archive/master.zip
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/flatui/css/vendor/bootstrap.min.css"> <link rel="stylesheet" href="/flatui/css/flat-ui.min.css"> <script src="/js/angular/angular.min.js"></script> <script src="/js/mine.js"></script> </head> <body data-ng-app="zzUSRDirective" style="padding-top:40px"> <div class="container" data-ng-controller="row-ctrl"></div> </body> </html>
我们在于body处我们定义了一个标签 data-ng-app并且给他命名为"zzUSRDirective", 这个标签定义了一个angular的模型, 我将其理解为一个MVC封闭域, 我们将围绕这个data-ng-app来展开.
打开我们的js文件mine.js, 敲入以下代码:
1 (function(angular) { 2 angular.module(‘zzUSRDirective‘, []) 3 .controller(‘row-ctrl‘, [‘$scope‘, ‘$http‘, ‘$compile‘, ‘$element‘, 4 function($scope, $http, $compile, $element) { 5 $http.get(‘http://localhost:8080/users‘).success(function(json) { 6 $scope.json = json; 7 var html = 8 ‘<div data-ng-repeat="line in json" class="row">‘+ 9 ‘<div data-ng-repeat="user in line" class="col-md-3">‘+ 10 ‘<zzuserbox index="{{$parent.$index*3+$index}}" get="getbyidx"></zzuserbox>‘+ 11 ‘</div>‘+ 12 ‘</div>‘; 13 $element.append(html); 14 $compile($element.contents())($scope); 15 }); 16 $scope.getbyidx = function(idx) { 17 var outidx = Math.floor(idx/3); 18 var innidx = idx%3; 19 return $scope.json[outidx][innidx]; 20 }; 21 }]) 22 .directive(‘zzuserbox‘, function() { 23 return { 24 scope : { 25 get : ‘&‘ 26 }, 27 restrict : ‘E‘, 28 templateUrl : ‘box.html‘, 29 link : function($scope, $element, $attr) { 30 $scope.json = $scope.get()(parseInt($attr.index)); 31 $scope.amnt = $scope.json.amnt; 32 $scope.name = $scope.json.name; 33 }, 34 controller : function($scope) { 35 } 36 }; 37 }); 38 })(window.angular);
标签：
原文地址：http://www.cnblogs.com/AmusementPark/p/4275259.html
