JavaScript---Angular and jquery

A  Ngular Three-layer Mode M Model and the Data Data layer, V View View layer, C Controller controller, Program Master Logic , extending HTML through instructions , binding data to HTML through an expression .

View , which is HTML.

Model ( models ), The data that is available in the current view, and the output data in an Expression.

Controller , the JavaScript function, can add or modify Properties.

Angular directive: (the AngularJS directive is an extended HTML attribute with the prefix ng-.) )

AngularJS extends HTMLthrough new attributes called directives .

AngularJS adds functionality to your app with built-in Instructions.

AngularJS allows you to customize the Instructions.

Angular expression:

data-binding Expressions {{firstName}} is through ng-model= "firstName" to Synchronize.

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 .

Example {{5 + 5}} or {{firstName + "" + lastName}}

AngularJS Applications

The AngularJS moduledefines the AngularJS Application.

The AngularJS controllerisused to control AngularJS applications.

The Ng-app directive defines the application and Ng-controller defines the Controller.

AngularJS Module Definition application :

var app = Angular.module (' myApp ', []);

AngularJS Controller is a Control defined by Application of the program :

App.controller (' Myctrl ', function ($scope) {

$scope. firstname= "John";

});

Scope (scope ) is applied in HTML ( view ) and JavaScript ( Controller ) . (angular data-centric, by trying and controller to find data )

Scope is an object that has methods and properties Available. These properties and methods can be used in views and controllers. view, you do not need to add a $scope prefix , just add a property name, such as: {{carname}}.

when you're in AngularJS When you create a controller, you can pass the $scope object as a parameter .

$rootScope ge root scope equivalent to a global variable that can be used in each controller .

Common directives

Ng-app instruction Initializes a AngularJS Application that defines the root element of the AngularJS application .

Ng-bind output data, equivalent to {{}};

Ng-init instruction to initialize the application Data.

Ng-model the directive binds the element value (such as the value of the input field) to the Application.

ng-repeat instructions will repeat a HTML element .

Loop array <p ng-repeat= "x in arr" >{{x}}</p>

Ng-controlle directive defines the application controller

Event directives

Ng-click= ' Toggle () '; Click events

Ng-hide (ng-show) = "myVar" setting HTML element is not visible. False is visible.

$scope. Toggle = function () {

$scope. MyVar =! $scope. myVar; Switch a=!a;

};

ng-disabled   directly binds application data (for example, true or false) to the HTML disabled Property True is unavailable for dimmed,false is available eg:

<p>

<button ng-disabled= "a" > point I !</button>

</p>

<p>

<input type= "checkbox" ng-model= "a" > button

experience: Ng-model the directive binds the element value (such as the value of the input field) to the Application.

</p>

Ng-change events with table cell changes

Filter:

{{a|limitto:2}} Limit Quantity

{{a|lowercase}} lowercase

{{a|currency: ' $ '}} Convert to Currency

HTTP

App.controller ("myapp", function ($scope, $http) {

Fetch Data

$HTTP. get (' URL '). success (function (str) {

$scope. A = str;

});

});

nested inheritance of controllers the child can be scoped with the parent, but the parent cannot use the child and needs to be sent and accepted

Eg:app.controller (' aaa ', function ($scope) { parent

$scope. A = 12;

$scope. $on (' Data ', function (event,data) {

$scope. A = data+1;

});

});

App.controller (' bbb ', function ($scope) { child

$scope. c = function () {

$scope. $emit (' data ', $scope. a); Send to Parent

$scope. $broadcast (' data ', $scope. a); Transfer to Child

});

Minor problem: $setTimeout () Need a bag .

JavaScript---Angular and jquery