AngularJs Starter Series-1 using AngularJs to build the basic frame of the page

Whenever I see a front-end programmer struggling with scripting, styling, and form-processing logic, I'm thinking, why not angular Js?

Angular JS Support the development of the MVC pattern at the front of the page, with the support of Angular JS, we can separate the data of the front page processing from the page display, and realize the elegant code structure.

First, we need to download this script library to AngularJs's website.

Address: https://angularjs.org/

However, this site is often blocked and you can download it directly here: Http://files.cnblogs.com/haogj/AngularJs-1.3.10.zip

1. Referencing the AngularJs script on the page

AngularJs is a standalone scripting library, and many people ask if jQuery is still needed, and the answer is no. You just have to refer to the AngularJs script file on the page, and even the AngularJs implements a lite version of JQuery. But it can also be used with jQuery.

In the page view of ASP. NET MVC, you can either refer directly or place the script in the scripts section of layout layouts by @section.

@section Scripts {    <script src= "~/scripts/angular-1.3.10.min.js" ></script>    < Script>    </script>}

2. Create WEBAPP and controllers

In AngularJs, each page is treated as a separate WebApp, each WebApp can include several separate processing parts, which we call the controller, each with its own separate processing context and logic.

AngularJs uses the directive Ng-app to delimit the scope of this WebApp, which can usually be written directly above the HTML tag or on an element, which we write on top of the DIV tag in this view.

Ng-controller is used to delimit the scope of the controller in the WebApp, and usually we give it a name.

<div ng-app= "myApp" >    <div ng-controller= "mycontroller" >    </div></ Div>

Below, create our WebApp and controllers in the script.

1 <script src= "~/scripts/angular-1.2.14.min.js" ></script>2 <script>3     var app = Angular.module ("myApp", []); 4 5     App.controller ("mycontrollerfunction  ($scope, $http) {6         $ Scope.message = "Hello, Angular JS." ; 7     }); 8 </script>

The third line above creates the WEBAPP, noting that the first parameter is the name of the app and needs to match the WEBAPP name in the page directive, and the second parameter array is required.

The five-line creation of the controller in the application, in particular, the controller's anonymous function parameters, the names of these two parameters can not be modified, in AngularJs, the name of the parameter is used for dependency injection.

The first parameter $scope is the context object of the controller, through which we glue the model, view, and processing logic together.

3. Create a View

In AngularJs, views are implemented through standard HTML.

Note that in line 6th of our code above, we save a message on the context object, which is our model, and we want the data in this model to be displayed on the page.

Inside the Controller element, create a new div to hold our content, and we are ready to use the H2 tag to display the contents of this message.

How does a view bind to our model? Various templates have their own binding syntax, and the AngularJs is in the form of {{}}. Where you can write an expression.

<div ng-app= "myApp" >    <div ng-controller= "Mycontroller" >        <div>             Message}}
Now run the program, you should have seen the output on the page.
4. Implement two-way binding of models and views
What if we need to edit this message? How do I get the edited content after editing? ANGULARJS supports bidirectional binding, which means that data can be obtained from our model, and if the data is edited, the edited content can be synchronized to the model by ANGULARJS.
Two-way binding is actually supported internally by ANGULARJS, and we don't need special coding. Here we add an edit box to support editing.
<div ng-app= "myApp" >    <div ng-controller= "Mycontroller" >        <div>             Message}}
Note the Ng-model property of the INPUT element, which indicates that we need to bind a message to this edit element in both directions.
Rerun the program, you see the contents of the message also appear in the edit box, if you modify the contents of the edit box, the content in the title will also change synchronously. The results of your edits have been synced to the model.
Summarize
AngularJs is a relatively heavy script library, although the interior is highly complex, pay attention to the key usage details, it is actually very simple to use.
AngularJs Starter Series-1 using AngularJs to build the basic frame of the page