Home > Developer > JavaScript
Angularjs application skeleton
When using a typical class library, you can select and use your favorite features. For the angularjs framework, you must regard it as a complete suite for use, everything in the framework is included. Next we will introduce the basic modules of angular, so that you can understand how they are assembled together. To use Angular, call angular. All references must do two things: 1. Load the angular library. 2. Use the ng-app command to tell angular to manage the part of the DOM. Loading a script to load a class library is very simple and follows the same rules as other javascript class libraries. Using ng-app to declare Angular boundaries you can use the ng-app command to tell angular to manage the page. If you are building a pure angular application, you should write ng-app in html tags, such as:,
1 <!DOCTYPE html> 2
1 !(function (){2 var app= angular.module('textApp',[]);3 app.controller('TextController', function ($scope) {4 $scope.sometext = 'you hava started your journey.';5 });6 }());The templates in angular are only HTML fragments. They can be loaded from the server or defined in the <script> tag, the processing method is the same as that of all other static resources. The basic operation procedure is as follows: 1. User request user start page. 2. the user's Loulan initiates an HTTP connection to the server and loads the page, which contains a template. 3. angular is loaded to the page, wait for the page to load, and then search for the ng-app command to define the template boundary. 4. angular traverses the template and searches for commands and binding relationships. This sets out a series of actions: Registering listeners, performing DOM operations, and obtaining initialization data from the server. The final result of this work is that the application will be started, and the final template will be converted to the dom view 5. Connect to the server to load other data that needs to be presented to the user. For each angularjs application, steps 1 to 3 are required, but steps 4 and 5 are optional. The displayed text 1, ng-bind instructions 2, and {} are equivalent to the output content. So why the ng-bind command? We use {} To make the code easier to read, but before angular uses data to replace brackets, {} may be viewed by users, the first one won't encounter this problem. The cause is that the browser needs to load the HTML page and render it before angular can interpret it as what you expect. It is very convenient to input Angular form elements in a form. For example:
1 <form ng-controller="someController">2 <input type="checkbox" ng-model="youCheckedIt"/>3 </form>1. After the check box is selected, the youCheckedIt attribute in $ scope in SomeController becomes true, and the youCheckedIt attribute of the checkbox becomes false. 2. If you set $ scope. youCheckedIt to false in the controller, the check box in the UI will be deselected. Otherwise, select the check box. When a text box is changed, a method is called to perform logical operations on some columns. You can use ng-change to specify a controller method, for example:
1 <!DOCTYPE html> 2
1 var app=angular.module('myapp',[]);2 app.controller('myController', function ($scope) {3 $scope.fundaing={starting:0};4 computerNeeded= function () {5 $scope.fundaing.needed=$scope.fundaing.starting * 10;6 };7 8 $scope.$watch('fundaing.starting',computerNeeded);9 });The most basic one is watch, which means you can call the watch function to monitor an expression. When this expression changes, it is called. Lists, tables, and other iterative elements ng-repeat may be the most useful angular directive, which can create multiple copies at a time based on the elements in the set. Wherever you want to create a list of things, you can use this command. For example:
1! (Function () {2 var app = angular. module ('textapp', []); 3 4 app. controller ('repeatcontroller', function ($ scope) {5 var items = [6 {name: "Zhang San", age: 20}, 7 {name: "Li Si", age: 22}, 8 {name: "Wang Wu", age: 24} 9]; 10 $ scope. items = items; 11}); 12 13 }());The functions of hiding and displaying ng-show and ng-hide commands are equivalent, but the running effect is the opposite. They can both display and hide elements through the expressions you pass. For css classes and styles, use the following template for some css styles. menu-disabled-true {color: # ccc:
1 <div ng-controller = "deathMenuController"> 2 <ul> 3 <li class = "menu-disabled-{isDisabled}"> menu </li> 4 </ ul> 5 </div>
1 app.controller('deathMenuController', function ($scope) {2 $scope.isDisabled=true;3 });The effect is as follows: But this method is not good at all. Although it is flexible, it is not easy to maintain in large projects, and CSS cannot be created. For this reason, angular provides the ng-class and ng-style commands and expression results, which may be one of the following values: 1. A string that represents the CSS class name, one Space Division 2. CSS class name array 3. CSS class name ing to boolean value first, let's imagine if you want to get operation information in the header of the page. error {background-color: # f00 ;}. warning {background-color: yellow;} How should I use ng-class? The Code is as follows:
1 <div ng-controller="HeaderController">2 <div ng-class="{error:isError,warning:isWarn}">{{messageText}}</div>3 <button ng-click="showError()">Error</button>4 <button ng-click="showWarn()">Warn</button>5 </div>
1 app.controller('HeaderController', function ($scope) { 2 $scope.isError=false; 3 $scope.isWarn=false; 4 $scope.showError= function () { 5 $scope.messageText="this is error"; 6 $scope.isError=true; 7 $scope.isWarn=false; 8 }; 9 $scope.showWarn= function () {10 $scope.messageText="this is warn";11 $scope.isError=false;12 $scope.isWarn=true;13 };14 });We can also do something more dazzling: for example, to highlight the selected rows in the table list. . Selected {background-color: #78FA89;} the code is as follows:
<table ng-controller="TableController"> <tr ng-repeat="item in items" ng-class="{selected:$index==selectrow}" ng-click="selected($index)"> <td>{{item.name}}</td> <td>{{item.cuisine}}</td> </tr></table>
1 app.controller('TableController', function ($scope) { 2 var items=[ 3 {name:'Heifer',cuisine:'BBQ'}, 4 {name:'Green',cuisine:'Salads'}, 5 {name:'Fish',cuisine:'Seafood'} 6 ]; 7 8 $scope.items=items; 9 $scope.selected= function (row) {10 $scope.selectrow=row;11 };12 });The result is as follows: when the src and href attributes are bound to the or <a> tag, the simple use of the src or href attribute {} cannot run well. Since the browser uses parallel methods to load images and other content, all angular has no chance to intercept data binding requests. the most natural usage is but here, the ng-src command should be used: of course, the ng-href command should be used for <a> labels: <a ng-href = "shop/{number}"> Item 1 </a> expressions are used in templates to provide sufficient flexibility in templates, business logic, and establish connections between data, at the same time, it can avoid business logic penetrating into the template. Expressions are executed through the angualr built-in parser. You cannot find the loop structure, flow control operator, and data modification operator in this parser. When you need these types of operations, Please execute them in the Controller or in the command.
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
