实现视图示例_AngularJS控制器，范围和视图教程示例

实现视图示例

Earlier we looked at Angular Directives and its usage. Now we will shift our focus to the Model View Controller (MVC) part of AngularJS. We will discuss about the Controller, View and the Scope (view model) in this tutorial.

前面我们介绍了Angular Directives及其用法。现在，我们将重点转移到AngularJS的模型视图控制器（MVC）部分。在本教程中，我们将讨论Controller，View和Scope（视图模型）。

内容 (Contents)

Controller, Scope and View Concepts 控制器，范围和视图概念
Guidelines指导方针
Controller and Scope Example控制器和示波器示例

控制器，范围和视图概念 (Controller, Scope and View Concepts)

Controllers are JavaScript objects that controls the view data of angular applications. In the previous post, we looked at some of the Angular directives and the data binding concepts. We use controllers to control the data that are bound to the View and Scope acts as glue between the View and Controller.

控制器是JavaScript对象，用于控制角度应用程序的视图数据。在上一篇文章中，我们介绍了一些Angular指令和数据绑定概念。我们使用控制器来控制绑定到View的数据，并且Scope充当View和Controller之间的粘合剂 。

The directive ng-controller is used to attach the application controller to the DOM and angular will instantiate a new controller object and a new child scope will be available to the constructor of the controller. The new child scope can be injected into constructor as $scope.

指令ng-controller用于将应用程序控制器附加到DOM，而angular将实例化一个新的控制器对象，并且新的子作用域可用于该控制器的构造函数。新的子作用域可以作为$scope.注入到构造函数中$scope.

Scope is an execution context for the angular expressions and it can watch expressions and propagate events. Scopes also provides APIs to watch the changes in the model and view. Scope ties the view to the controller so that it does not need to know the view and the view does not need to know about the controller.

范围是角度表达式的执行上下文，它可以监视表达式并传播事件。 Scopes还提供API来监视模型和视图中的更改。范围将视图与控制器绑定在一起，因此它不需要知道该视图并且该视图也不需要知道控制器。

指导方针 (Guidelines)

AngularJS official documentation provides the following guidelines to use the controllers in the angular applications.

AngularJS官方文档提供了以下准则，以便在angular应用程序中使用控制器。

Use controllers to set up the initial state of the $scope object and add behavior to that object.使用控制器来设置$ scope对象的初始状态并将行为添加到该对象。
Do not use controllers to manipulate DOM. It should contain only business logic. Use Data Binding and Directives for DOM manipulation.不要使用控制器来操作DOM。它应仅包含业务逻辑。使用数据绑定和指令进行DOM操作。
Do not use controllers to format inputs – Use Angular Form controls.不要使用控制器来格式化输入–使用Angular Form控件。
Do not use to filter output – Use Angular Filters.请勿用于过滤输出–使用角度过滤器。
Do not use controllers to share code or state across controllers – Use Angular Services.不要使用控制器在控制器之间共享代码或状态–使用Angular Services。
Do not manage the life cycle of other components using controllers.不要使用控制器来管理其他组件的生命周期。

We will see features like Angular Form controls, Filters and Services in the upcoming tutorials.

在接下来的教程中，我们将看到诸如Angular Form控件 ， 过滤器和服务之类的功能。

控制器和示波器示例 (Controller and Scope Examples)

In this section, we will show how to define controllers in your angular applications.

在本节中，我们将展示如何在角度应用中定义控制器。

控制器和示波器的简单用法 (Simple Usage of Controller and Scope)

The following example demonstrates the Controller and Scope concept. Here, we will see how controllers sets the initial state of a $scope object.

下面的示例演示了控制器和范围的概念。在这里，我们将看到控制器如何设置$ 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 = "JournalDev"
}</script></body>
</html>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

演示地址

Application Details:

申请详情：

The ng-controller directive is used to attach the the Controller ( blogController, in the above example) to the DOM.ng-controller指令用于将Controller （在上面的示例中为blogController）附加到DOM。
A new child scope will be available as a parameter to the to the Controller’s constructor function as $scope.一个新的子作用域将作为$scope.的参数提供给Controller的构造函数$scope.
The Controller (blogController) set up the initial state of the $scope object. In our example, we set the initial state by attaching properties like firstName, lastName and blogName Controller（ blogController ）设置$scope对象的初始状态。在我们的示例中，我们通过附加诸如firstName ， lastName和blogName之类的属性来设置初始状态
We use ng-model directive to bind the input fields to the blogController properties.我们使用ng-model指令将输入字段绑定到blogController属性。

