3.AngularJS Essential Knowledge

Angularjs is a Web application framework.

In this section we will learn the controller (control data), learn the scope (connection controller and user interface), the user interface is also called the view, through the template and scope to create interactive visual effects. In addition, we will learn about other features such as how to use filters to transform data, how to build and use directives to enhance existing HTML elements, and how to load and save application data from an external data source.

Preliminary study on 3.1 Angularjs

A typical component of the ANGULARJS application:

3.1.1 Views and templates: describing content

Template: A piece of HTML content, which is an HTML with an instruction or expression, that can be loaded into the application when needed.

Views: templates are used to present the data, the view must have a template (that is, the HTML tag), and the data that the template needs to use, the view gets the data and uses the values in the data to render the template.

directive: The instruction modifies the behavior of the element that contains it. Angular has a lot of instructions, they are all beginning with ng, such as to decorate the display style (Ngshow, Ngclass), for the form (Ngmodel, ngform), for listening to the events such as Click (Ngclick, Ngmouseover), Angular also has many directives that work on native HTML elements, providing some functionality that HTML does not have, including input boxes, text areas, and anchor points.

Expression: Double curly braces {{}}, indicating that some data will be shown here, this idea is called data binding. All the contents of the curly braces are table applicator, and ANGULARJS evaluates the expression with the data of the current model.

The difference between Ngapp and Ng-app:

Ngapp is the name of the JavaScript version, and Ng-app is the name of the HTML version.

Template code Example:

//Below is a section of the template<ulclass=""List-group>        <binclass= "List-group-item">ng-repeat= "Note in Notes"//ng-repeat creates an Li ng-click= "displaynote ($index)" For each note in the note array//ng-click will Call Displaynote () method when Li is clicked ng-class= "{active:note.id = = content.id}" >{{note.title}}<BR/>//Use Ng-class to control whether a class is displayed<Small>{{note.date | date: ' Short '}}</Small>//Display data and use filters to display shorter date formats</Li></ul>

3.1.2 controllers, models, and scopes: managing Data and logic

Controller: is a function attached to a Document Object model (DOM) node that is used to drive your application logic. In JavaScript, a controller is a function that communicates with the scope and corresponds to the event.

Scope: A context that can be understood to be shared between the controller and the view, Dad. It is seen as a bridge between the controller and the interface, and the scope updates the view when it is updated in the controller. The scope has two core roles: storing data and allowing the controller to access the data in a way. The data stored in the scope is called a model, and the model can be any JavaScript value (usually an array or an object, or it can be a simple number or string), which you can store in scope and then share to the controller and view through scopes.

Example controller code:

Angular.module (' app '). Controller (' controller ', function ($scope) {  ///Declare controllers and use $scope service to access scope    $scope. Notes = [  //Create an array of note objects and assign values to the Notes model, Ngrepeat will show this model        {id:1,title: ' Note 1 ', Date:new Date ()},        {id:2,title: ' Note 2 ', Date:new Date ()}    ];    $scope. Getnote=function (index) {  ///Add a method that will be set by the Ngclick command in the view and update the current value        $scope. content= $scope. Notes[index];    };});

All content in the controller is isolated from the rest of the app, except its own child scopes. This is important because it can limit the visibility of code and variables.

The root scope (accessed through the $root scope object) is the first scope created by angular, which is the basis for all other scopes, which means that everything you put on the root scope is visible to other scopes and sounds good, but it's best not to do so. You need to keep the scope clean and focused, rather than pushing everything in the root scope.

Controller is not omnipotent: one to avoid DOM operation in the controller, and to avoid formatting or filtering data in the controller, you can use the form to do these things.

3.1.3 Service: Reusable Objects and methods

There is a concept called service in angular, which is essentially a JavaScript object that can be shared throughout the application. Angular provides a number of service defaults, and you can create your own service.

$http is a very common service,angular used to manipulate HTTP requests.

Service is loaded with angular delay, that is, they will only load memory when they are in use. They are still singleton, and if you change the value of the service in one place, the rest of the service will be affected.

Ionic many features into the angular service, it is important to note that almost everything contained in the controller is a service.

3.1.4 Bidirectional data binding: Sharing data between controllers and views

One of the most powerful features of angular is bidirectional data binding. The view binds data to a template, which in turn is also used. The view can change the data in the scope, and the data is immediately updated to the scope and reflected in the controller. This is especially useful in forms where the values in the scope are updated synchronously when the user enters content into the text box. You don't have to do anything special to start two-way data binding, it's automatically implemented. As in the following example:

<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><Scriptsrc= "Http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></Script></Head><Body><DivNg-app= "MYAPP"Ng-controller= "Formctrl">  <formnovalidate>First Name:<BR>    <inputtype= "text"Ng-model= "User.firstname"><BR>Last Name:<BR>    <inputtype= "text"Ng-model= "User.lastname">    <BR><BR>    <ButtonNg-click= "Reset ()">RESET</Button>  </form>  <P>Form = {{User}}</P>  <P>Master = {{Master}}</P></Div><Script>varapp=Angular.module ('myApp', []); App.controller ('Formctrl', function($scope) {$scope. master={firstName:"John", LastName:"Doe"}; $scope. Reset= function() {$scope. User=angular.copy ($scope. master);    }; $scope. Reset ();});</Script></Body></HTML>

View Code

These are the core concepts of angular, and these are enough background to get you started.

　　　　

　　　　

3.AngularJS Essential Knowledge