How to learn AngularJs? The most comprehensive introduction to angularjs knowledge

This article introduces a detailed explanation of how to learn angularjs. There are many knowledge points in it that you may have forgotten. Read it now to recall it. Let’s start reading this article now

Angular Js is a Javascript framework, which is a library written in Javascript.
AngularJS module (Module) defines AngularJS applications.
AngularJS Controller (Controller) is used to control AngularJS applications.
The ng-app directive defines the application, and ng-controller defines the controller.
AngularJS extends HTML
AngularJS extends HTML through ng-directives. The
ng-app directive defines an AngularJS application. The
ng-model directive binds element values ​​(such as the value of an input field) to the application. The
ng-bind directive binds application data to an HTML view.
AngularJS uses expressions to bind data to HTML
What is AngularJS?
AngularJS makes it easier to develop modern single page applications (SPAs: Single Page Applications).
AngularJS Binds application data to HTML elements.
AngularJS can clone and repeat HTML elements.
AngularJS can hide and show HTML elements.
AngularJS can add code "behind" HTML elements.
AngularJS supports input validation.
AngularJS directives are HTML attributes prefixed with ng.
ng-init directive initializes AngularJS application variables.
HTML5 allows extended (homemade) attributes, starting with data-.
AngularJS attributes start with ng-, but you can use data-ng- to make the page valid for HTML5.
AngularJS expressions are written within double curly braces: {{ expression }}.
AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.
AngularJS will "output" 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 expression and JavaScript expression
Similar to JavaScript expressions, AngularJS expressions can contain letters, operators, and variables.
Unlike JavaScript expressions, AngularJS expressions can be written in HTML.
Unlike JavaScript expressions, AngularJS expressions do not support conditional judgments, loops and exceptions.
Unlike JavaScript expressions, AngularJS expressions support filters.


AngularJS Directives


AngularJS extends HTML with a new attribute called directives.
AngularJS adds functionality to your application through built-in directives.
AngularJS allows you to customize directives.
AngularJS directives are extended HTML attributes, prefixed with ng-. The
ng-app directive initializes an AngularJS application. The ng-app directive tells AngularJS that the

element is the "owner" of the AngularJS application.
ng-init directive initializes application data. The
ng-model directive binds element values ​​(such as the value of an input field) to the application.


ng-app Directive
The ng-app directive defines the root element of an AngularJS application. The
ng-app directive will automatically boot (automatically initialize) the application when the web page is loaded.
Later you will learn how ng-app connects to a code module through a value (such as ng-app="myModule").


ng-init directive
The ng-init directive defines initial values ​​for AngularJS applications.
Normally, ng-init is not used. You will use a controller or module in its place.


ng-model Directive
ng-model Directive Binds HTML elements to application data.
ng-model directive is used to bind application data to HTML controller (input, select, textarea) values.
The ng-model directive can also:
Provide type validation (number, email, required) for application data.
Provide status (invalid, dirty, touched, error) for application data.
Provide CSS classes for HTML elements.
Bind HTML elements to HTML forms.


ng-repeat directive
ng-repeat directive will clone the HTML element once for each item in the collection (array).


Create custom directives
In addition to AngularJS’s built-in directives, we can also create custom directives.
You can use the .directive function to add custom directives.
To call a custom instruction, the custom instruction name needs to be added to the HTML element.
Use camelCase to name a directive, runoobDirective, but you need to split it with - when using it, runoob-directive:

Restricted use
You can restrict your directives to only pass in specific ways to call.
restrict values ​​can be one of the following:
E as an element name use
A as an attribute use
C as a class name use
M as an annotation Use
restrict Default values ​​are E and A, that is, the instruction can be called through the element name and attribute name.


AngularJS Controller
AngularJS applications are controlled by controllers. The
ng-controller directive defines an application controller.
Controllers are regular JavaScript objects created by the standard JavaScript object constructor.


AngularJS Filters
AngularJS filters can be used to transform data:
Filter
Description
currency
Formats numbers into currency format.
filter
Select a subset from array items.
lowercase
Format strings to lowercase.
orderBy
Arrange the array according to an expression.
uppercase
Format string to uppercase.
Filters can be added to expressions via a pipe character (|) and a filter.


AngularJS Service
In AngularJS you can create your own service or use built-in services.


What is service?
In AngularJS, a service is a function or object that can be used in your AngularJS application.
AngularJS has more than 30 built-in services.
There is a $location service, which can return the URL address of the current page.


$http is a core service in AngularJS, used to read data from remote servers.


