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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
js控制frameSet示例
Sep 10 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
vue.js学习之递归组件
Dec 13 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
VUE安装使用教程详解
Jun 03 Javascript
JSON stringify方法原理及实例解析
Oct 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
$.format,jquery.format 使用说明
2011/07/13 Javascript
js获取通过ajax返回的map型的JSONArray的方法
2014/01/09 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
用Python实现协同过滤的教程
2015/04/08 Python
python获取mp3文件信息的方法
2015/06/15 Python
python中异常报错处理方法汇总
2016/11/20 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Python pandas库中的isnull()详解
2019/12/26 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
门店业绩提升方案
2014/06/08 职场文书
爱心捐书活动总结
2014/07/05 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
个人合作协议范本
2015/08/06 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
git中cherry-pick命令的使用教程
2022/06/25 Servers