Home > Developer > Web Develop
When using a typical class library, you can choose and use the features you like, and for the ANGULARJS framework it must be treated as a completion suite, everything in the framework is included, and the basic modules of the angular are introduced next. This way you can understand how they are assembled together.
Call AngularIn order to use angular, all references must do two things:
1, load angular library.
2. Use the Ng-app directive to tell angular that part of the DOM should be managed.
Load ScriptLoading the class library is straightforward and follows the same rules as other JavaScript class libraries.
Using Ng-app to declare angular boundariesYou can use the Ng-app command to tell the angular admin page that piece. If you are building a pure angular application, then you should write the Ng-app in the HTML tag, such as:,
......
If you want to manage only one part of the page, you can write this:
<div ng-app>
......
</div>
Model View Controller
Angular itself is an application design that supports MVC style. Although angular has a lot of flexibility, the style will often involve:
1, the model to accommodate the data, the model represents the current state of the application.
2. Some attempts to display the data.
3. Used to manage some controllers between the data and the model.
eg. var sometext= ' You Hava started your journey. ';
You will use the properties of the object to create the data model, and even to store the data using only the basic types of data; You can write an HTML page to create an attempt, and then combine it with the model in your data
Eg.<p>{{sometext}}</p>
We call this the double-parenthesis interpolation syntax.
The integration of the above things has the following content:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "Textapp">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Hello world!</title>6 <Scriptsrc= "Static/js/angular.js"type= "Text/javascript"></Script>7 <Scriptsrc= "Static/app/controller/controller.js"type= "Text/javascript"></Script>8 </Head>9 <BodyNg-controller= "Textcontroller">Ten <P>{{Sometext}}</P> One </Body> A </HTML>View Code
1 ! (function () {2 var app= angular.module (' Textapp ', []); 3 function ($scope) {4 $scope. Sometext = ' You hava started your journey. ' ; 5 }); 6 } ());Templates and data binding
The template in angular is just some fragment of some HTML, we can load it from the server, or we can define it in the <script> tag, and the same way as all other static resources.
The basic operating procedures are as follows:
1, user request user Start page.
2, the user's building to the server to initiate an HTTP connection, and then load the page, this page contains a template.
3. Angular is loaded into the page, waits for the page to load, and then looks for the Ng-app directive to define the template boundaries.
4, angular traversal template, find instructions and binding relationship, this will start a series of actions: Register the Listener, perform some DOM operations, get initialization data from the server. The end result of this work is that the app will start up and the final template will be converted into a DOM view
5. Connect to the server to load other data that needs to be displayed to the user.
Steps 1 through 3 are required for each ANGULARJS application, but step 4 and step 5 are optional.
Text to display
1. ng-bind directive
2. {{}} mode
The content of the output is equivalent. So why do you have ng-bind instructions? We use {{}} to make the code more concise to read, but before angular uses the data to replace the parentheses, {{}} is likely to be seen by the user, and the first is not subject to this problem. The reason for this is that the browser needs to load the HTML page first, render it, and then angular will have the opportunity to interpret her as you expect.
Form inputAngular form elements are very convenient. Such as:
View Code1 < ng-controller= "Somecontroller">2 < type = "checkbox" Ng-model = "Youcheckedit" /> 3 </ form >
The implication of this is:
1. When the user selects the check box, the Youcheckedit property in $scope in Somecontroller becomes true, and the Youcheckedit property of the inverse check box becomes false.
2. If the value of $scope.youcheckedit is set to False in the Controller, the check box in the UI is reversed. Conversely, tick the checkbox.
When a text box is changed, a method is called to make some logical operations on the columns, and you can use Ng-change to specify a controller method, such as:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "MyApp">3 <Head>4 <MetaCharSet= "UTF-8">5 <title></title>6 <Scriptsrc= "Static/js/angular.js"type= "Text/javascript"></Script>7 <Scriptsrc= "Static/app/controller/form.js"type= "Text/javascript"></Script>8 </Head>9 <Body>Ten <formNg-controller= "Mycontroller"> OneStaring:<inputtype= "text"Ng-change= "computerneeded ()"Ng-model= "Fundaing.starting"/> A recommendation:{{fundaing.needed}} - </form> - </Body> the </HTML>View Code
1 varApp=angular.module (' MyApp '),[]);2App.controller (' Mycontroller ',function($scope) {3$scope. fundaing={starting:0};4Computerneeded=function () {5$scope. fundaing.needed= $scope. fundaing.starting * 10;6 };7 8$scope. $watch (' fundaing.starting ', computerneeded);9});View Code
The basic point is that you can call the $watch function to monitor an expression, which is called when the expression changes $watch.
Lists, tables, and other iterative elements
Ng-repeat is probably the most useful angular instruction, and it can create multiple copies at once based on the elements in the collection. You can use this directive wherever you want to create a list of things. Such as:
1 <!DOCTYPE HTML>2 <HTMLNg-app= "Textapp">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Hello world!</title>6 <Scriptsrc= "Static/js/angular.js"type= "Text/javascript"></Script>7 <Scriptsrc= "Static/app/controller/controller.js"type= "Text/javascript"></Script>8 </Head>9 <Body>Ten <DivNg-controller= "Repeatcontroller"> One <Ling-repeat= "Item in Items"> A <ahref="">{{Item.name}}</a> - <span>{{Item.age}}</span> - </Li> the </Div> - </Body> - </HTML>View Code
1! (function (){2 varapp= angular.module (' Textapp '),[]);3 4App.controller (' Repeatcontroller ',function($scope) {5 varitems=[6{name: "Zhang San", age:20},7{name: "John Doe", age:22},8{name: "Harry", age:24}9 ];Ten$scope. items=items; One }); A -}());View Code
Hide and show
The functions of the two directives of ng-show and ng-hide are equivalent, but the effect is the opposite, and they all show and hide elements through the expression you pass.
CSS Classes and styles
Cond......
ANGULARJS Application Skeleton
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
