Explore angularJS series and explore angularjs
What is AngularJS? Concept? Features? Advantages? Disadvantage? That's not the case. If you don't talk much about it, You can directly start O (∩) O ~~
Install
1. download and install the official website http://angularjs.org/
2. download and install the open-source library http://www.bootcdn.cn/
3. Download and install bower (A Package Manager)
bower install angular
MVC
MVC is short for "Model-View-controller", a design pattern. MVC logically splits the code into three layers, in this way, each part can be independently developed, tested, and maintained.
Model/Model-service maintains data
View/View-display layer (tive) is responsible for displaying data to users
Controller/Controller-control layer controls interaction between Model and View
AngularJS startup Analysis
Case 1
1 <! DOCTYPE html> 2The result is as follows:
Create an angualr Application
1. Introduce angularJS
1 <script src="angular.js"></script>2. Mark ng-app
Note: ng-app is a program startup command used to mark the management boundary of angularJS and mark it on the html element. This indicates that all html elements are within the management scope of angularjs.
Three usage methods:
Ng-app
1Ng-app = ""
1Ng-app = "root Module name"
13. Create the root module of the project
1 angular.module("demo",[]);4. angular starts automatically
Angualr application created
Note: {angular special expression }}
Case 2
1 <!DOCTYPE html> 2The result is as follows:
Problem:
1. Why is the output of the second expression {msg} hello angular !?
A: The code below registers a controller function named oneCtrl. The controller function is registered in Angular and can be used through angular. module (...). controller (...).
1 angular.module("demo",[])2 .controller("oneCtrl",function($scope){3 $scope.msg = "hello angular!"4 })2. Why is the first expression {msg} Not called through the angular. module (...). controller (...) function?
A: angularJS has a strict boundary management scope. The first expression {msg} is not in the management scope of the oneCtrl controller.
Case 3
1 <! DOCTYPE html> 2The result is as follows:
Problem:
1. Differences Between ng-app and ng-app = "", ng-app = "demo"
A: ng-app has a default module. If multiple ng-apps exist, the first one is loaded by default, and only the first one is loaded. Ng-app = "Custom module" is a custom module that inherits the initial default module, the method that can call the initial default module is a special case of a third party.
2. Why is the second {1 + 1 }}{{ msg} not loaded?
A: Check the code. to load the code, it must be angular. module (...). controller (...) and angular. module ("demo", []) root directory "demo"
However, the source code does not mark the "demo" root directory.
Case 4
1 <!DOCTYPE html> 2The result is as follows:
Problem:
1. Why can angular be started without ng-app?
A: If the ng-app command is included in the current page, angular starts automatically. If you do not want to display the ng-app in the current page, we can manually start it by code, that is, using angular. bootstrap (document, ["demo"]) is manually started, equivalent to ng-app = "demo ";
2. What is the role of angular. bootstrap (document. getElementById ("box"), ["demo?
A: angular. bootstrap (startup position, array). startup position: indicates the management range. array: indicates that the array is used as the startup module.
Please leave a message to inform me of your comments !!
(First glance-end ~~)
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
