链接

https://www.w3schools.com/angular/

基础

directives, expressions, filters, modules, and controllers
Events, DOM, Forms, Input, Validation, Http

历史

AngularJS version 1.0 was released in 2012.

工作原理

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

通过指令拓展html属性
ng-app directive defines an AngularJS application.

ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

ng-bind directive binds application data to the HTML view.

ng-init directive initializes AngularJS application variables.

使用表达式绑定数据到html
AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.


First Name: 

Last Name: 



Full Name: {{firstName + " " + lastName}}

AngularJS Expressions

{{ expression }} 或者 ng-bind="expression"

object
ng-init="person={firstName:'John',lastName:'Doe'}"
{{ person.lastName }}

Arrays
ng-init="points=[1,15,19,2,40]"
{{ points[2] }}

AngularJS Modules

The module is a container for the application controllers.

AngularJS Directives

AngularJS lets you extend HTML with new attributes called Directives.

The ng-app Directive
root element
auto-bootstrap
The ng-init Directive
initial values
The ng-model Directive
bind html values to data
Create New Directives
js 中 camel case name
html 中 use - separated name


app.directive("w3TestDirective", function() {
    return {
        template : "Made by a directive!"
    };
});

使用范围:
invoke a directive by using: Element; Attribute; Class; Comment;

添加限制范围：
can restrict your directives to only be invoked by some of the methods.

 /* 
  E for Element name
  A for Attribute
  C for Class
  M for Comment
*/

return { restrict : "EA",
    template : "Made by a directive!"
};

AngularJS ng-model Directive

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

Validate User Input


    Email:
    
    Not a valid e-mail address

Application Status
The ng-model directive can provide status for application data (invalid, dirty, touched, error):


    Email:
    
    Status
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}

CSS Classes
The ng-model directive provides CSS classes for HTML elements, depending on their status:




    Enter your name:

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/1643592-36b4782146a0e4f1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

The ng-model directive adds/removes the following classes, according to the status of the form field:
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

数据绑定

什么是 Data Model

AngularJS applications usually have a data model. The data model is a collection of data available for the application.

什么是 HTML View

The HTML container where the AngularJS application is displayed, is called the view.

什么是 Two-way Binding

Data binding in AngularJS is the synchronization between the model and the view.

When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

AngularJS Controllers

AngularJS controllers control the data of AngularJS applications.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

应用执行流程

AngularJS应用程序由ng-app =“myApp”定义。应用程序在

中运行。

ng-controller =“myCtrl”属性是一个AngularJS指令。它定义了一个控制器。

The myCtrl function is a JavaScript function.

AngularJS will invoke the controller with a $scope object.
AngularJS将使用$ scope对象调用控制器。

In AngularJS, $scope is the application object (the owner of application variables and functions).
在AngularJS中，$ scope是应用程序对象（应用程序变量和函数的所有者）。

The controller creates two properties (variables) in the scope (firstName and lastName).

The ng-model directives bind the input fields to the controller properties (firstName and lastName).
ng-model指令将输入字段绑定到控制器属性（firstName和lastName）。

AngularJS Scope

The scope is the binding part between the HTML (view) and the JavaScript (controller).

The scope is an object with the available properties and methods.

The scope is available for both the view and the controller.

Understanding the Scope

If we consider an AngularJS application to consist of:

View, which is the HTML.
Model, which is the data available for the current view.
Controller, which is the JavaScript function that makes/changes/removes/controls the data.
Then the scope is the Model.

The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.

AngularJS Filters

Filters can be added in AngularJS to format data.

** Filters can be added to expressions by using the pipe character |, followed by a filter. **

Paste_Image.png

The name is {{ lastName | lowercase }}

// The orderBy filter sorts an array:


// Return the names that contains the letter "i":

Custom Filters


    
        {{x | myFormat}}

AngularJS Services

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.

AngularJS has about 30 built-in services. One of them is the $location service.

The $location service has methods which return information about the location of the current web page:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

built-in services;

$location; $http; $setTimeout; $setInterval; ...

Create Your Own Service

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

** Once you have created a service, and connected it to your application, you can use the service in any controller, directive, filter, or even inside other services.**

angularjs1

链接

基础

历史