Home > Developer > Web Develop
Angular JS is commonly known as Angular 1
The core of ANGUALR development is the separation of views and business operations data.
(a) Angular JS instruction Brief
Angular, which has a special function , is called the directive, all of which begin with Ng
The ng-app directive can specify which module the current view is managed by, that is, the coverage of the angular directive.
<body ng-app= "App" >
<div>{{name}}</div>
<body>
<script>
var app = Angular.module ("App", []);
</script>
(ii) Controller--Create and associate
The controller is the doorway where we write the business logic, where we manipulate the data to change the view
<body ng-app= "App" >
Associate Controller
<div ng-controller= "Appctrl" >{{val*val}}</div>
<body>
<script>
var app = Angular.module ("App", []);
Add a controller to the app module, create a Val variable
App.controller ("Appctrl", function () {
var val = 10;
});
</script>
(iii) $scope-Flexible data
So angular provides a $scope object, the properties that are added to this object are accessible in the view, and angular can get these variables and use them in the view.
<body ng-app= "App" >
//关联哪个控制器就可以使用哪个控制器的$scope数据
<div ng-controller= "Appctrl" >val*val</div>
</body>
<script>
var app = Angular.module ("App", []);
The app module adds a controller, the main function of which is to initialize and operate the $scope
App.controller ("Appacrtl", ["$scope", function ($scope) {
$scope. val = 10;
}])
</script>
One module can create any number of controllers
Each controller can be associated with a portion of the view
<body ng-app= "App" >
<div ng-controller= "Appheaderctrl" >{{Val}}</div>
<div ng-controller= "Appmainctrl" >{{Val}}</div>
<div ng-controller= "Appfooterctrl" >{{Val}}</div>
</body>
<script>
var app = Angular.module (' app ', []);
App.controller (' Appheaderctrl ', [' $scope ', function ($scope) {
$scope. val = ' head ';
}]);
App.controller (' Appmainctrl ', [' $scope ', function ($scope) {
$scope. val = ' body ';
}]);
App.controller (' Appfooterctrl ', [' $scope ', function ($scope) {
$scope. val = ' feet ';
}]);
</script>
Angular JS (i)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