向控制器添加行为 (Adding behavior to Controller)

The following example demonstrates how to add behaviour to controllers. In Angular, we add behavior to the scope by attaching methods to the $scope object.

以下示例演示了如何向控制器添加行为。在Angular中，我们通过将方法附加到$scope对象来向范围添加行为。

In the following example we attach the addEmployee() method to add a new behaviour to the controller. A new item will be pushed to the array of names when we click on the Add button.

在下面的示例中，我们附加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>

Enter any name and click on add button. You will see the added names in the list below.

输入任何名称，然后单击添加按钮。您将在下面的列表中看到添加的名称。

演示地址

Application Details:

申请详情：

The ng-controller directive is used to attach the the Controller ( EmployeeController, in the above example) to the DOM.ng-controller指令用于将Controller （在上面的示例中为EmployeeController）附加到DOM。
A new child scope will be available as a parameter to the to the Controller’s constructor function as $scope.一个新的子作用域将作为$scope.的参数提供给Controller的构造函数$scope.
The Controller (EmployeeController) set up the initial state of the $scope object. In our example, we set the initial state of the $scope with array of names.控制器（ EmployeeController ）设置$scope对象的初始状态。在我们的示例中，我们使用names数组设置$ scope的初始状态。
We use ng-repeat directive to iterate over the employee names array.我们使用ng-repeat指令迭代雇员姓名数组。
We have attached addEmployee() method to add a behaviour to the above application. This line of code ($scope.names.push($scope.newEmployee);) will push new items in the input field to the names array when we click on the Add button.我们已经附加了addEmployee（）方法来向上述应用程序添加行为。这行代码（ $scope.names.push($scope.newEmployee); ）将在我们单击“ 添加”按钮时将输入字段中的新项目推送到名称数组。
The ng-click directive allows you to specify custom behavior when an element is clicked.ng-click指令允许您指定单击元素时的自定义行为。

在外部文件中使用控制器 (Using Controllers in External File)

The following example demonstrates how to store and include controllers in external files

以下示例演示了如何在外部文件中存储和包含控制器

In the example, we have created a JavaScript file ( placeController.js ) to store the controller used in the application.

在示例中，我们创建了一个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>

The controller used in the application, placeController.js

应用程序中使用的控制器placeController.js

placeController.js

function PlaceController($scope) {$scope.list = [{ country: 'India',   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 });};
}

You will see the following output in your browser. Enter country name and city and then click on add button. You will see the added names in the list shown below.

您将在浏览器中看到以下输出。输入国家名称和城市，然后单击添加按钮。您将在下面显示的列表中看到添加的名称。

演示地址

Application Details:

申请详情：

The ng-controller directive is used to attach the the Controller ( PlaceController stored in placeontroller.js, in the above example) to the DOM.ng-controller指令用于将Controller （在上面的示例中， PlaceController存储在placeontroller.js中）附加到DOM。
A new child scope will be available as a parameter to the to the Controller’s constructor function as $scope.一个新的子作用域将作为$scope.的参数提供给Controller的构造函数$scope.
The Controller (PlaceController) set up the initial state of the $scope object.Controller（ PlaceController ）设置$scope对象的初始状态。
We use ng-repeat directive to iterate over the object list.我们使用ng-repeat指令遍历对象列表。
We have attached addItem() method to add a behaviour to the above application. This line of code ($scope.list.push({ country: $scope.countryName, city: $scope.cityName });) will push new items in the input field to the list of objects when we click on the Add button.我们已经附加了addItem（）方法来向上述应用程序添加行为。这行代码（ $scope.list.push({ country: $scope.countryName, city: $scope.cityName }); ）将在我们单击“ 添加”按钮时将输入字段中的新项目推送到对象列表中。
The ng-click directive allows you to specify custom behavior when an element is clicked.ng-click指令允许您指定单击元素时的自定义行为。

In this tutorial, we demonstrated the use of controllers to set up the initial state of the $scope object and add behavior to that object.

在本教程中，我们演示了如何使用控制器来设置$ scope对象的初始状态并向该对象添加行为。

That’s all for now and you will see more angular features in the coming posts.

到此为止，您将在以后的文章中看到更多的角度特征。

翻译自: https://www.journaldev.com/6033/angularjs-controller-scope-and-view-tutorial-example

实现视图示例