The ng-repeat directive loops the HTML code through an array to create a drop-down list, but the ng-options directive is more suitable for creating a drop-down list. It has the following advantages:
Options using ng-options An object of ng-repeat is a string.


The ng-show directive hides or shows an HTML element.
The ng-disabled directive binds the application data "mySwitch" to the disabled attribute of HTML.
ng-model directive binds "mySwitch" to the content (value) of the HTML input checkbox element.
If mySwitch is true, the button will be disabled:
The ng-hide directive is used to hide or show HTML elements.

ng-click directive defines AngularJS click events.

Hide HTML elements
The ng-hide directive is used to set whether the application part is visible.
ng-hide="true" Sets the HTML element to be invisible.
ng-hide="false" Sets the HTML element to be visible.

ng-show directive can be used to set whether a part of the application is visible.
ng-show="false" can set HTML elements to be invisible.
ng-show="true" can set HTML elements to be visible.


AngularJS Modules

Modules define an application.
Modules are containers for different parts of your application.
Modules are containers for application controllers.
Controllers usually belong to a module.


Global functions should be avoided in JavaScript. Because they can easily be overwritten by other script files.
AngularJS module allows all functions to be scoped under this module to avoid this problem.


HTML Control
The following HTML input elements are called HTML controls:
input element
select element
button element
textarea element


The preferred style sheet for AngularJS is Twitter Bootstrap. Twitter Bootstrap is currently the most popular front-end framework.

AngularJS Animation
AngularJS provides animation effects that can be used with CSS.
Using animation in AngularJS requires the introduction of the angular-animate.min.js library.

What does ngAnimate do?
ngAnimate models can add or remove classes.
ngAnimate model cannot animate HTML elements, but ngAnimate will monitor events, such as hiding and displaying HTML elements. If an event occurs, ngAnimate will use a predefined class to animate HTML elements.
AngularJS Add/remove class instructions:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show and ng-hide directives are used to add or remove the value of ng-hide class.
Other instructions will add the ng-enter class when entering the DOM, and the ng-leave attribute will be added when removing the DOM.
When the position of the HTML element changes, the ng-repeat directive can also add the ng-move class.
In addition, after the animation is completed, the HTML element's class collection will be removed. For example: The ng-hide directive will add the following class:
ng-animate
ng-hide-animate
ng-hide-add (if the element will be hidden)
ng-hide-remove (if The element will be shown)
ng-hide-add-active (If the element will be hidden)
ng-hide-remove-active (If the element will be shown)


value
Value Is a simple javascript object used to pass values ​​to the controller (configuration phase):


factory
factory is a function used to return a value. Created when needed by service and controller.
Usually we use the factory function to calculate or return values.


provider
Create a service, factory, etc. (configuration phase) through provider in AngularJS.
Provider provides a factory method get(), which is used to return value/service/factory.


constant
constant (constant) is used to pass values ​​during the configuration phase. Note that this constant is not available during the configuration phase.
mainApp.constant("configParam", "constant value");


AngularJS routing
AngularJS routing allows us to access different content through different URLs.
A multi-view single page web application (single page web application, SPA) can be implemented through AngularJS.
Usually our URL is in the form of http://runoob.com/first/page, but in single-page web applications AngularJS is implemented through the # tag.


The config function of the AngularJS module is used to configure routing rules. By using configAPI, we request $routeProvider is injected into our configuration function and use $routeProvider.whenAPI to define our routing rules.
$routeProvider provides us with the when(path,object) & otherwise(object) function to define all routes in order. The function contains two parameters:
The first parameter is the URL or URL regular rule.
The second parameter is the routing configuration object.

Route setting object
AngularJS routing can also be implemented through different templates.
$routeProvider.when The first parameter of the function is the URL or URL regular rule, and the second parameter is the routing configuration object.


template:
If we only need to insert simple HTML content into ng-view, use this parameter:
.when('/computers',{template:'This Is the computer category page'})
templateUrl:
If we only need to insert the HTML template file in ng-view, use this parameter:
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});


The above code will get the contents of the views/computers.html file from the server and insert it into ng-view.


controller:
function, string or array type, the controller function executed on the current template to generate a new scope.


controllerAs:
string type, specify an alias for the controller.


redirectTo:
The redirected address.


resolve:
Specify other modules that the current controller depends on. ​

This article ends here (if you want to see more, go to the PHP Chinese website AngularJS User Manual to learn). If you have any questions, you can leave a message below.

The above is the detailed content of How to learn AngularJs? The most comprehensive introduction to angularjs knowledge. For more information, please follow other related articles on the PHP Chinese website!