Shulou(Shulou.com)06/03 Report--

What are the practical basic knowledge of AngularJS? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

I. AngularJS instructions and expressions

[AngularJS common instructions]

1. Ng-app: declare the area under the jurisdiction of Angular, which is generally written on body or HTML. In principle, there is only one page.

2. Ng-model: bind the element value (such as the value of the input field) to the application's variables.

Eg:

3. Ng-bind: bind the data in the application variables to the HTML view and use expressions instead.

Eg:

Equivalent to {{name}}

4. Ng-init: initializes AngularJS application variables.

Eg:

5. Expression: {{}} binding expression, which can contain text, operators and variables.

But the expression will see {{}} as soon as the page loads, so you can use ng-bind= "" instead.

Eg: {{5 + "" + 5 +', Angular'}}

[basic concepts]

Directive: in AngularJS, functions are provided by extending the properties of HTML.

So, the new attribute at the beginning of ng- is called an instruction.

II. Scope in MVC in AngularJS

[MVC three-tier architecture]

1. Model (model):

The part of an application used to process data. Save or modify data to databases, variables, etc. The Model in AngularJS specifically refers to data.

View (view): the page that the user sees to display the data.

Controller (controller): the part of an application that handles user interaction. Responsible for reading data from the view, controlling user input, and sending data to the model.

2. Working principle:

The user sends a request from the view layer, and the controller receives the request and forwards it to the corresponding model for processing. After the model processing is completed, the result is returned to controller and fed back to the user at the View layer.

3. To create an Angular module, that is, the part bound by ng-app, you need to pass two parameters:

① module name: that is, the name that ng-app needs to bind, ng-app= "myApp"

② array: the name of the module that needs to be injected and does not need to be nullable.

Eg:var app= angular.module ("myApp", [])

On the Angular module, to create a controller Controller, you need to pass two parameters.

The name of the ① Controller, which is the name that ng-controller needs to bind. Ng-controller= "myCtrl"

Constructor of ② Controllerd: the constructor can pass in multiple parameters, including $scope/$rootScope and various system built-in objects

[scope in AngularJS]

① $scope: local scope, properties and methods declared on $scope can only be used in the current Controller

② $rootScope: root scope, properties and methods declared on $rootScope

Can be used in any area contained in ng-app (whether it is the same as Controller or not in the scope of Controller)

> if you do not use $scope to declare variables, but directly use ng-model binding in HTML, the variable scope is:

1. If ng-model is in a ng-controller, this variable will be bound to $scope of the current Controller by default.

2. If ng-model is not in any ng-controller, this variable is bound to $rootScope.

3. AngularJS filter

In AngularJS, filters can be added to expressions and instructions using a pipe character (|).

> > system built-in filter:

Currency: formats the number into currency format.

Filter: select a subset from the array items.

Lowercase: the format string is lowercase.

OrderBy: arranges arrays according to an expression.

Uppercase: the formatted string is uppercase.

Eg:

{{"aBcDeF" | uppercase}}

{{"aBcDeF" | lowercase}}

{{123456 | currency}}

[custom filter]

.filter ('reverse',function () {/ / you can inject the dependency return function (text) {if (! angular.isString (text)) {return "you entered is not a string!" } else {return text.split (") .reverse () .join (");})

4. Http & & select & & DOM operation in AngularJS

1. Http in AngularJS

Http is a core service in AngularJS that reads data from remote servers.

2. Select in AngularJS

① uses an array as the data source, where x represents each item in the array.

The default binds x directly to the value of option, while the content displayed by option is shown by the previous x for... Decide.

Eg:

② uses objects as the data source, where (XMagol y) represents the key-value pair, x is the key, and y is the value.

By default, the value y is bound to the value of option, and the content displayed by option is shown by the preceding x for... Decide.

Eg:

3. DOM operation in AngularJS

① ng-disabled= "true/false"

The control is disabled when true is passed in. Enabled when false is passed in.

Whether to agree or not

Xiao Xi is so cute!

Click me!

② ng-show

Displayed when incoming true is hidden by default

Whether or not

Show?

Click me!

③ ng-hide

The default shows that the incoming true is hidden

Is it hidden?

Click me!

④ ng-click

Defines click events in AngularJS.

Only properties and methods that are bound in the Angular scope can be triggered.

Click me!

{{count}}

Tell me how you feel!

DOM Action Appendix:

Eg:

Import the JS file Angular.jskeeper first!

JS Code:

Angular.module ("app", []) .controller ("ctrl", function ($scope,$rootScope) {$scope.count = 10 politics scope.func = function () {alert ("Xiao Xi is so cute!") ;})

5. Form validation in AngularJS

1. Common validation operations in the form:

$dirty: the form has a record of filling in

$valid: legal content of the field

$invalid: the field content is illegal

$pristine: no record is filled in the form

$error: error message with failed form validation

2. When verifying, you need to give the form and the input to be verified, and set the name attribute.

After setting name for form and input, the form form information will be bound to the $scope scope by default, so you can use formName.inputName.$ verification operation to get the verification result.

Eg:

The formName.inputName.$dirty= "true" form has been filled out

Illegal input of formName.inputName.$invalid= "true" form

FormName.inputName.$error.required= "true" form is required but not completed

The verification supported by $error is: required/minlength/maxlength/pattern/email/number/data

/ url, etc.

3. To avoid conflicts, for example, when using type= "email", H5 will also perform verification operations.

If you only want to use AngularJS authentication, you can use properties to disable H5's native authentication feature.

6. Animation in AngularJS

Use animation in AngularJS:

Provides animation effects that can be used with CSS.

1. AngularJS needs to introduce angular-animate.js library to use animation!

2. If there is no custom module (ng-app) in the page, you can directly bind the system module ng-app= "ngAnimate"

If you already have a custom module on the page, you can inject the "ngAnimate" module after the custom module.

Eg:angular.module ("app", ["ngAnimate"])

3. When the relevant instruction is called to control the element to be hidden, the corresponding class class will be added automatically.

Ng-show/ng-hide removes / adds ng-hide

For other instructions such as ng-if/ng-switch/ng-repeat, you need to set the class style after display and after hiding respectively.

After display: .ng-enter-active,.ng-leave {}

After hiding: .ng-enter,.ng-leave-active {}

7. Routing in AngularJS

1. Load the js file for routing: angular-route.js.

2. It includes the ngRoute module as the dependent module of the main application module.

Eg:angular.module ("app", ["ngRoute"])

3. Change the hyperlink to be formatted:

Eg:page1

4. In config, inject $routeProvider to configure routing:

$routeProvider

.when ('/', {template:' this is the home page'})

.when ('/ page1', {template:' this is the page1 page'})

.when ('/ page2', {template:' this is the page2 page'})

.when ('/ page3', {template:' this is the page3 page'})

.otherwise ({redirectTo:'/'})

})

5. Add a ng-view in the appropriate place on the page to host the open page

[optional attributes in routing parameter object]

1.tempalte: custom HTML template, which will be loaded in ng-view

2.tempalteUrl: import external HTML templates. In order to avoid conflicts with external HTML, you only need to keep the internal code of body.

3.redirectTo: redirect to a page, usually used in .otherwise ()

4.controller: generate a new scope by executing the controller function on the template

The answers to the questions about the practical basic knowledge of AngularJS are shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.