您的位置：首页 > Web前端 > AngularJS

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

2020-02-16 23:45 519 查看

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

 

转载于:https://www.cnblogs.com/AmusementPark/p/4275259.html

1b9aa
  • 点赞
  • 收藏
  • 分享
  • 文章举报
a12554869 发布了0 篇原创文章 · 获赞 0 · 访问量 3 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航