AngularJS实用基础知识—入门必备

style=”font-family: 楷体; font-size: 18pt; color: #0000ff”>前言

style=”font-family: 金鼎文; font-size: 14pt”>明日来和大家学习一下AngularJS……

  AngularJS
通过新的性质和表明式扩充了 HTML。

  AngularJS
能够构建叁个单一页面应用程序。

  AngularJS
学习起来10分简单。

 

 

一、AngularJS指令与表达式

【AngularJS常用命令】
一 、ng-app:注脚Angular所管辖的区域,一般写在body或HTML上,原则上二个页面只有3个。
二 、ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中。
eg:

<input type="text" ng-model="name"/>

③ 、ng-bind:把应用程序变量中的数据绑定到HTML视图中,可用表达式替代。
eg:

<div id="div1" ng-bind="name"></div>

等效于

<div id="div1" >{{name}}</div>

四 、ng-init:初叶化
AngularJS应用程序变量。
eg:

<body data-ng-app="" ng-init="name=123">

5、表达式:{{}}绑定说明式,能够分包文字,运算符和变量。
然则表明式在网页加载须臾间会看出{{}},所以可以用ng-bind=””替代。
eg:

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

 

【基本概念】
命令:AngularJS中,通过扩充HTML的天性提供成效。

因此,ng-起头的新属性,被大家成为指令。

 

二、AngularJS中的MVC中的作用域

【MVC三层架构】
1、model(模型):
应用程序中用于拍卖数量的一部分。(保存或修改数据到数据库、变量等)。AngularJS中的Model特指的是:数据。
View(视图):用户看到的用于展示数据的页面。
Controller(控制器):应用程序中处理用户交互的一对。负责从视图读取数据,控制用户输入,并向模型发送数据。

贰 、工作原理:
用户从视图层发出请求,controller接收到请求后转载给对应的model处理,model处理完了后回来结果给controller,并在View层反馈给用户.

叁 、创立3个Angular模块,即ng-app所绑定的有的
,需传递八个参数:
①模块称号:即ng-app所急需绑定的名称,ng-app=”myApp”
②数组:要求注入的模块名称,不须要可为空。
eg:var app=
angular.module(“myApp”,[]);

在Angular模块上,成立一个控制器Controller,需求传递四个参数。
①Controller名称,即ng-controller供给绑定的称号。ng-controller=”myCtrl”
②Controllerd的构造函数:构造函数能够流传多少个参数,包蕴$scope/$rootScope以及种种系统内置对象;

【AngularJS中的功能域】
①$scope:局地功能域,注解在$scope上的习性和方法,只可以在当前的Controller中选取
②$rootScope:根功能域,注脚在$rootScope上的性质和艺术,
能够在ng-app所包蕴的其它区域选取(无论是不是同Controller,或是或不是在Controller包括范围中)

>>>若没有行使$scope申明变量,而间接在HTML中动用ng-model绑定的变量功效域为:
① 、尽管ng-model在某些ng-controller中,则此变量会默许绑定到当下Controller的$scope上;
② 、假设ng-model没有在其余一个ng-controller中,此变量会绑定到$rootScope上。

 

三、AngularJS过滤器

AngularJS中,过滤器能够应用三个管道字符(|)添加到表达式和下令中。

>>>系统内置过滤器:
currency:格式化数字为货币格式。
filter:从数组项中甄选3个子集。
lowercase:格式化字符串为小写。
orderBy:依据有些表达式排列数组。
uppercase:格式化字符串为大写。

eg:
<p>{{“aBcDeF”|uppercase}}</p>
<p>{{“aBcDeF”|lowercase}}</p>
<p>{{123456|currency}}</p>

 

【自定义过滤器】

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 })

 

 

四、AngularJS中的 http && select && DOM操作

一、AngularJS中的http
$http 是 AngularJS
中的2个中央服务,用于读取远程服务器的数量。

二、AngularJS中的select
①接纳数组作为数据源,个中,x表示数组的每一项。
暗许会将x直接绑定到option的value中,而option突显的剧情,由后面包车型地铁x
for…决定。
eg:
<section ng-model=
“name” ng-options=”x.site for x in sites”></section>

