Home > Developer > Web Develop
First look at an example
<!DOCTYPE HTML><HTMLLang= "ZH-CN"><Head><MetaCharSet= "Utf-8"><title>AngularJS</title><!--Angular References -<Scriptsrc= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"type= "Text/javascript"></Script><!--Controller JS -<Scriptsrc= "Myapp.js"></Script></Head><BodyNg-app= "Appmodule"> <DivNg-controller= "SayHello"> <spanNg-bind= "Name"></span> <spanNg-bind= "Say"></span> </Div> <DivNg-controller= "NameList"> <ul> <Ling-repeat= "x in NList"> <aNg-bind= "X"href="#"></a> </Li> </ul> </Div></Body></HTML>
var MYAPP = Angular.module (' Appmodule ', []); // registering the module // SayHello Controller Myapp.controller (' SayHello ', [' $scope ',function($scope) { = "Jerry"; = "hi! Tom. " }]); // NameList Controller Myapp.controller (' NameList ', [' $scope ',function($scope) { = [' JavaScript ', ' jQuery ', ' Angularjs ', ' Vuejs ', ' HTML5 ', ' CSS3 ', ' Nodejs '];}]);Run results
var MyApp = angular.module (' Appmodule ', []); Used to register a module, declare a variable to refer to Angular's module method, register a module;
angular.module (' Appmodule ', []); The first parameter defines the module name, and the second parameter references the other modules that need to be relied upon (an array of module names).
Myapp.controller (' ConName ', [' $scope ', function () { //... }]); The first parameter defines the controller name, the second parameter defines the controller contents, the first element of the array registers a scope object, and the second is the controller function body.
Note: The $scope here is that the built-in object of angular is not a normal function and cannot be named arbitrarily.
Attention points in the use of ANGULARJS controller
1. Do not attempt to re-use the controller, a director is generally responsible for a small block of views;
2. Do not manipulate the DOM in controller, this is not the responsibility of controllers, in the use of the browser resources will be wasted;
3. Do not do data formatting in the controller, NG has a very useful form space;
4. Do not do data filtering in controller, NG has $filter service;
5. The general controller does not call each other, the interaction between the controllers through the event to do the interaction;
The role and definition of $scope
1. $scope is a pojo (plain old JavaScript object);
2. The $scope provides some tool methods $watch ()/$apply ();
3. $scope is the execution environment of expressions;
4. $scope is a tree structure, parallel to the DOM tag;
5. The child $scope object inherits the properties and methods on the parent $scope;
6. Each angular application has only one root $scope object (located on Ng-app);
7. $scope can propagate events, like DOM events, which can be propagated up and down.
8. $scope is the core of angular.
9. You can use Angular.element ($). Scope () to debug;
Angular Project Structure
Angular projects can be implemented on the front-end mvc,angular MVC is similar to the MVC structure of other background languages; JS Directory put the custom Controller,framework directory in the official or third-party controller or plug-in, Tpls catalog puts master pages and views, node_module directories in third-party or official node plugins.
General App.js is the main method for angular project entry, similar to the background language.
Angularjs Quest < three > Controller controllers and Angular project structure
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
