AngularJS 框架
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
【Angular JS表达式】
1、Angular JS使用双{{}}绑定方式。用于将表达式的内容输出到页面中。
表达式可以是文字、运算符、变量等，也可以在表达式中进行运算输出结果
eg. <p>{{ 5+5+"Angular" }}</p>
如果Angular.js文件放在文件下方，在页面刷新的瞬间看到{{}}表达式，可以使用<div ng-bind="name"></div>方式绑定
eg.上式可以改为：<p ng-bind="5+5+'Angular' "></p>
<!--举例 两条语句作用相同-->
<p>{{ 5+5+"Angular" }}</p>
<p ng-bind="5+5+'Angular' "></p>>
示意图
【AngularJS 常用指令】
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
1、ng-app：AngularJS所管辖的区域。一般写在body或HTML标签上，原则上一个页面只能有一个
eg. <body ng-app=""></body>
2、ng-model ：把元素值（比如输入域的值）绑定到应用程序的变量中。
eg.<input type="text" ng-model = "name" />
3、ng-bind：把应用程序变量中的值，输出到页面HTML视图中。可以与表达式{{}}互相替换。
eg.<div ng-bind="name"></div>
4、ng-init：初始化AngularJS应用程序中的变量值；
eg. <body ng-app="" ng-init=" name='jredu' ">
应用程序初始化时，name变量就赋有初值。
<!--AngularJS 绑定input与div(双向数据绑定)-->
<body ng-app="" ng-init="name='Genista'"> <!--输入框前缀-->
<input type="text" ng-model = "name" />
<input type="text" ng-model = "name" />
<div>{{name+"123"}}</div> <!--表达式（会有bug，可以改变angularJS导入顺序来解决）-->
<div ng-bind="name"></div>
</body>
示意图
【MVC 三层架构】
1、Model（模型层）:应用程序中用于处理数据的部分（包括将数据保存或者修改到数据库、变量文件中）。
在AngularJS中，Model 特指的是 应用程序中的各种数据。
View（视图层）：用户可以看到的用于显示数据的页面。（只有view是用户可见的）
Controller（控制器）：是链接Model和View的桥梁，负责从view读取数据、接收用户的操作输入；并将数据发送给model层。
model对数据处理完毕后，将结果返回给 Controller，Controller再将结果返回给View层显示。
如何 创建一个angular的模块，即ng-app="" 需要绑定的部分？
需要接收两个参数： eg. var app = angular.module("myApp",[]);
① 模块名称：即 angular.module 双引号中绑定的名字。
② 数组：表示需要注入的模块名称，不需要注入其他模块，可用空数组代替。
>>> Angular（2.0）将常用放入功能封装在angular.js，创建主模块时可以直接使用，无需注入。
>>>而一些应用较少的功能，需要导入相应的JS文件，并且在[]中注入进这个模块，才可以使用。
这就是AngularJS（1.0）中的【模块开发】和【依赖注入】。
如何 在AngularJS模块上，创建一个控制器？
需要传入两个参数：
① 控制器名字：即ng-controller需要绑定的名字
<div ng-controller="myCtrol">
② 控制器的构造函数，构造函数可以传入多个参数
>>>如果又在函数中使用系统的内置对象，则必须通过函数的参数传入，否则不能使用
>>>AngularJS 中的内置对象，都用$开头，例如 $scope,$rootScope
【AngularJS的作用域】
① $scope：局部作用域，声明在$scope上的属性和方法，只能在当前的Controller使用；
② $rootScope：根作用域，声明在$scope上的属性和方法，可以在整个ng-app所含范围内使用。
>>>如果没有使用 $scope 声明变量，而是直接使用ng-model在HTML标签中绑定的数据的作用域为：
1、如果ng-mode写在某个 Controller 中，则这个变量会默认绑定到当前的Controller的$scope上；
2、如果ng-mode没有写在任何一个 Controller 中，则这个变量会默认绑定到 Controller的 $rootScope 上；
【注】 AngularJS中的父子作用域
1、AngularJS中，子作用域只能访问父作用域中的变量，二不能修改父作用域的变量；
2、为了解决上述问题，可以将副作用域中的变量声明为引用数据类型，例如对象等。
这样可以在子作用域中，直接修改对象属性，而不需要修改对象本身保存的地址。
见"myCtrol1"举例
<div ng-controller="myCtrol1">
<input type="text" ng-model="name" placeholder="myCtrol1 name" /> <!--局部变量-->
<div ng-bind="name+'------------myCtrol1的name'"></div>
<div ng-bind="age+'------------myCtrol1的age'"></div> <input type="text" ng-model="test" placeholder="myCtrol1 test" /> <!--局部变量-->
<input type="text" ng-model="obj.test" placeholder="myCtrol1 obj.test" /> <!--局部变量--> <!--父子作用域-->
<mark ng-bind="test+'myCtrl1-test'"></mark>
<mark ng-bind="obj.test+'myCtrl1-obj.test'"></mark> </div>
<mark ng-bind="test+'全局-test'"></mark><br />
<mark ng-bind="obj.test+'全局-obj.test'"></mark><br />
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrol1",function($rootScope){
$rootScope.test = "aaaaa";
$rootScope.obj = {
test :"bbbbb",
};
});
</script>
示意图
【AngularJS中的过滤器】
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
1、系统内置的过滤器
currency：将数字格式化为货币形式。
filter：从数组项中选择一个子集。
orderBy：根据某个表达式排列数组。
lowercase：格式化字符串为小写。
uppercase：格式化字符串为大写。
2、自定义过滤器（写在控制器外面） ，同时 需要传递过滤参数。
调用过滤器实例：
传入参数4，将被 过滤函数 的 num形参 所接收。
<script type="text/javascript">
angular.module("app",[])
/*实现隐藏手机号码后四位*/
.filter("hideTel",function(){
return function(text,num){
num = num>0&&num<11?num:3;
text = text+"";
var newTest = text.substring(0,11-num) +text.substring(11-num,11).replace(/\d/g,"*");
return newTest;
}
})
</script>
【AngularJS中的服务Service】
1、内置服务：
要是服务，必须要把服务名通过controller的构造函数的参数注入进来！
服务内置的服务，统一使用$开头，服务中的属性和方法统一使用$$开头！自定义服务时，需注意与系统服务的写法区分开
$location：返回当前页面的URL地址信息，第一个对象。
$http：向服务器发送请求，应用响应服务器传送过来的数据。相当于JQuery中的Ajax
$timeout：相当于setTimeout();
2、自定义服务
第一个参数是 服务名;
第二个参数是自定义服务的构造函数。我们自定义的服务，本质是一个对象。
对象的属性，可以在构造函数中，使用this.属性表示；
对象的方法，可以在构造函数中，使用this.方法表示；
<script type="text/javascript">
angular.module("app",[])
.controller("ctrl",function($scope,$location,$timeout,$interval,hexafy){ // 控制器（调用自定义服务不加$符号）
$scope.local = $location.$$host; $timeout(function(){
$scope.time = "两秒后出现！";
},2000); $scope.num = 0; // 用$声明一个变量
$interval(function(){
$scope.num++;
},1000); /*service 自定义服务的使用*/
$scope.gn=hexafy.gn;
$scope.num1 = hexafy.func(10);
}) .service("hexafy",function(){
this.gn = "将十进制转换为十六进制"; // 使用this.属性 把变量添加到函数上
this.func = function(num){ // this.方法
return num.toString(16);
}
}
</script>
示意图
【AngularJS中的DOM和事件】
1、DOM
ng-disabled="false" 传入true表示禁用，传入false表示可用
ng-show="false" 传入true表示显示，传入false表示隐藏
ng-hide="false" 传入true表示隐藏，传入false表示显示
2、AngularJS中的事件 只能触发绑定在AngularJS作用域上的属性和方法。
<body ng-app="app" ng-controller="ctrl">
<!--【ng-disabled】-->
<button ng-disabled="!myCheck">点击</button>
<label>
<input type="checkbox" ng-model="myCheck" /> 是否同意协议
</label>
<p>{{myCheck}}</p>
<!--【ng-show】-->
<label>
<input type="checkbox" ng-model="myCheck1" /> 是否显示
</label>
<p ng-show="myCheck1">哈哈，来咯！</p>
<!--【ng-hide】-->
<label>
<input type="checkbox" ng-model="myCheck2" /> 是否隐藏
</label>
<p ng-hide="myCheck2">呜呜，拜拜！</p>
</body>
示意图
【AngularJS的表单验证】
1、表单中，常用的验证操作：
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
$error 表单验证不通过的错误信息
2、验证时，必须给form和input，设置name属性。
给form和input设置name后，会自动将表单信息绑定到$scope 作用域中。所以，可以直接使用formName.inputName.$验证操作 得到验证结果
eg.
formName.inputName.$dirty = "true" 表示表单被填写过
formName.inputName.$invalid = "true" 表示表单输入内容不合法
formName.inputName.$error.required= "true" 表示表单设置了必填，但是没有输入
【注】$error 支持的验证
required/minlength/maxlength/partten/email/number/data/url等
3、为了避免AngularJS的验证与HTML5的验证表单冲突！例如，type = "email" required等，H5也会进行验证，可以给form添加 "novalidate" 属性，禁用HTML5的验证功能。
用户名验证功能——代码举例 ↓↓↓
<div class="panel-body">
<form class="form-horizontal" novalidate="novalidate" name="form">
<div class="row">
<div class="col-xs-3">
用户名：
</div>
<div class="col-xs-9">
<input type="text" class="form-control" name="name" ng-model="user.name" required=" required" ng-minlength="6" ng-maxlength="12"/>
<p style="color: aquamarine; margin: 0px;" ng-show="form.name.$invalid && form.name.$dirty">
<span ng-show="form.name.$error.required">用户名必须填写</span>
<span ng-show="form.name.$error.minlength">用户名长度最少6位</span>
<span ng-show="form.name.$error.maxlength">用户名长度最多12位</span>
</p> </div>
</div>
</form>
</div>
示意图
【AngularJS中使用动画】
1、导入angular-animate.js
2、 如果页面中没有自定义app模块，则可以直接绑定系统模块ng-app="ngAnimate"
如果页面中有自定义的app模块，则可以在自定义模块的数组中，注入ngAnimate。
angular.module("app",["ngAnimate"])
3、 当使用ng-show、ng-hide显示或者隐藏元素的时候， 系统会自动添加或者移除.ng-hide这个class类；
4、 当使用ng-if/ng-switch/ng-repeat等其他指令，需要分别设置显示后和隐藏后的两种class样式：
显示后的class： .ng-enter-active,.ng-leave{}
隐藏后的class： .ng-enter,.ng-leave-active{}
<style type="text/css">
.div{
width: 200px;
height: 200px;
background-color: red;
transition: all ease 1s;
}
.ng-hide{
width: 0px;
height: 0px;
background-color: green;
/*margin-left: -200px;*/
}
.ng-enter-active,.ng-leave{
width: 200px;
height: 200px;
background-color: red;
}
.ng-enter,.ng-leave-active{
width: 0px;
height: 0px;
background-color: green;
}
</style> <body ng-app="app" ng-controller="ctrl"> <input type="checkbox" ng-model="myCheck" />隐藏div
<div class="div" ng-show="myCheck">这是一个div</div> <input type="checkbox" ng-model="myIf" />移除div
<div class="div" ng-if="myIf">这是一个div</div> </body>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/angular-animate.js" type="text/javascript"></script>
<script type="text/javascript"> angular.module("app",["ngAnimate"])
.controller("ctrl",function(){ })
</script>
动画效果 渐变消失
今天就到这里吧，后续还会更新...
如果有疑问可以提出来大家共同解决，如果有不完善的地方还请多多指正！
有需要请加关注呦~~~蟹蟹~~~
AngularJS 框架的更多相关文章
- 十佳AngularJS框架
您是否还在烦恼如何没有困难地创建一个创新型的Web应用程序?那么一定不要错过这个集合!在本文中,小编为大家收集了十个非常棒的AngularJS框架.AngularJS框架拥有大量有用的工具和组件,可以 ...
- 10 个非常有用的 AngularJS 框架
AngularJS是最流行的开源web app框架.AngularJS被用于解决阻碍单页应用程序开发的各种挑战. 你作为一个AngularJS用户,却不知道一些可以帮助你美化编码的资源?那么一定不能错 ...
- AngularJS框架研究（一）
和几年前相比,现在的Javascript开发方式有了翻天覆地的变化,一些极具创意的开发工具的出现,让前端开发更加成熟,Angular框架就是一个例子.最近在看Angular的源代码,发现并不是件容易的 ...
- AngularJS框架速写
最近在把玩AngularJS框架,之前也看过流行的Backbone,不过AngularJS给人的感觉完全不同,它走的是一条高帅富之路. 按照官方的说法,AngularJS是一套依赖注入的MVC开发套件 ...
- 简洁AngularJS框架后台管理系统bootstrap后台模板
最近在做一个后台管理的项目,但是没有设计图完全,所以就发现一款非常不错的模版. 这个模版是基于 AngularJS 和 bootstrap 的后台管理系统模版. Minovate是 AngularJS ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- angularjs框架及其生态环境 --待续
angular的MVVM框架结构: 1. app, 2.routes, config, 3.module, 4.Controller, $scope,controller参数,事件 ...
- vuejs angularjs 框架的一些比较（vue项目重构四）
使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...
- 初探AngularJs框架（三）
一.实现todoList的demo 功能很简单,提供一个文本框,用户输入回车后添加新条目.每个条目可以在待处理和处理中两个区域间切换,每个条目都可以被删除,大致的界面如下图所示: 二.处理逻辑 首先将 ...
随机推荐
- WeQuant交易策略—简单均线
简单双均线策略(Simple Moving Average) 策略介绍简单双均线策略,通过一短一长(一快一慢)两个回看时间窗口收盘价的简单移动平均绘制两条均线,利用均线的交叉来跟踪价格的趋势.这里说的 ...
- Java并发包中CopyOnWrite容器相关类简介
简介: 本文是主要介绍,并发容器CopyOnWriteArrayList和CopyOnWriteArraySet(不含重复元素的并发容器)的基本原理和使用示例. 欢迎探讨,如有错误敬请指正 如需转载, ...
- ASP.NET Core 运行原理解剖[3]:Middleware-请求管道的构成
在 ASP.NET 中,我们知道,它有一个面向切面的请求管道,有19个主要的事件构成,能够让我们进行灵活的扩展.通常是在 web.config 中通过注册 HttpModule 来实现对请求管道事件监 ...
- Winform 下载服务器安装包并安装
代码中包含了检测本地安装盘符代码 一,定义下载委托事件(用于实现前台进度条更新和下载完成后事件的回调): private delegate void Action(); private string ...
- 搭建DNS服务
author:JevonWei 版权声明:原创作品 修改/var/named/下的数据库文件的数据时,需手动修改serial序列号 UDP协议53端口用于用户DNS查询,TCP协议53端口用于主从DN ...
- MySQL的JOIN（二）：JOIN原理
表连接算法 Nested Loop Join(NLJ)算法: 首先介绍一种基础算法:NLJ,嵌套循环算法.循环外层是驱动表,循坏内层是被驱动表.驱动表会驱动被驱动表进行连接操作.首先驱动表找到第一条记 ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- chrome开发工具指南（七）
检查动画 使用 Chrome DevTools 动画检查器检查和修改动画. 通过打开动画检查器捕捉动画.检查器会自动检测动画并将它们分类为多个组. 通过慢速播放.重播或查看动画源代码来检查动画. 通过 ...
- iOS 环信集成问题（连文档都不说明的坑。。）
首先,关于环信SDK的下载和一些依赖库的添加,在此我就不做详细介绍,(http://www.easemob.com/download/im)附上环信官网文档,可以看一下,上面都可以下载,也有相关配置介 ...
- 第4阶段——制作根文件系统之分析init进程(2)
本节目标: (1) 了解busybox(init进程和命令都放在busybox中) (2) 创建SI工程,分析busybox源码来知道init进程做了哪些事情 (3) 分析busybox中init进 ...