---Getting Started with automating bidirectional data binding Angularjs

Objective

AngularJS, created by Misko Hevery and others, was acquired by Google. is a good front-end JS framework, has been used in several Google products. Angularjs has many features, the most core of which are: MVC, modularization, automated bidirectional data binding, semantic tagging, dependency injection, and so on. is a JavaScript framework. It is a library written in JavaScript. It can be added to the HTML page by <script> tags.

1 expression of Angularjs

AngularJS uses an expression to bind data to HTML.

The AngularJS expression is written in double curly braces:{{expression}}.

AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.

AngularJS will "output" the data where the expression is written.

AngularJS Expressions are much like JavaScript expressions : They can contain literals, operators, and variables.

instance {{5 + 5}} or {{firstName + "" + LastName}}.

Instance

<! DOCTYPE html>

modules for 2 angularjs

The module defines an application.

A module is a container for different parts of an application.

The module is the container for the application controller.

Controllers usually belong to a module

Create a module

You can create a module by AngularJS the angular.module function:

<div ng-app= "MyApp" >...</div><script>var app = Angular.module ("MyApp"</ Script>

The "myApp" parameter corresponds to the HTML element that executes the app.

Now you can add controllers, directives, filters, etc. in the AngularJS application

Add Controller

You can use the ng-controller directive to add an app's controller:

<div ng-app= "myApp" ng-controller= "Myctrl" >+ "+ LastName}}</div><script>  var app = Angular.module ("myApp", []); App.controller (function($scope) {    = "John" ;     = "Doe";}); </script>

Add directive

AngularJS provides a number of built-in instructions that you can use to add functionality to your app.

The complete instruction content can be found in the AngularJS reference manual.

In addition, you can use the module to add your own instructions for your app:

<div ng-app= "MyApp" Runoob-directive></div><script>var app = Angular.module ("MyApp", []); App.directive (function() {    return  {        "I created in instruction builder!")     };}); </script>

Modules and controllers are included in the JS file

Typically AngularJS applications include modules and controllers in JavaScript files.

In the following example, "Myapp.js" contains the definition program for the application module, and the "Myctrl.js" file contains the controller:

<! DOCTYPE html>+ "" + LastName}}</div ><script src= "Myapp.js" ></script><script src= "Myctrl.js" ></script></body></ Html>

3 internal angularjs scscope (scope)

Scope (scope) is the link between HTML (view) and JavaScript (Controller).

Scope is an object that has methods and properties available.

Scope can be applied on views and controllers

How to use Scope

When you create a controller in AngularJS, you can pass $scope object as a parameter:

<div ng-app= "myApp" ng-controller= "Myctrl" > var app = Angular.module (' myApp ', []); App.controller (function($scope) {    = "Volvo ";}); </script

Views (HTML) can obtain these properties when $scope objects are added to the controller.

View, you do not need to add a $scope prefix, just add a property name, such as: {{carname}}.

If you modify the view, the model and controller are updated accordingly.

<div ng-app= "myApp" ng-controller= "Myctrl" >    <input ng-model= "name" >    var app = Angular.module (' myApp ', []); App.controller (function($scope) {    = "Runoob" ;     function () {        = ' Hello ' + $scope. Name + '! ' ;    };}); </script>

Scope scope

It is important to understand the scope you are currently using.

In the above two instances, there is only one scope scope, so it is relatively simple to handle, but in a large project, there are multiple scopes in the HTML DOM, you need to know which scope corresponds to what scope you are using .

<div ng-app= "myApp" ng-controller= "Myctrl" ><ul>    <li ng-repeat= "x in Names" >{{x}}</li> </ul></div><script>var app = Angular.module (' myApp ', []); App.controller (  function($scope) {    = ["Emil", "Tobias", "Linus"];}); </script>

Root scope

All applications have a $rootScopethat can function in all of the HTML elements contained in the ng-app directive.

$rootScope can act on the entire application. is the bridge of scope in each controller. Values defined with Rootscope can be used in each controller .

<div ng-app= "myApp" ng-controller= "Myctrl" >var app = Angular.module (' myApp ', []); App.controller (function($scope, $rootScope) {    = ["Emil" , "Tobias", "Linus";     = "Refsnes";}); </script>

4 in-angularjs dependency injection What is Dependency injection

The explanation on the wiki is that dependency injection (Dependency injection, short di) is a software design pattern in which one or more dependencies (or services) are injected (or passed by reference) into a separate object (or client), It then becomes part of the client state.

This pattern separates the creation of client-dependent behavior, which makes programming loosely coupled and follows the principle of dependency reversal and single responsibility. In direct contrast to the service locator pattern, it allows the client to understand how the client uses the system to find dependencies.

Value

Value is a simple JavaScript object that is used to pass a value to the controller (configuration phase):

//Define a modulevarMainapp = Angular.module ("Mainapp", []);//Create the Value object "Defaultinput" and pass the dataMainapp.value ("Defaultinput", 5);...//injecting "defaultinput" into the controllerMainapp.controller (' Calccontroller ',function($scope, Calcservice, defaultinput) {$scope. number=Defaultinput; $scope. Result=Calcservice.square ($scope. number); $scope. Square=function() {$scope. Result=Calcservice.square ($scope. number); }});

Factory

Factory is a function used to return a value. Created when the service and controller are needed.

Usually we use the factory function to calculate or return a value.

//Define a modulevarMainapp = Angular.module ("Mainapp", []);//Create Factory "MathService" for the product of two numbers provides a method multiply to return multiplication of one numbersMainapp.factory (' MathService ',function() {   varFactory = {}; Factory.multiply=function(A, b) {returnAB}returnfactory;}); //Inject Factory "MathService" into the serviceMainapp.service (' Calcservice ',function(mathservice) { This. Square =function(a) {returnmathservice.multiply (a,a); }});

Provider

Create a service, factory, etc. (configuration phase) through provider in AngularJS.

A factory method get () is provided in Provider, which is used to return value/service/factory

//Define a modulevarMainapp = Angular.module ("Mainapp", []);...//Create a service using provider define a method for calculating the two-number productMainapp.config (function($provide) {$provide. Provider (' MathService ',function() {       This. $get =function() {         varFactory = {}; Factory.multiply=function(A, b) {returnAb; }         returnFactory;   }; });})

Angularjs is designed to overcome the lack of HTML in building applications. HTML is a good declarative language for static text presentation design, but it seems weak to build a Web application. So I did some work (you can also think of it as a gimmick) to get the browser to do what I want.

Getting Started---automating bidirectional data binding Angularjs