AngularJS笔记(指令,过滤器,服务)
2017-04-16 本文已影响42人
oldSix_Zhu
若有不妥,请多指教
AngularJS(也叫安哥拉)
是一款由Google公司开发维护的前端MVC框架(诸多类库的集合),对开发的流程和模式做了约束,更注重实际的业务逻辑
AngularJS有着诸多特性,最为核心的是:模块化、双向数据绑定、语义化标签、依赖注入等(<a href="http://baike.baidu.com/link?url=ypxRhx789J-NTDZQSQ36QacEEAHjYPoK9-jhbWktAe3FNtl-LNhny_Tm0i88z0VuhRSBhR4MXGz3asfV67k-mDnXS4UWsHGPhdmBVtu2-Mu">百度百科</a>)
与之类似的框架还有BackBone、KnockoutJS、Vue、React等
<a href = "https://code.angularjs.org/">AngularJS下载地址</a>
目录:
1.指令
2.双向数据绑定
3.过滤器
4.依赖注入
5.服务
稍微写一点MVC模式:
MVC
MVC是一种开发模式,由模型(Model),视图(View),控制器(Controller)三部分构成:
模型(Model) 一般用来处理数据,包括操作数据库
视图(View) 用来展示数据,比如通过HTML展示
控制器(Controller) 用做连接模型和视图的桥梁
采用这种开发模式为合理组织代码提供了方便,降低了代码间的耦合度,功能结构清晰可见
先看个基础的使用:
<body>
<!-- 指定模块,这就是视图展示(View层) -->
<!-- 一个页可以有多个模块，但是不能互相嵌套,所以一般只会有一个 -->
<div class="box" ng-app="App">
<!-- 指定控制器 -->
<div ng-controller="Contoller1">
<h4>{{name}}对我深情地唱{{song}}</h4>
<ul>
<!--有for in 循环功能的类似"onclick"指令-->
<li ng-repeat="(num, lyric) in lyrics">第{{num+1}}句：{{lyric}}</li>
</ul>
</div>
</div>
<!-- 引入框架 -->
<script src="angular.min.js"></script>
<script>
// 提供一个全局对象angular，在此对象下有N多方法
// 其中module方法可以帮我们创建一个模块
var App = angular.module('App', []);
// App就是新创建的模块，这个模块又是一个对象
// 在此对象下又有N多方法，可以实现具体业务逻辑
// 这就是Controller层
App.controller('Contoller1', ['$scope', function ($scope) {
// $scope 是一个空对象{}，此对象就是数据(Model层)
$scope.name = '邱淑贞';
$scope.song = '月亮代表我的心';
$scope.lyrics = [
'你问我爱你有多深',
'我爱你有几分',
]
}]);
</script>
</body>
打印结果
1.指令:
所谓指令就是AngularJS自定义的HTML属性或标签,这些指令都是以ng-做为前缀的
在上面这个例子中我们看到li标签后面有一种叫做"指令"的东西,
可以不用写JS代码,直接完成循环的功能,使HTML更像一种语言了
部分常用指令:
1.ng-binding = "属性名":绑定属性 -> {{属性名}}
2.ng-show = "true/false" -> 显示内容
3.ng-hide = "true/false" -> 隐藏内容
4.ng-if = "true/false" -> 控制元素是否存在
5.ng-src / href -> 增强图片路径/地址
6.ng-class = "{类名:true/false}"
7.ng-include = "模板路径" -> 引入模板
8.ng-disable = "true/false" -> 表单禁用
9.ng-readOnly = "true/false" -> 只读标签
10.ng-checkbox = "true/false" -> 选中复选框
11.ng-selected = "true/false" -> 默认选中
其中在做数据绑定的时候,我们使用的是{{}},其实是ng-bind的简写
这个符号把controller中的属性传给了view,完成了数据展示,
但是用{{}}绑定数据展示时会有"闪烁"现象
解决办法:
<body ng-app="App">
<!--解决闪烁的三种方法-->
<ul ng-controller="Controller1">
<li ng-bind="name"></li>
<li ng-cloak>{{name}}{{age}}</li>
<li ng-bind-template="{{name}}{{age}}"></li>
</ul>
<script src="angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('Controller1', ['$scope', function ($scope) {
$scope.name = '张敏';
$scope.age = 18;
}]);
</script>
</body>
也可以自定义指令:
<body ng-app="App">
<!-- A:属性-->
<!--<div tag></div>-->
<!-- E:元素 -->
<!--<tag></tag>-->
<!-- C:类-->
<!--<div class="tag"></div>-->
<!-- M:注释-->
<!--directive:tag-->
<script src="angular.min.js"></script>
<script>
var App = angular.module('App', []);
// 通过模块实例对象的directive方法可以自定义指令
App.directive('tag', function () {
// 返回一个对象,这个对象就是自定义指令相关的内容
return {
// 指令支持的类型
// E element// A attribute// C class // M mark replace 必须为true
restrict: 'ECMA',
// 内容
template: '<ul><li>首页</li><li>列表</li></ul>',
//指令外部模板
//templateUrl: './list.html',
//是否替换原有标签
//replace: true
}
});
</script>
</body>
2.双向数据绑定
MVC之间的交互中,V向M传递数据,M向V传递数据
也就是双向数据绑定
<body ng-app="App">
<div ng-controller="Controller1">
<!-- 数据从视图(V)向模型(M)传递只能借助于表单元素输入 -->
<input type="text" ng-model="msg">
<!-- 模型(M)传递到视图(V)的数据 -->
<h4>{{msg}}</h4>
<button ng-click="show()">显示</button>
</div>
<script src="angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('Controller1', ['$scope', function ($scope) {
$scope.show = function () {
alert($scope.msg);
}
}]);
</script>
</body>
3.过滤器
过滤器是用来格式化展示数据的,
在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数
本质是一个加工函数
1、currency将数值格式化为货币格式
2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。
3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
4、json将Javascrip对象转成JSON字符串。
5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位
6、lowercase将文本转换成小写格式
7、uppercase将文本转换成大写格式
8、number数字格式化，可控制小位位数
9、orderBy对数组进行排序，第2个参数可控制方向
看一个简单打印当前日期的例子:
<body ng-app="App">
<div ng-controller="Controller1">{{time|date:'yyyy/MM/dd hh:mm:ss'}}</div>
<script src="angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('Controller1', ['$scope', function ($scope) {
$scope.time = new Date;
}]);
</script>
</body>
也可以自定义过滤器:
<body ng-app="App">
<div ng-controller="Controller1">
<!--hello my name is 王祖贤-->
<h4>{{info|test}}{{name}}</h4>
</div>
<script src="angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('Controller1', ['$scope', function ($scope) {
$scope.name = '王祖贤';
$scope.info = 'my name is ';
}]);
// 自定义过滤器
App.filter('test', function () {
return function (input) {
return 'hello ' + input;
}
});
</script>
</body>
4.依赖注入
AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数,实现最大程度的复用
具体为:
我们通过controller这个函数的第二个参数告诉AngularJS我们需要哪个模块实现功能(所谓"需要"就是一种"依赖"),
然后AngularJS查找该模块交给我们使用,这个过程称为"注入"
4.1行内式注入:
XXX.controller('Controller1', ['$scope', function ($scope) {
}]);
4.2推断式(猜测式)注入:
XXX.controller('Controller1',function ($scope) {
});
第二种就是比第一种省略了数组,省略了模块声明,让AngularJS自己根据函数的参数寻找,所以一般不用第二种写法.
5.服务
其实就是AngularJS封装好的对象或者函数,可以帮我们很方便地做一些事情,为我们"服务"
服务使用方式与模块的使用方式相同
5.1 例如$location: AngularJS中一个提供获取地址相关信息的服务
<body ng-app="App">
<script src="angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('Controller1', ['$scope', '$location', function($scope, $location) {
console.log($location);
}]);
for(var key in location) {
console.log(key + '=>' + location[key]);
};
</script>
</body>
5.2 例如$http: AngularJS中AJAX的使用
<body ng-app="App">
<script src="angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('Controller1',['$scope', '$http', '$log', function ($scope, $http, $log){
// $http 本质是对XMLHttpRequest对象封装
// var xhr = new XMLHttpRequest;
// xhr.open('get/post', 'example.php?name=xxx');
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// xhr.send('xxx=18');
$http({
url: 'example.php',
// method: 'get',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
params: { // get 参数
name: '邱淑贞',
sex: '女'
},
data: { // post 传参
age: 18
}
}).success(function (info) {
// info 就是成功返回的数据
$log.info(info);
}).error(function (info) {
// info 就是失败返回的数据
$log.info(info);
});
}]);
</script>
</body>
5.3 服务也可以自定义
<body>
<div ng-controller="DemoController">
<h4>{{now}}</h4>
</div>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', 'showTime', function($scope, showTime) {
$scope.now = showTime.now;
}])
// 自定义服务显示日期
App.service('showTime', ['$filter', function($filter) {
var now = new Date();
//依赖于$filter添加内置过滤器
var date = $filter('date');
this.now = date(now, 'y-M-d H:mm:ss');
//写在return也可以
//return {
// now: date(now, 'y-M-d H:m:s')
//}
}]);
</script>
</body>
