ANGULARJS Study Summary

Chapter One simple understanding of ANGULARJS

1. Bidirectional data binding

Ng-model Monitoring Inputs available

The Ng-app attribute declares that all the content it contains belongs to this ANGULARJS application, which is why we nest Angularjs in a Web application
Only elements that are contained by DOM elements with the Ng-app attribute are affected by Angularjs

2. Mvc mode

MVC is a software architecture design pattern that separates performance from user interaction, the model contains the applied data and the methods that interact with the data, and the view
Presented to the user, while the controller is the bridge between the two.

3. Module

Using the Angular.module () method to declare the module, this method can accept two parameters, the first is the module name, the second is a dependency list, which can be injected
To the list of objects in the module.
Angular.module (' MyApp ', []);//This method is used to define the module's
Angular.module (' MyApp '); Get a reference to a module

When developing large applications, we create multiple modules to host business logic

Parameters:

1. Name: string variable for module names

2, requires: Contains a list of string variables, each element is a module name

4. Scope (SCOPE)

Scope is the core foundation of ANGULARJS application

$scope object is where you define the application of business logic, controller methods, and view properties

$rootScope is the closest global scope object in Angularjs

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

$scope object acts as a data model in Angualrjs, but unlike a traditional data model, it is not responsible for processing and manipulating data, just a bridge between views and HTML
Is the glue between the view and the controller

All properties of the $scope can be automatically accessed by the view

You can use $scope's $destory () method to clean up a scope (although Angualrjs cleans up the scope itself)

5. Multiple marks

Multiple tags can be used in templates for ANGULARJS applications

Directives: attributes or element directives that enhance DOM elements to reusable DOM components usually do not create their own $scope, but there are exceptions, such as: Ng-controller,ng-repeat will
Create your own child scopes and attach them to DOM elements

Value binding: Template syntax {{}} can bind an expression to a view

Filters: Functions that can be used in a view for formatting

Form controls: Controls that are used to validate user input

6. Controller

Angularjs allows us to invoke functions on the $scope in the same way that we call normal data in the view.

The main difference between ANGULARJS and other JS frameworks is that the controller is not suitable for performing DOM operations, formatting or data manipulation, and state maintenance operations other than the storage data model
It's just a bridge between the view and the $scope.

ANGULARJS allows you to set any type of data, including objects, on $scope, and also shows the properties of the object in the view.

Controller nesting: (scope includes scope)

7. Expression

Expression properties:

1. All expressions are executed within the scope of their affiliation and have access to $scope

2, if the expression occurs TypeError and Referenceerror will not throw an exception

3. No Process Control function is allowed

4, can accept filter and filter chain

AngularJs will automatically parse the expression during the run of the $digest loop

Angularjs the expression by $parse this internal service, injecting the $parse service into the controller and then invoking it to implement a manual parse expression

8. Filter

Filters are used to format data that needs to be presented to the user, Angularjs has a lot of useful built-in filters, and also provides a convenient way to create filters yourself

Filters can be used in HTML for example: {{123.456789 | number:2}}} filters and parameters are separated by colons; When using multiple filters, use | Short Vertical Line Segmentation

Filter can also be used in JS

Built-in filters provided by Angularjs:

1. Currency: You can format a numeric value in currency format, but you can also customize the currency symbol
{{123 |currency}}

2. Date: You can format dates as you want

Year formatting:

Four-bit: {{today | date: ' YYYY '}}
Two-bit: {{today | date: ' YY '}}
One: {{today | date: ' Y '}}

There are months, dates and other formats see Angularjs authoritative tutorial Page25

3. Filter: You can select a subset from the given array and generate a new array to return.

This filter is often used to filter the elements that need to be displayed

First parameter:
The first parameter of this filter can be a string, an object, or a function to select an element from an array.

String: Returns all elements that contain the string (also available by adding!) Represents all elements that do not contain this string)

For example: {{[' Air ', ' Lerner ', ' likes ', ' Eat ', ' Pizza '] | filter: ' E '}}

Object: Angularjs will compare the properties of the object being filtered with the property of the same name in this object

{{[{
' Name ': ' Ari ',
' City ': ' San Franisco ',
' Favorite food ': ' Pizza '
},
{
' Name ': ' Kate ',
' City ': ' Indian Franisco ',
' Favorite food ': ' Pizza '
}

] | filter:{' favorite food ': ' Pizza '}}

Function: Executes this function on each element, the element that returns a non-false value appears in the new array and returns

(You can also use a custom function to filter, which is defined on $scope)

Second parameter: A way to specify how the expected value is compared to the actual value

4. JSON

JSON filters can convert a JSON or JS object into a string.

{{' name ': ' Ari ', ' City ': ' San Francisco '}| JSON}}

5. LimitTo: A new array or string is generated based on the parameters passed in

Example: Intercept the first three characters of a string
{{San Franisco is very cloudy | limitto:3}}
Truncate the second six characters of a string
{{San Franisco is very cloudy | limitTo-6}}

