Home > Developer > Web Develop
Angularjs MVC and $scope scope Angularjs Module
The run method and the code compression problem in Dependency injection
1. Angularjs MVC
Model: Data Model Layer
View: View layer, responsible for showing
Controller: Business logic and Control logic
Advantages: Code Modular Code logic is clear, high-value-shifting, late maintenance, code reuse,
The scale of the code is growing, the role of segmentation is the trend
Cons: Run a little less efficiently
2. Angularjs $scopeScope
1. $scopeMultiple controller individual scopes
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>Untitled Document</title>
<script type= "Text/javascript" src= "Angular.min.js" ></script>
<body>
<div ng-app= "MYAPP" >
<div ng-controller= "Firstcontroller" >
{{Name}}
</div>
<div ng-controller= "Secondcontroller" >
{{Name}}
</div>
</div>
<script type= "Text/javascript" >
var app = Angular.module ("myApp", []);
App.controller (' Firstcontroller ', function ($scope) {
$scope. Name= 'Tom‘;
});
App.controller (' Secondcontroller ', function ($scope) {
$scope. Name= 'John doe‘;
})
</script>
</body>
2. $rootScopeService
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>Untitled Document</title>
<script type= "Text/javascript" src= ". /angular.min.js "></script>
<body>
<div ng-app= "MYAPP" >
<div ng-controller= "Firstcontroller" >
Name:{{Name}} <br>
Age:{{Age}}
</div>
<div ng-controller= "Secondcontroller" >
Name:{{Name}}
Age:{{Age}}
</div>
</div>
<script type= "Text/javascript" >
var app = Angular.module ("myApp", []);
App.controller (' Firstcontroller ', function ($scope, $rootScope) {
$scope. Name= 'Tom‘;
$rootScope. age= ' 30 ';
});
App.controller (' Secondcontroller ', function ($scope) {
$scope. Name= 'John doe‘;
})
</script>
</body>
3.Controller inheritance
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>Untitled Document</title>
<script type= "Text/javascript" src= ". /angular.min.js "></script>
<body>
<div ng-app= "MYAPP" >
<div ng-controller= "Firstcontroller" >
{{Name}}
{{Age}}
{{Sex}}
<div ng-controller= "Secondcontroller" >
{{Name}}
{{Age}}
{{Sex}}
</div>
</div>
</div>
<script type= "Text/javascript" >
var app = Angular.module ("myApp", []);
App.controller (' Firstcontroller ', function ($scope) {
$scope. Name= 'Tom‘;
$scope. age= ' 40 ';
});
App.controller (' Secondcontroller ', function ($scope) {
$scope. Name= 'John doe‘;
$scope. sex= 'Man‘;
})
</script>
</body>
3.Problems with code compression in dependency injection
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>Untitled Document</title>
<script type= "Text/javascript" src= ". /angular.min.js "></script>
<body>
<div ng-app= "MYAPP" >
<div ng-controller= "Firstcontroller" >
{{Name}}
{{Age}}
{{Sex}}
<div ng-controller= "Secondcontroller" >
{{Name}}
{{Age}}
{{Sex}}
</div>
</div>
</div>
<script type= "Text/javascript" >
var app = Angular.module ("myApp", []);
App.controller (' Firstcontroller ', [' $scope ', function ($scope) {
$scope. Name= 'Tom‘;
$scope. age= ' 40 ';
}]);
App.controller (' Secondcontroller ', [' $scope ', function ($scope) {
$scope. Name= 'John doe‘;
$scope. sex= 'Man‘;
}])
</script>
</body>
4. AngularjsModule'sRunMethod
Run method initializes global data , only works on global scopes such as $rootScope
<script type= "Text/javascript" >
var m1 = angular.module (' myApp ', []);
M1.run ([' $rootScope ', function ($rootScope) {
$rootScope. Name = ' Hello ';
}]);
Console.log (M1);
</script>
This article is from the "Wennuanyiran" blog, make sure to keep this source http://dingzhaoqiang.blog.51cto.com/5601059/1697166
Angularjs MVC and the Run method of the $scope scope ANGULARJS module and the code compression problem in Dependency injection
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
