Angularjs Summary One

# ANGULARJS Summary One #

----------

* * What is angularjs**

A client-side technology written entirely using JavaScript. With other historic web technologies (HTML, CSS
and JavaScript), making Web application development easier and faster than ever.

Angularjs is primarily used to build single-page Web applications. It does this by increasing the developer and common Web application development tasks
Level of abstraction, making it easier to build interactive, modern Web applications.

Angularjs makes it easy to develop Web applications and reduces the difficulty of building complex applications. It provides the development
A number of advanced features that are often used in modern web applications, such as:

Decoupling the application service data model and view AJAX service Dependency Injection browsing history testing

What's the difference with something else?
In other JavaScript frameworks, we are forced to extend from custom JavaScript objects and manipulate the DOM from outside to inside.

And Angularjs is enhanced by native Model-view-controller (MVC, Model View, controller) capabilities.
Html. The results show that this option can quickly and pleasantly build impressive and expressive client applications.

With it, developers can encapsulate part of a page as an application without forcing the entire page to be developed using ANGULARJS. This trait can be very useful in some situations, such as if your workflow already contains another frame, or if you just want a part of the page to be dynamic, and the rest is static or controlled by other JavaScript frameworks.

----------

* * Introductory Case: * *

<! DOCTYPE html>

<title></title>

<script type= "Text/javascript" src= "js/angular1.2.3.js" ></script>//Loading scripts
<body >
hello{{"World"}}//Use the contents of the double curly brace tag {{}} is the expression that is bound in the greeting, and this expression is a simple string ' world '
</body>

----------

* * Case: Enter the information in the input box and show it dynamically: the function of displaying it: data binding * *

<input ng-model= "name" type= "text" placeholder= "Please enter name" >
Hello{{name}}//$scope. Name=input.val ();

----------

* * Data binding: * *

In fact, the example above is that we use the Ng-model directive to bind the Name property in the internal data model object ($scope) to the text input field
A data model object is a $scope object. $scope object is a simple JavaScript object in which properties can be accessed by the view or interact with the controller.

Bidirectional data binding (bi-directional) means that if a view changes a value, the data model observes the change through a dirty value check, and if the data model changes a value, the view will also vary depending on the
New rendering.

It creates a live template instead of a view, instead of updating the DOM after merging the data into the template. The values in any of the standalone view components are dynamically replaced. This function can be said to be one of the most important functions in ANGULARJS

To do this, simply reference angular.js in an HTML page and explicitly set the Ng-app property on a DOM element. The Ng-app property declares that all the content it contains belongs to this ANGULARJS application, which is also
Why you can nest Angularjs apps in your Web App. Only elements that are contained by DOM elements with the Ng-app attribute are affected by ANGULARJS.

* Case: *

<div ng-app>//There's no binding here on the HTML top.
<input ng-model= "name" type= "text" placeholder= "Please enter name" >
<span >hello{{name}}</span>
</div>

----------

* * NOTE: * *

Analytic---MVC pattern for angular application

*v---template *

Templates are files that you write in HTML and CSS to show the view of your app. You can add new elements and attribute tags to html as the Angularjs compiler
's instructions. The ANGULARJS compiler is fully extensible, meaning that by angularjs you can build your own HTML markup in HTML! ---and HTML css blending

*C---Controller *

The application logic and behavior are the controllers that you define with JavaScript. Angularjs Unlike standard AJAX applications, you do not need to write additional listening
or DOM controllers, as they are already built into the ANGULARJS. These features make your application logic easy to write, test, maintain, and understand.

*M---model *

A model is an extension of the properties of an object from the Angularjs scope. It is not important that the data in the model is a JavaScript object, an array, or a basic type.
It is important that they belong to the Angularjs scope object.

Drawing Comprehension---Two scenarios: two views common one controller so solve? Different views with different controllers
Automatic data binding allows us to interpret the view as a mapping of model state. When the client's data model changes, the view reflects these changes, and does not need to write any custom code, it can work

**ng-app declares that all the elements it contains belong to the * *

**ANGULARJS application, the DOM element on the * *

**ng-controller declares that all elements it contains belong to a controller * *

----------

* * Case: Clock case * *

<div ng-app>
<div ng-controller= "Mycontroller" >
</div>
</div>
<script type= "Text/javascript" >
function Mycontroller ($scope, $timeout) {
var updateclock = function () {
$scope. Clock = new Date ();
$timeout (function () {
Updateclock ();
}, 1);
};
Updateclock ();
};
</script>

----------

* * Controller Case 2:**

<div ng-controller= ' Hellocontroller ' >
<p>{{test.text}}, world</p>
</div>
<script type= "Text/javascript" >
function Hellocontroller ($scope) {
$scope. Test = {text: ' Hello World '};
}
</script>

----------

* * Module Definition * *

In fact, we've already used a lot of modules in Nodejs.
In Angularjs, a module is the most important way to define an application. The module contains the main application code. A Web application can contain multiple modules, each of which contains code that defines the specific functionality.

ANGULARJS allows us to declare a module using the **angular.module () * * method, which accepts two parameters, the first is the name of the module, and the second is a dependency list, which is a list of objects that can be injected into the module.
--**angular.module (' app ', []) * *;
If this method is called with only one parameter passed, then it is not a declaration but a reference to the module
**angular.module (' app ') * *; How the module is called

----------

* * Simple TEST: * *

<div>
<input ng-model= "Test" >//Note here the module---Notice that it is hanging underneath the root scope (rootscope), so everything under Ng-app can be obtained.
<p>{{test}},hello</p>//Call the module here
</div>

----------

* * Scope: * *

Scope is a core component of the entire ANGULARJS
$scope objects are places that define the application of business logic, controller methods, and view properties.

Angularjs the root Ng-app element is bound to $rootscope when the view is started and generated. $rootScope is the topmost of all $scope objects.

* * NOTE: * * $rootScope is angularjs closest to a global object, so it's not a good thing to bind a lot of business logic on it

$scope object is a normal JavaScript object, and we can modify or add properties on it at will.

$scope Objects act as data models in Angularjs, but unlike traditional data models, $scope is not responsible for processing and manipulating data, it is just a bridge between view and HTML, which is the transmitter between the view and the controller.

<H1 ng-controller= "Mycontroller" >{{name}}
<script type= "Text/javascript" >
function Mycontroller ($rootScope) {
$rootScope. Name = "Zhangsan";
}
</script>

----------

<H1 ng-controller= "Mycontroller" >{{name}}
<script type= "Text/javascript" >
function Mycontroller ($scope) {//does not set the variable to keep up, but instead creates an isolated sub-$scope object with the controller, and sets it above it
$scope. Name = "Zhangsan";
}
</script>

----------

* * Basic function of scope: * *

Provide observers to monitor changes in the data model;
The change of data model can be notified to the whole application, even the components outside the system;
can be nested, to isolate business functions and data;
Provides an execution environment that is required for an expression to perform an operation.

Most of the work in developing ANGULARJS applications is building scopes and their associated functions

----------

Angularjs Summary One