Summary of common knowledge for getting started with AngularJS

Preface

Let’s learn about AngularJS with you today...

AngularJS uses new attributes and expressions The format extends HTML.

AngularJS can build a single page application.

AngularJS is very easy to learn.

## 1. AngularJS instructions and expressions

【AngularJS common instructions】
1. ng-app: declare that Angular is governed area is generally written on the body or HTML. In principle, there is only one on a page.
2. ng-model: Bind the element value (such as the value of the input field) to the application variable.
#eg:
3. ng-bind: Put the Data is bound to the HTML view and can be replaced by expressions.
eg:

is equivalent to

{{name}}

4. ng-init: Initialize AngularJS application variables.
eg:
5. Expression: {{} }Bind expression, which can contain literals, operators and variables.
But the expression will see {{}} when the web page is loaded, so you can use ng-bind="" instead.
eg:{{ 5 + "" + 5 + ',Angular' }}

[Basic concepts]
Directive: In AngularJS, functionality is provided by extending HTML attributes.
Therefore, the new attributes starting with ng- are called instructions by us.

[MVC three-tier architecture]
1. Model:
The part of the application used to process data. (Save or modify data to database, variables, etc.). Model in AngularJS specifically refers to: data.
View (View): The page that the user sees for displaying data.
Controller: The part of the 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. After receiving the request, the controller forwards it to the corresponding model for processing, and returns after the model processing is completed. The result is given to the controller and fed back to the user at the View layer.

3. Create an Angular module, which is the part bound by ng-app. Two parameters need to be passed:
①Module name: the name that ng-app needs to be bound to, ng-app="myApp"
②Array: the name of the module that needs to be injected, not required null.
eg:var app= angular.module("myApp",[]);

On the Angular module, create a controller Controller, required Pass two parameters.
①Controller name, that is, the name that ng-controller needs to be bound to. ng-controller="myCtrl"
②Controllerd's constructor: 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 included in ng-app (whether with Controller or not, Or whether it is in the scope of the Controller)

##>>>If $scope is not used to declare variables, and the variable scope bound using ng-model directly in HTML is :
1. If ng-model is in an ng-controller, this variable will be bound to the $scope of the current Controller by default;
2. If ng-model is not in any ng-controller, this variable will be bound to $rootScope.

# 2. Scope in MVC in AngularJS

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

>>>System built-in filter:
currency: Format numbers into currency format.
filter: Select a subset from array items.
lowercase: Format the string to lowercase.
orderBy: Arrange the array according to an expression.
uppercase: Format the string to uppercase.

eg:

{{"aBcDeF"|uppercase}}

{{"aBcDeF"|lowercase}}

{{123456|currency}}

【Custom filter】

1 .filter('reverse',function(){ //可以注入依赖2 return function(text){3 if(!angular.isString(text)){4 return "您输入的不是字符串！"5 }else{6 return text.split("").reverse().join("");7 }8 }9 })

##3. AngularJS filter

##

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

2. Select in AngularJS
① Use an array as the data source, where x represents each item of the array.
By default, x will be directly bound to the value of option, and the content displayed by option is determined by the previous x for....
eg:

② Use objects as data sources, where (x, y) represents key-value pairs, x is the key and y is the value.
By default, the value y will be bound to the value of option, and the content displayed by option is determined by the previous x for....
eg:

3. DOM operations in AngularJS
①ng-disabled="true/false"
When passing When true, the control is disabled. When false is passed in, enabled.

Do you agree
Xiaoxi is so cute!

Click me!

②ng-show
Displayed by default when true is passed in

Whether
show?

Click me!

③ng-hide
Default Show that the incoming true is hidden

Is it hidden?

Click me!

##④ng-click
defines the click event in AngularJS .
Only properties and methods bound in the Angular scope can be triggered.

Click me!

{{ count }}

 

DOM操作附录：
eg:
先导入JS文件angular.js！！！

<script src="libs/angular.js?1.1.11"></script>

JS代码：

1 angular.module("app",[])2 .controller("ctrl",function($scope,$rootScope){3 $scope.count = 10;4 $scope.func = function(){5 alert("小希真萌！");6 }7 })

 

4. http && select && DOM operations in AngularJS

五、AngularJS中的表单验证

1、表单中常见的验证操作：
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录
$error:表单验证不通过的错误信息

2、验证时需给表单及需要验证的input，设置name属性；
给form及input设置name后，会将form表单信息，默认绑定到$scope作用域中，故可以使用formName.inputName.$验证操作 得到验证结果；
eg:
formName.inputName.$dirty="true" 表单被填写过
formName.inputName.$invalid="true" 表单输入不合法
formName.inputName.$error.required="true" 表单必填但未填
$error支持的验证有：required/minlength/maxlength/pattern/email/number/data
/url等……

3、为避免冲突，例如使用type="email"时，H5也会进行验证操作。
如果只想使用AngularJS验证，可以使用

属性，禁用H5自带验证功能。

 

六、AngularJS中的动画 

Using animation in AngularJS:
provides animation effects and can be used with CSS.

1. To use animation in AngularJS, you need to introduce the angular-animate.js library!

2. If there is no custom module (ng-app) in the page, you can directly bind the system module ng-app="ngAnimate";
If there is already a custom module in the page, you can inject the "ngAnimate" module after the custom module.
eg:angular.module("app",["ngAnimate"])

3. When the relevant instructions are called to control the display and hiding of elements, it will Automatically add the corresponding class;
ng-show/ng-hide will remove/add ng-hide
ng-if/ng-switch/ng- For other instructions such as repeat, you need to set the class style after display and hide respectively;
After display: .ng-enter-active,.ng-leave{}
After hiding: .ng-enter,.ng-leave-active{}

1. Load the js file that implements routing: angular-route.js.

2. Contains the ngRoute module as a dependent module of the main application module.
eg:angular.module("app",["ngRoute"])

3. Change the hyperlink to a path format:
eg:page1

4. In config, inject $routeProvider for routing Configuration:
$routeProvider
.when('/',{template:'This is the home page'})
. when('/page1',{template:'This is page1'})
.when('/page2',{template:'This is page2'})
.when('/page3',{template:'This is page3 page'})
.otherwise({redirectTo:'/'});
})
5. Add ng-view at the appropriate position on the page to host the opened page

[Optional attributes in routing parameter object]
1. tempalte: Custom HTML template, which will be loaded in ng-view
2.tempalteUrl: Import the external HTML template. In order to avoid conflict with the external HTML, you only need to keep the code inside the body;
3.redirectTo: Redirect to a certain page, generally used in .otherwise();
4.controller: The controller function executed on the current template , generate a new scope

Today’s theoretical knowledge will be shared here first, I hope it can help you~~~ I am a newbie, thank you for your support!

Author: Xizhao Hope
Source:

##7. Routing in AngularJS

The above is the detailed content of Summary of common knowledge for getting started with AngularJS. For more information, please follow other related articles on the PHP Chinese website!