AngularJS控制器，范围和视图教程示例
前面我们介绍了Angular Directives及其用法。
现在，我们将重点转移到AngularJS的模型视图控制器(MVC)部分。
在本教程中，我们将讨论Controller，View和Scope(视图模型)。
内容
- 控制器，范围和视图概念
- 指导方针
- 控制器和示波器示例
控制器，范围和视图概念
控制器是JavaScript对象，用于控制Angular应用程序的视图数据。
在上一篇文章中，我们介绍了一些Angular指令和数据绑定概念。
我们使用控制器来控制绑定到视图的数据，并且作用域充当视图和控制器之间的黏合剂。
指令ng-controller用于将应用程序控制器附加到DOM，angular将实例化一个新的控制器对象，并且新的子作用域可用于该控制器的构造函数。
可以将新的子作用域作为$scope注入到构造函数中。
范围是Angular表达式的执行上下文，它可以监视表达式并传播事件。
Scopes还提供API来监视模型和视图中的更改。
范围将视图与控制器绑定在一起，因此它不需要知道该视图，而该视图也不需要知道控制器。
指导方针
AngularJS官方文档提供了以下准则，以便在angular应用程序中使用控制器。
使用控制器来设置$scope对象的初始状态并将行为添加到该对象。
不要使用控制器来操作DOM。
它应该只包含业务逻辑。
使用数据绑定和指令进行DOM操作。不要使用控制器来格式化输入–使用Angular Form控件。
不要用于过滤输出–使用Angular过滤器。
不要使用控制器在控制器之间共享代码或者状态–使用Angular Services。
不要使用控制器来管理其他组件的生命周期。
在接下来的教程中，我们将看到诸如Angular Form控件，过滤器和服务之类的功能。
控制器和示波器示例
在本节中，我们将展示如何在Angular应用中定义控制器。
控制器和示波器的简单用法
下面的示例演示了控制器和范围的概念。
其中我们将看到控制器如何设置$scope对象的初始状态。
ʻangular-controller.html`
<!DOCTYPE html>
<html>
<head>
<title> AngularJS - Controllers and Scope</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="blogController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<br>
Blog Name : {{blogName }}
</div>
<script>
//Controller
function blogController($scope) {
$scope.firstName = "Pankaj",
$scope.lastName = "Kumar",
$scope.blogName = "theitroad"
}
</script>
</body>
</html>
您将在浏览器中看到以下输出。
应用详情：
ng-controller指令用于将Controller(在上面的示例中为blogController)附加到DOM。
新的子作用域将作为参数的参数提供给Controller的构造函数" $scope"。
控制器(blogController)设置$scope对象的初始状态。
在我们的示例中，我们通过附加诸如firstName，lastName和blogName之类的属性来设置初始状态我们使用ng-model指令将输入字段绑定到blogController属性。
向控制器添加行为
以下示例演示了如何向控制器添加行为。
在Angular中，我们通过将方法附加到$scope对象上来向范围添加行为。
在下面的示例中，我们附加了addEmployee()方法，以向控制器添加新行为。
当我们单击"添加"按钮时，新项目将被推到名称数组中。
controller-methods.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS - Controllers and Scope</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-controller="EmployeeController">
Employee Name : <input type="text" ng-model="newEmployee"
<button ng-click="addEmployee()">Add</button>
<h2>Employees</h2>
<ul>
<li ng-repeat="name in names"> {{ name }} </li>
</ul>
</div>
<script>
function EmployeeController($scope) {
$scope.names = [ "Elano Blumer","Iain Hume"];
$scope.addEmployee = function() {
$scope.names.push($scope.newEmployee);
$scope.newEmployee = "";
}
}
</script>
</body>
</html>
输入任何名称，然后单击添加按钮。
您将在下面的列表中看到添加的名称。
申请详情：
ng-controller指令用于将Controller(在上面的示例中为EmployeeController)附加到DOM。
新的子作用域将作为参数的参数提供给Controller的构造函数" $scope"。
控制器(EmployeeController)设置$scope对象的初始状态。
在我们的示例中，我们使用名称数组设置$scope的初始状态。我们使用ng-repeat指令来迭代雇员姓名数组。
我们已经附加了addEmployee()方法来向上述应用程序添加行为。
这行代码($scope.names.push($scope.newEmployee);)将在我们单击"添加"按钮时将输入字段中的新项目推送到名称数组。ng-click指令允许您指定单击元素时的自定义行为。
在外部文件中使用控制器
以下示例演示了如何在外部文件中存储和包括控制器
在示例中，我们创建了一个JavaScript文件(placeController.js)来存储应用程序中使用的控制器。
placeView.html
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
</head>
<body>
<div data-ng-controller="PlaceController">
Country:<input type="text" ng-model="countryName"
City:<input type="text" ng-model="cityName"
<button ng-click="addItem()">Add</button>
<ul>
<li ng-repeat="item in list">{{ item.country +" : "+ item.city}}</li>
</ul>
</div>
<script src="placeController.js"></script>
</body>
</html>
应用程序中使用的控制器placeController.js
placeController.js
function PlaceController($scope) {
$scope.list = [
{ country: 'San Franceco', city: 'New Delhi' },
{ country: 'France', city: 'Paris' },
{ country: 'USA', city: 'Washington DC' },
{ country: 'England', city: 'London' }
];
$scope.addItem = function () {
$scope.list.push({ country: $scope.countryName,
city: $scope.cityName });
};
}
您将在浏览器中看到以下输出。
输入国家名称和城市，然后单击添加按钮。
您将在下面显示的列表中看到添加的名称。
应用详情：
ng-controller指令用于将Controller(在上面的示例中，PlaceController存储在placeontroller.js中)附加到DOM。
一个新的子作用域将作为参数的参数提供给Controller的构造函数" $scope"。
控制器(PlaceController)设置$scope对象的初始状态。
我们使用ng-repeat指令来遍历对象列表。
我们已经附加了addItem()方法来向上述应用程序添加行为。
这行代码($scope.list.push({country：$scope.countryName，city：$scope.cityName});)将在我们单击输入字段时将输入字段中的新项目推送到对象列表中添加按钮。ng-click指令允许您指定单击元素时的自定义行为。