②应用对象作为数据源,个中,(x,y)表示键值对,x为键,y为值。
暗中同意会将值y绑定到option的value中,而option展现的始末,由前边的x
for…决定。
eg:
<section ng-model=
“name” ng-options=”x for (x,y) in sites”></section>

三、AngularJS中的DOM操作
①ng-disabled=”true/false”
当传入true时,控件禁止使用。传入false时,启用。
<label>
<input
type=”checkbox” ng-model=”mySwitch”>是或不是允许
小希真萌!
</label>
<button
ng-disabled=”!mySwitch” class=”btn
btn-primary”>点我!</button>
<p></p>

②ng-show
暗中认可隐藏
传入true时显示
<label>
<input
type=”checkbox” ng-model=”mySwitch1″>是否
显示?
</label>
<button
ng-show=”mySwitch1″ class=”btn
btn-primary”>点我!</button>
<p></p>

③ng-hide
暗中认可展现传入true是东躲江苏
<label>
<input
type=”checkbox” ng-model=”mySwitch2″>是不是隐伏?
</label>
<button
ng-hide=”mySwitch2″ class=”btn
btn-primary”>点我!</button>
<p></p>

④ng-click
概念了AngularJS中的点击事件。
只得触发绑定在Angular效用域中的属性与办法。
<button
ng-click=”count = count + 1″>点我!</button>
<p>{{ count
}}</p>
<button
ng-click=”func()”>说一下感想呢!</button>

 

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

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

JS代码:

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

 

五、AngularJS中的表单验证

一 、表单湖北中国广播公司泛的表达操作:
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是私下的
$pristine:表单没有填写记录
$error:表单验证不通过的错误消息

贰 、验证时需给表单及须求申明的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验证,能够动用<form
novalidate></form>属性,禁止使用H5自带验证作用。

 

六、AngularJS中的动画 

AngularJS中应用动画

提供了动画效果,能够协作CSS使用。

壹 、AngularJS
使用动画片要求引入angular-animate.js库!

二 、如若页面中从不自定义的模块(ng-app),能够直接绑定系统模块ng-app=”ngAnimate”;
假定页面中已有自定义模块,能够在自定义模块后注入”ngAnimate”模块。
eg:angular.module(“app”,[“ngAnimate”])

三 、当调用相关指令控制成分呈现隐藏时,会活动抬高对应的class类;
ng-show/ng-hide
会移除/添加ng-hide
ng-if/ng-switch/ng-repeat等其余指令,必要各自设置呈现后和藏身后的class样式;
显示后:.ng-enter-active,.ng-leave{}
隐藏后:.ng-enter,.ng-leave-active{}

七、AngularJS中的路由

壹 、载入了贯彻路由的 js
文件:angular-route.js。

贰 、包蕴了 ngRoute
模块作为主应用模块的正视模块。
eg:angular.module(“app”,[“ngRoute”])

3.就要超链接改为路有格式:
eg:<a
href=”#/page1″>page1</a>

4.在config中,注入$routeProvider,进行路由配置:
$routeProvider

.when(‘/’,{template:’那是首页页面’})

.when(‘/page1′,{template:’这是page1页面’})

.when(‘/page2′,{template:’这是page2页面’})

.when(‘/page3′,{template:’这是page3页面’})

.otherwise({redirectTo:’/’});
})
⑤ 、在页面包车型客车适当岗位,添加ng-view,用于承载打开的页面
<div
ng-view></div> <ng-view></ng-view>

【路由参数对象中可选属性】
1.tempalte:自定的HTML模板,会加载在ng-view中
2.tempalteUrl:导入外部的HTML模板,为了幸免争执外部的HTML只需求保留body内部的代码即可;
3.redirectTo:重定向于有些页面,一般用于.otherwise()中;
4.controller:在当模板上推行的controller函数,生成新的scope

 

 

图片 1

 

 

 

后日的理论知识先分享到那里,愿能扶助到你~~~小菜鸟一枚,多谢您的支撑!

 

 

图片 2

 

 

作者:夕照希望
出处:http://www.cnblogs.com/hope666/ 

相关文章