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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
将list转换为json失败的原因
Dec 17 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
基于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 cache类代码(php数据缓存类)
2010/04/15 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
实例分析vue循环列表动态数据的处理方法
2018/09/28 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
基于python时间处理方法(详解)
2017/08/14 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
给客户的道歉信
2014/01/13 职场文书
夜不归宿检讨书
2014/02/25 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
《菜园里》教学反思
2014/04/17 职场文书
迎国庆演讲稿
2014/09/05 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang