AngularJS 创建一个简单可交互的控件(一)

浏览数：34 / 时间：2015年06月09日

这几天开始学习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);