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

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

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.

{{someText.message}}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script><script>var myAppModule = angular.module('myApp', []);myAppModule.controller('TextController',function($scope) {var someText = {};someText.message = 'You have started your journey.';$scope.someText = someText;});</script>

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 is to use curly brackets:

{Greeting }}

Another way is to use attribute-based commands, called ng-bind:

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.

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;};}