Use angularjs to develop next-generation web applications (2): angularjs application skeleton (1) and angularjs next-generation

Use angularjs to develop next-generation web applications (2): angularjs application skeleton (1) and angularjs next-generation

1. Call angularjs

1> load angularjs Library

It can be loaded from google's CDN (content delivery network) to get fast, and it can cache script libraries between multiple applications (this method is recommended, but China's special national conditions, this method cannot be used ):

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

Local host mode.

2> Use ng-app to declare the boundary of angular

2. MVC

The correct way to define a controller is to define it as part of a module. The controller can provide a namespace Mechanism for the relevant parts in the application. The module can isolate things from the global namespace.

3. template and Data Binding

The basic procedure is as follows.
1. User request application start page.
2. the user's browser connects to the server initiator "http". Then, the" index.html "page is displayed, which contains a template.
3. Angular is loaded to the page. Wait until the page is loaded, 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 triggers a series of actions: register the listener, perform DOM operations, and obtain initialization data from the server. The final result of this work is that the application will
And the template is converted to the DOM view.
5. Connect to the server to load other data to be displayed to the user. For each Angular application, steps 1 to 3 are standardized, and steps 4 and 5 are optional.
These steps can be performed synchronously or asynchronously. To improve performance, For the first view in the application, you can load the data together with the HTML template to avoid multiple requests.
4.Show text

Using the ng-bind command, you can display and refresh text anywhere in the UI. It also has two equivalent forms.
The first method is to use curly brackets: <p >{{ greeting }}</p>
Another way is to use attribute-based commands, called ng-bind: <p ng-bind = "greeting"> </p>
Rendering, The unrendered template may be visible to users. This problem is not encountered in the view using the second method.
You can still use {} in most templates {{}}. However, ng-bind is recommended for data binding on the index.html page.
5.Form Input
Ng-model: binds an element to a model attribute.
Ng-change: Specifies a controller method. This method is called once the user modifies the input value.
$ Watch () function to monitor an expression. When this expression changes, a callback function is called.
Ng-submit, ng-click, and ng-dblclick.

<form ng-submit="requestFunding()" ng-controller="StartUpController">Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">Recommendation: {{needed}}<button>Fund my startup!</button><button ng-click="reset()">Reset</button></form>function StartUpController($scope) {$scope.computeNeeded = function() {$scope.needed = $scope.startingEstimate * 10;};$scope.requestFunding = function() {window.alert("Sorry, please get more customers first.");};$scope.reset = function() {$scope.startingEstimate = 0;};}






How to Develop next-generation WEB applications with ANGULARJS
Angularjs is the first translation in China. The content is clear and practical, and the technical points are fully covered. It is the best choice in the Getting Started tutorial. You can check the front-end kids shoes. It is very good. I personally think it is a book that makes it easier to develop separate front and back ends, reduce maintenance costs, and improve development efficiency. It is worth learning and researching.

AngularJS
The new web Front-end MVC framework developed by google is still used by a few people, and there are no books in the Chinese version. We suggest you go to 51cto to search for "seven steps from AngularJS cainiao to experts ". youku, the most comprehensive tutorial series, also has a video of v.youku.com/..e00004451 explaining Chinese.