Returns the first element of an array

{{[' a ', ' B ', ' C ', ' d '] | limitto:1}}

6. Lowercase: convert string to lowercase

{"San Franisco is very cloudy" | lowercase}}

7, Number: Format numbers as text, the second parameter is optional: used to control the number of digits intercepted after the decimal point
{{123.46789 | number:2}}

8. ORDER BY: You can sort the specified array with an expression

First argument: is the predicate used to determine the sort direction of the array (that is, sort by what)

Second parameter: Used to control the direction of the sort (whether reverse)

9. Uppercase: Convert string to uppercase

{"San Franisco is very cloudy" | uppercase}}

10. Custom Filters

Note: Angular.module (' Here can only write Ng-app values ', []);

11. Form Verification

Angularjs is able to use the HTML5 form verification function with its own verification instructions and is very convenient

To use form validation, first make sure that the form has a Name property in its form

If you want to block the browser's default validation behavior for forms, you can add novalidate tags to the form elements

All validation options that can be used on input:

1. Required Fields: Required

2. Min. Length: ng-minlength= ' number of digits '

3, Maximum length: ng-maxlength= ' number of digits '

4. Pattern matching: ng-pattern= ' regular expression '

5, e-mail: type= ' email '

6. Numbers: type= ' number '

7. Url:type= ' URL '

8. Custom Verification: The tenth chapter is about

9. Controlling variables in forms

Based on the properties of the form, you can respond to the form in real time

FormName.inputName.property

Non-modified form: Formname.inputname. $pristine

Modified form: Formname.inputname. $dirty

Legal form: Formname.inputname. $valid

Illegal form: Formname.inputname. $invalid

Error: $error object, which contains all the validation content of the current form, and whether they are valid information, access this property with the following statement

Formname.inputname. $error

Chapter II Introduction of Directives

1. Directives: Customizing HTML elements and attributes

Directives are essentially the way Angularjs extends HTML elements with custom functionality

2. HTML boot

When the browser loads an HTML containing the Angularjs app, we just need a short piece of code to start the Angularjs app.

In HTML, use the built-in instruction Ng-app to mark the root node of the app. This directive needs to be used in the form of attributes, so it can be written anywhere, but it is the most common practice to write to the

Built-in directives are instructions that are packaged inside ANGULARJS. All built-in directives use NG as a prefix for namespaces. To prevent naming conflicts, do not prefix the custom directives with NG.

All of the built-in directives and custom directives are now available in HTML elements. At the same time, based on JavaScript's prototype inheritance mechanism, any instruction inside this root element can access the $rootscope as long as the scope can be accessed.

The accessibility scope here refers to the link to the DOM, which is done in the later life cycle of the instruction.

3. Our first instruction

Let's create a custom directive:<my-directive></my-directive>

Suppose we have created a complete HTML document that contains Angularjs, and the DOM has already identified the root element of the application with the Ng-app directive, and the instruction is invoked when ANGUALRJS compiles the HTML.

The calling instruction means the JavaScript code associated with the execution of the instruction, which we write with the instruction definition:

The definition of the mydirective directive is this:

Angular.module (' myApp ', [])

. dirctive (' mydirective ', function () {

return {

Restrict: ' E ',

Template: ' <a href= ' http://google.com ' >click me to go to gooogle</a> '

}

})

Through the. Directive () method in the Angularjs module API, we can register a new instruction by passing in a string and a function. Where the string is the name of the instruction, the instruction name should be the hump naming style, the function used to return an object.

Because we used the My-directive Declaration directive in HTML, the directive definition must be named mydirective

The object returned by the directive () method contains methods and properties that are used to define and configure directives. In order to grasp the simple attribute definition as soon as possible, we only used the restrict and template two settings to define the instruction.

Open the chrome developer tool and see the code generated by Angularjs after the page is loaded and the instructions are called, Angularjs the generated code for rendering to Chrome

By default, Angualrjs nested the HTML code generated by the template in custom labels <my-directive> interiors.

Here are some new settings to add to the directive definition: We can remove the custom label from the generated Dom completely, leaving only the links generated by the template. This effect can be achieved by setting replace to true:

Angular.module ("myApp", [])
. directive ("Mydirective", function () {
    return {
        Restrict: ' E ',
Replace:true,
        Template: ' <a href= ' http://Google.com ' >click me to go to google</a> '
    };
});
Looking again at the generated code, you will see that the original DOM instructions are gone, only the HTML code we wrote in the template. Instead of nesting inside, the Replace method replaces the directive declaration with a custom element.
We call these custom elements created as directives (created with the Directive () method), because in fact the instructions do not need to create a new custom element.
The following are used to declare the legal format of the previously created Directive:
  <my-directive></my-directive>
  <div my-directive></div>
  <div class= "My-directive" ></div>

Hello hello hello

ANGULARJS Study Summary