Developing next-generation Web applications with ANGULARJS (ii): ANGULARJS application skeleton (i)

1. Call Angularjs

1> loading Angularjs library

It can be loaded from Google's CDN (content distribution network), gets fast, and can cache script libraries across multiple apps (this is recommended, but not in China's special circumstances):

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

Local Host mode.

2> using Ng-app to affirm the boundary of angular

2.MVC

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

3. Templates and Data binding
     Basic Operating procedures are as follows. 
               1. The user requests that the start page be applied. 
               2. The user's browser initiates an HTTP connection to the server and then loads the Index.html page, which contains the template. 
               3. Angular is loaded into the page, waits for the page to load, and then looks for the Ng-app directive, which defines the template boundaries. 
               4. Angular walks through the template to find instructions and bindings, which triggers a series of actions: Registering the listener, performing some DOM operations, and getting initialization data from the server. The end result of this work is that the application will be 
                      starts up, and the template is converted into a DOM view. 
               5. Connect to the server to load additional data that needs to be presented to the user. Steps 1 through 3 are standardized for each angular application, and step 4 and step 5 are optional. 
These steps can be done synchronously or asynchronously. To improve performance, for the first view in the app, you can load data and HTML templates together to avoid initiating multiple requests.
4. display text
Using the Ng-bind directive, you can display and refresh text anywhere in the UI. It also has two equivalent forms.
The first is the use of curly braces in the form of:<p>{{greeting}}</p>
Another way is to use attribute-based directives called Ng-bind:<p ng-bind= "greeting" ></p>
Although the output is the same in both forms, when using the double curly brace syntax, the first loaded page, which is the index.html in the application, may be seen by the user before angular uses the data to replace the curly braces. The view with the second method does not run into this problem.
you can still use {{}} in most templates. However, for data-binding operations in index.html pages, it is recommended to use Ng-bind. 
5. form Input
Ng-model: Binds an element to a model property.
Ng-change: Specifies a controller method that will be called once the user modifies the input value.
The $watch () function monitors an expression that invokes a callback function when the expression changes.
Ng-submit, Ng-click, 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 to more customers first."); $scope. reset = function () {$scope. startingestimate = 0;};}