学习AngularJS之Controller之概念理解之首篇 -

Lixh1986

浏览: 1113152 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

学习AngularJS之Controller之概念理解之首篇

博客分类：

AngularJS

AnguarJS Controller ng-repeat

Controller 在 AngularJS 中是一个非常核心的概念。如何理解？

大家知道 AngularJS 是基于数据而对页面上对元素进行操作、互动的（双向绑定）。Controller 是谁的 Controller 呢？对，是页面上一个元素（作为数据对视图部分）的 Controller。页面上的元素是 Angular 的最小操作单元，是数据的视图层，是展示数据的模版，这个模版文件就要绑定一个 Controller 。

代码-模版部分
被标记了 ng-XXX 的元素，已不再是一个普通的元素，而是 angular 用来展示数据的视图层模版。
每一个模版，都要对应一个 Controller。

<head>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>

<body ng-app="myApp">

<table ng-controller="myApp-myCtrl-1" border="1">
	<tr ng-repeat="(key, value) in myObj">
		<td>Key - {{key}}</td>
		<td>Val - {{value}}</td>  
	</tr>
</table>

<div ng-controller="myApp-myCtrl-2">
	<div ng-repeat="record in records" class="item">
		{{$index}} - {{record}}
	</div>
</div>
</body>

代码：逻辑部分

var app = angular.module("myApp", []);

//This is my view controller 1 under my angular app!
app.controller("myApp-myCtrl-1", function($scope) {
  $scope.myObj = {
    "Name" : "Alfreds Futterkiste",
    "Country" : "Germany",
    "City" : "Berlin"
  }
});

//This is my view controller 2 under my angular app!
app.controller("myApp-myCtrl-2", function($scope) {
  $scope.records = [
    "Java",
    "C++",
    "Python",
    "Php",
  ]
});

完整代码：
在线测试：http://www.runoob.com/angularjs/ng-ng-repeat.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.item{
		background-color:#eeeeaa;
		margin: 8px 0;
		padding: 15px 5px;
	}
	table{
		border-collapse:collapse;
	}
	td{
		background-color:#eeccee;
		padding: 15px 20px;
	}
</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">

<table ng-controller="myApp-myCtrl-1" border="1">
	<tr ng-repeat="(key, value) in myObj">
		<td>Key - {{key}}</td>
		<td>Val - {{value}}</td>  
	</tr>
</table>

<div ng-controller="myApp-myCtrl-2">
	<div ng-repeat="record in records" class="item">
		{{$index}} - {{record}}
	</div>
</div>

<script>
var app = angular.module("myApp", []);

//This is my view controller 1 under my angular app!
app.controller("myApp-myCtrl-1", function($scope) {
  $scope.myObj = {
    "Name" : "Alfreds Futterkiste",
    "Country" : "Germany",
    "City" : "Berlin"
  }
});

//This is my view controller 2 under my angular app!
app.controller("myApp-myCtrl-2", function($scope) {
  $scope.records = [
    "Java",
    "C++",
    "Python",
    "Php",
  ]
});
	
</script>

</body>
</html>