AngularJS实用基础知识_入门必备篇(推荐)


Posted in Javascript onJuly 10, 2017

前言

今天来和大家学习一下AngularJS……

AngularJS 通过新的属性和表达式扩展了 HTML。

AngularJS 可以构建一个单一页面应用程序。

AngularJS 学习起来非常简单。

一、AngularJS指令与表达式

【AngularJS常用指令】

1、ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个。

2、ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中。

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

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

eg:<div id="div1" ng-bind="name">
</div>等效于<div id="div1" >{{name}}</div>

4、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(控制器):应用程序中处理用户交互的部分。负责从视图读取数据,控制用户输入,并向模型发送数据。

2、工作原理:

用户从视图层发出请求,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绑定的变量作用域为:

1、如果ng-model在某个ng-controller中,则此变量会默认绑定到当前Controller的$scope上;

2、如果ng-model没有在任何一个ng-controller中,此变量会绑定到$rootScope上。

三、AngularJS过滤器

AngularJS中,过滤器可以使用一个管道字符(|)添加到表达式和指令中。

>>>系统内置过滤器:

currency:格式化数字为货币格式。
filter:从数组项中选择一个子集。
lowercase:格式化字符串为小写。
orderBy:根据某个表达式排列数组。
uppercase:格式化字符串为大写。

eg:

<p>{{"aBcDeF"|uppercase}}</p>
<p>{{"aBcDeF"|lowercase}}</p>
<p>{{123456|currency}}</p>

【自定义过滤器】

.filter('reverse',function(){ //可以注入依赖
return function(text){
if(!angular.isString(text)){
return "您输入的不是字符串!"
}else{
return text.split("").reverse().join("");
}
}
})

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

一、AngularJS中的http

$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

二、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代码:

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

五、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验证,可以使用<form novalidate></form>属性,禁用H5自带验证功能。

六、AngularJS中的动画

AngularJS中使用动画 :

提供了动画效果,可以配合 CSS使用。

1、AngularJS 使用动画需要引入angular-animate.js库!

2、如果页面中没有自定义的模块(ng-app),可以直接绑定系统模块ng-app="ngAnimate";

如果页面中已有自定义模块,可以在自定义模块后注入"ngAnimate"模块。
eg:angular.module("app",["ngAnimate"])

3、当调用相关指令控制元素显示隐藏时,会自动添加对应的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中的路由

1、载入了实现路由的 js 文件:angular-route.js。

2、包含了 ngRoute 模块作为主应用模块的依赖模块。

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

3.即将超链接改为路有格式:

eg:<a href="#/page1" rel="external nofollow" >page1</a>

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

$routeProvider
.when('/',{template:'这是首页页面'})
.when('/page1',{template:'这是page1页面'})
.when('/page2',{template:'这是page2页面'})
.when('/page3',{template:'这是page3页面'})
.otherwise({redirectTo:'/'});
})

5、在页面的合适位置,添加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

以上这篇AngularJS实用基础知识_入门必备篇(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
使用JavaScript和C#中获得referer
Nov 14 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
基于javascript实现单选及多选的向右和向左移动实例
Jul 25 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
微信小程序实现图片滚动效果示例
Dec 05 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 #Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 #Javascript
vue子父组件通信的实现代码
Jul 09 #Javascript
vue2中filter()的实现代码
Jul 09 #Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 #Javascript
收藏AngularJS中最重要的核心功能
Jul 09 #Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
php返回json数据函数实例
2014/10/09 PHP
php curl常用的5个经典例子
2017/01/20 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
新浪的图片新闻效果
2007/01/13 Javascript
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
YUV转为jpg图像的实现
2019/12/09 Python
django从后台返回html代码的实例
2020/03/11 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
python 实现简易的记事本
2020/11/30 Python
精彩自我鉴定
2014/01/16 职场文书
学生会离职感言
2014/02/11 职场文书
职业女性的职业规划
2014/03/04 职场文书
需求分析说明书
2014/05/09 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
法人代表证明书
2014/09/18 职场文书
班主任2015新年寄语
2014/12/08 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
生日宴会祝酒词
2015/08/10 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书