1. 简介
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。
AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、依赖注入等等
2.AngularJS四大特征 2.1MVC模式
Angular遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合.通过依赖注入(dependency injection),Angular为客户端的Web应用带来了传统服务端的服务,例如独立于视图的控制。 因此,后端减少了许多负担,产生了更轻的Web应用。
2.1.1 M——Model
数据,其实就是angular变量($scope.XX);
2.1.2 V——View
数据的呈现,Html+Directive(指令);
2.1.3 C——Controller
操作数据,就是function,数据的增删改查
2.2 双向绑定
AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操作不再重要并提升了可测试性。
2.3 依赖注入
依赖注入(Dependency Injection,简称DI)是一种设计模式, 指某个对象依赖的其他对象无需手工创建,只需要“吼一嗓子”,则此对象在创建时,其依赖的对象由框架来自动创建并注入进来,其实就是最少知识法则;模块中所有的service和provider两类对象,都可以根据形参名称实现DI。
2.4 模块化
高内聚低耦合法则
1)官方提供的模块 ng、ngRoute、ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ])
3. 基本语法 3.1 表达式
在angularJs中表达式形式是一对嵌套的大括号{{表达式内容}},例如:
angularJs demo01-表达式
{{10+100}}
运行结果:
3.3 双向绑定ng-model
在angularJS中双向绑定是通过指令ng-model来完成的,ng-model代替了name属性,语法格式为 ng-model="变量名",例如;
angularJs demo02-双向绑定
请输入用户名:
请输入密码:
{{username}} - {{pass}}
4. 指令 4.1 ng-app介绍
我们发现,在body标签中加上ng-app之后,angular的表达式就可以正常执行了,那么ng-app是什么玩意儿了?ng-app是angularjs中一个比较重要的指令,是使用angularJs必须要用到的一个指令。
4.2 双向绑定指令——ng-model
ng-model是双向绑定指令
4.2 初始化指令——ng-init
当我们希望在页面加载之后,对一些变量什么的进行初始化赋值等操作就可以使用该指令
angularJs demo03-初始化指令
{{username}}
4.3 控制器指令——ng-controller
ng-controller用于指定所使用的控制器。
4.4 事件指令 4.4.1 点击事件——ng-click
例如:求两个数之和
angularJs demo05-事件指令
var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.add = function(){
$scope.z = parseInt($scope.x) + parseInt($scope.y);
}
});
num1 + num2 {{z}}
测试结果:
如果要一个指令调用多个方法,用分号隔开即可,例如;
4.5 循环指令——ng-repeat 4.5.1 语法
1)循环集合:ng-repeat="变量 in 集合"
例如:
angularJs demo05-事件指令
var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.list = ["张三","李四","王五"];
});
{{name}}
运行结果:
2)循环对象ng-repeat="(key,value) in 对象"
例如:
js定义变量:
$scope.obj = {"name":"张三","age":22,"birth":new Date()};
前端使用变量:
{{key}}-{{value}}
运行结果:
4.5.2 获取行索引
在angularjs中在ng-repeat中获取索引只需要 $index就可以了,例如:
4.6 条件指令ng-if
语法:ng-if="条件"
例如:
这里显示
4.7 ng-options指令
该指令用于指定select内容的数据源的指令
语法:ng-options = "变量.属性1 as 变量.属性2 for 变量 in 数据集合"
注意:变量是一个实体类,是数据库中的一条记录,as前面的部分是值value,as后面的部分是显示的文本。其中属性1和属性2分别表示实体中的两个字段属性
例如:
效果如图:
4.8 布尔指令
angular提供了两个Boolean指令,可以供我们使用
4.8.1 ng-true-value
该指令的含义是当为true的时候,其value是多少
语法:ng-true-value="值"
例如:当勾选的时候,值为1
4.8.2 ng-false-value
该指令的含义是当为false的时候,其value是多少
语法:ng-false-value="值"
例如:当不勾选的时候,值为0
4.9 ng-checked指令
该指令用于标签,用来显示该复选框是否需要勾选上
语法:mg-checked="布尔值"
例如:
4.10 ng-bind-html指令
该指令用于显示html内容。
应用场景是,后台返回的数据是html数据,要在界面解析该html,那么就不能使用表达式了,需要使用该指令来完成,例如:
5. 自定义模块 5.1 $scope
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文。有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图。
通俗的讲,$scope是控制层与视图层之间交换数据的桥梁,也就是说,通过其绑定的数据,在视图层可以直接访问,同时,在视图层通过ng-model绑定的变量,在控制层也是通过$scope获取的
5.2 操作步骤 5.2.1 定义模块
语法:angular.module("模块名称",[]);
参数解释:
参数一:模块名称
参数二:数组,元素是其他模块;如果该模块不需要引入其他模块,就是一个空数组
例如:
var app = angular.module("myApp",[]);
5.2.2 引入模块
模块的引入需要在ng-app中指定,例如;
5.2.3 定义控制器
语法:app.controller("控制器名称",function($scope){ });
参数解释:
参数一:控制器名称
参数二:函数类型,写业务逻辑
例如:
app.controller("myController",function($scope){
$scope.add = function(){
return parseInt($scope.x) + parseInt($scope.y);
}
});
注意:app是模块名称
5.2.4 引入控制器
案例:
angularJs demo03-控制器
var app = angular.module("myApp",[]);
app.controller("myController",function($scope){
$scope.add = function(){
return parseInt($scope.x) + parseInt($scope.y);
}
});
num1 + num2 = {{add()}}
测试结果:
6. 内置服务 6.1$http
我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http来实现数据访问
例如:
项目结构
代码:
Insert title here
var app = angular.module("myApp",[]);
app.controller("myController",function($scope,$http){
$scope.findList = function(){
$http.get("data.json").success(function(response){
$scope.list = response ;
});
}
});
姓名:{{o.name}} 年龄:{{o.age}}
运行结果:
6.2 $location
$location服务分析浏览器地址栏中的URL(基于window.location),让我们可以在应用中较为方便地使用URL里面的内容。在地址栏中更改URL,会响应到$location服务,而在$location中修改URL,也会响应到地址栏中
6.2.1 基本用法
1)search方法
我们使用该服务,最常用的目的就是获取地址栏的参数,这时候通常使用内置的search()方法
语法:$location.search();
注意:
1. 该方法返回一个json对象,要获取指定的参数对应的值,
例如:var id= $location.search()['id']
或者var id= $location.search().id
2. 地址栏的?前要加# ,则是angularJS的地址路由的书写形式,例如:
2)absUrl()
获取当前完整的url路径
语法:$location.absUrl():
3)host()
获取当前url的主机名
语法:$location.host():
4)port()
获取当前url端口
语法:$location.port():
6.2.2 其他api
1)查看
//查看$location的内容
var all = $location;
console.log(all)
//获取当前url的哈希值
var hash = $location.hash()
console.log(hash)
//输出内容:''
//获取当前url的子路径(也就是当前url#后面的内容,不包括参数)
var path = $location.path()
console.log(path)
//输出内容:/root/contract/edit[12]
//获取当前url的协议
var protocol = $location.protocol();
console.log(protocol)
//输出内容:http
//获取当前url路径(当前url#后面的内容,包括参数和哈希值):
var url = $location.url();
console.log(url)
//输出内容:/root/contract/edit?id=123&page=1&taskContract=HADTASK
2)修改
//1.修改url的子路径部分:
$location.url('/testUrl');
console.log(url)
//输出内容:http://localhost/#!/testUrl
//2.修改url的参数部分
//第一个参数表示url参数的属性名
$location.search('id', '123')
// 结果:http://localhost/#!/root/contract/businesscontract?id=123
//第二个参数是该属性名的属性值,如果是已有属性名,则修改,如果不是已有属性,则新增
$location.search('name', 'test')
// 结果: http://localhost/#!/root/contract/businesscontract?id=123&name=test
//3.一次性修改多个参数
$location.search({
id: '666',
taskContract: 'abc'
})
//结果:http://localhost/#!/root/contract/businesscontract?id=666&taskContract=abc
//4.第一个值表示url参数的属性名,如果是已有属性名,则删除该属性,如果不是已有属性,那就等于没改过
$location.search('id', null)
//结果:http://localhost/#!/root/contract/businesscontract?page=1&taskContract=HADTASK&makeContract=HADMAKE
//5.修改url的哈希值部分
$location.hash('testhash');
//目前我的页面测试路径找不到报错了
//6.修改替换url的哈希值部分
$location.path('/testreplace').replace()
//结果:http://localhost/#!/testreplace?taskContract=abc#testhash
6.3 $sce服务
该服务主要用于做angularJs的信任策略的,比方说,我们用solr做高亮查询的时候,如果不用该服务做信任,前端界面是不能正确显示高亮内容的,显示的结果就是如图所示内容;
要实现对HTML的信任策略,需要用到起提供的一个方法trustAsHtml,该方法的作用是将一个文本类型的HTML转换成一个解析运行之后的HTML,与之类似的还有trustAsJs方法。
例如:
var data = "手机";
$sce.trustAsHtml(data)
6.4$interval服务
在AngularJS中$interval服务用来处理间歇性处理一些事情
6.4.1 语法
语法格式:
$interval(执行的函数,间隔的毫秒数,运行次数);
运行次数可以缺省,如果缺省则无限循环执行
6.4.2 cancel方法
取消执行用cancel方法
$interval.cancel(time);
6.4.3 demo案例
$scope.second = 10;
time= $interval(function(){
if($scope.second>0){
$scope.second =$scope.second-1;
}else{
$interval.cancel(time);
alert("秒杀服务已结束");
}
},1000);
页面用表达式显示$scope.second的值即可实现倒计时的功能
7. angularJs中的变量监听
在angular中,对变量的监听使用$scope中的$watch方法
语法:$scope.$watch('变量',function(newValue,oldValue){});
例如:
$scope.$watch('entity.goods.category1Id',function(newValue,oldvalue){
itemCatService.findByParentId(newValue).success(function(data) {
$scope.itemCat2List = data;
});
});
8. angularJs的过滤器——filter 8.1 语法
app.filter("过滤器名",[ '需要引入的服务',function(需要引入的服务){
return function(data){
}
}]);
注意:
1. 第一个“需要引入的服务”参数需要用引号括起来,表示该服务需要加载进来
2. function中的参数不需要,是因为这个函数需要使用该服务,需要传进来
3. data表示过滤前的内容,也就是被过滤的内容。
4. 返回值就是过滤后的内容
例如:定义一个html的信任策略过滤器
// 定义过滤器
app.filter("trustHtml",['$sce',function($sce){
// data 表示被过滤的内容
return function(data) {
return $sce.trustAsHtml(data);
}
}]);
8.2 使用
过滤器的使用很简单,只需要用 竖线“ | 过滤器名称”来调用即可,例如:
暂无评论内容