Home > Developer > Web Develop
Objective:
Programming is a very distressed job, because we need to continue to learn, and constantly go to research, I am not a very fond of learning children, otherwise from small to large and no success, but, I have never lacked the diligence, or let us come to terms with our time to learn things, Look at others can run freely, their own even the basis of not know is not special silly.
1,hello World<!DOCTYPE HTML><HTMLNg-app= "Helloangular"> <Head> <MetaCharSet= "Utf-8"> </Head> <Body> <DivNg-controller= "Helloangularctl"> <P>{{Greeting.text}},world</P> </Div> </Body> <Scriptsrc= "Js/angular-1.3.0.js"></Script> <Scriptsrc= "Helloangular_mvc.js"></Script></HTML>
First look at this code, if you have never contacted angular students, will think that the code can also write?
Let's take a look at the new wording we've encountered in this piece of code.
1,ng-app= "Helloangular", this is the entrance to the program (the main () method in C #), if there is this in the HTML, it indicates that In this dome element within the scope of Angular.js to manage, is not very wonderful, of course, we can put this in the body tag can also, it is noteworthy that there is only one ng-app in a program, the back of the Helloangular is the name of the module behind, Can not write this thing.
2,ng-controller= "Helloangularctl", this is the focus of this chapter, that is, the C (Controller) in MVC, as the name implies is the meaning of the controller, then exactly control what? According to my understanding, it is the control of the following elements according to what to show, what is here and so on later.
3,{{greeting.text}, if PHP or the use of HTML template students should know, these two large curly braces, is the program inside the variable or property, can be directly referenced here, this is very interesting ah, because we know that if you want to assign a dome, first of all, according to JS gets this Dome object, and then assigns it to it through the Value property, which is a hassle, but it's so simple here.
Well, after reading the HTML code, we look at JS again, we first introduce ANGULARJS library file, otherwise the above will not take effect. Then introduce our own logic code helloangular_mvc.js
// Define a module var Helloangularmodule = Angular.module ("Helloangular", []); // set a controller in the module Helloangularmodule.controller ("Helloangularctl",function($scope) { $scope. Greeting={ text:' Hello ' }})Just like the code comment above, we first define a module with angular syntax ( Note: We now have all the code to be modular, otherwise MVC becomes useless, or whether we are using MVC or MVVM, the ultimate goal is code reuse and modularity and then, according to this module, we define a controller.
Here are some cautious's classmates to see, The name of our module (helloangular) and the name of the controller definition (HELLOANGULARCTL) are exactly the same as the names of the Ng-app and Ng-controller written in the HTML code we said earlier. Yes, that's what we're using to specify the angular environment. If you write a wrong letter, you may not be able to execute the whole program.
Here, we are going to say a more important attribute, that is the controller $scope, we call the scope. This $scope is a magical thing, it can be said that the entire ANGULARJS run is on this, is ANGULARJS implementation of the data model, we can see the previous (HTML code) in the {{}} reference data, is the property of the $scope object.
OK, and finally show the effect of running:
Finally, the scope of our $scope is in the range of the controller, that is, if our HTML code controller1 calls the properties and methods of the $scope object in Controller2, then someone will say, What if two have to use one thing? Don't worry. We will say later, I look at others is to write a common controller to put 1 and 2 into the, in fact, this is a wrong way, we have to build a service, and later.
Controller of ANGULARJS-MVC
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
