AngularJS Tutorial(5)from w3school
来源:互联网 发布:linux lamp 编辑:程序博客网 时间:2024/06/06 01:47
AngularJS controllers control the data of AngularJS applications.
AngularJS controllers are regular JavaScript Objects.
AngularJS Controllers
AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard JavaScriptobject constructor.
AngularJS Example
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
Try it Yourself »
Application explained:
The AngularJS application is defined by ng-app="myApp". The application runs inside the <div>.
The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.
The myCtrl function is a JavaScript function.
AngularJS will invoke the controller with a $scope object.
In AngularJS, $scope is the application object (the owner of application variables and functions).
The controller creates two properties (variables) in the scope (firstName andlastName).
The ng-model directives bind the input fields to the controller properties (firstName and lastName).
Controller Methods
The example above demonstrated a controller object with two properties: lastName and firstName.
A controller can also have methods (variables as functions):
AngularJS Example
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
}
});
</script>
Try it Yourself »
Controllers In External Files
In larger applications, it is common to store controllers in external files.
Just copy the code between the <script> tags into an external file named personController.js:
AngularJS Example
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script src="personController.js"></script>
Try it Yourself »
Another Example
For the next example we will create a new controller file:
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
Save the file as namesController.js:
And then use the controller file in an application:
AngularJS Example
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
Try it Yourself »
- AngularJS Tutorial(5)from w3school
- AngularJS Tutorial(1)from w3school
- AngularJS Tutorial(2)from w3school
- AngularJS Tutorial(3)from w3school
- AngularJS Tutorial(4)from w3school
- AngularJS Tutorial(6)from w3school
- AngularJS Tutorial(7)from w3school
- AngularJS Tutorial(8)from w3school
- AngularJS Tutorial(9)from w3school
- AngularJS Tutorial(10)from w3school
- AngularJS Tutorial(11)from w3school
- AngularJS Tutorial(12)from w3school
- AngularJS Tutorial(13)from w3school
- AngularJS Tutorial(14)from w3school
- AngularJS Tutorial(15)from w3school
- AngularJS Tutorial(16)from w3school
- AngularJS Tutorial(17)from w3school
- AngularJS Tutorial(18)from w3school
- AngularJS Tutorial(3)from w3school
- 【GDOI】模拟8.1总结
- AngularJS Tutorial(4)from w3school
- 动态库导出声明 : extern "C" __declspec(dllexport) 与 __declspec(dllexport)
- Linux进程间通信之管道
- AngularJS Tutorial(5)from w3school
- 【转】GDB调试方法汇总
- python调试
- 高效画圆角的方法
- AngularJS Tutorial(6)from w3school
- GdiplusFlat(4)单色画刷 和 线性渐变画刷
- PowerDesigner生成SQL脚本时,对象带有双引号的问题解决
- 32位和64位下Myeclipse、Tomcat以及JDK三者关系详解
- AngularJS Tutorial(7)from w3school