AugularJS从入门到实践（二）
前 言
前端
AngularJS是为了克服HTML在构建应用上的不足而设计的。（引用百度百科）
本篇学习主要有两个部分：
①【AngularJS 过滤器】
②【AngularJS 服务 】
| 1、AngularJS 过滤器 |
AngularJS 过滤器：过滤器可以使用一个管道字符（|）添加到表达式和指令中。
>>>系统内置过滤器：
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
<body ng-app="app" ng-controller="ctrl">
<p>{{"aBcDeF"|lowercase}}</p> // 输出为abcdef
<p>{{"aBcDeF"|uppercase}}</p> //输出为ABCDEF
<p>{{123456|currency}}</p> //输出为$123,456.00
</body> <script language="JavaScript" src="angular-1.5.6/angular.js"></script>
<script type="text/javascript">
angular.module("app",[])
.controller("ctrl",function($scope){ }) </script>
写到这里就不得不说一下angular中的 ng-repeat 指令
ng-repeat 指令用于循环输出指定次数的 HTML 元素。
集合必须是数组或对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/bootstrap.css" />
</head> <body ng-app="app" ng-controller="ctrl"> <form class="form-horizontal"> </form>
<div class="form-group">
<label>请输入筛选信息：</label>
<input type="text" ng-model="search" />
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<tr ng-repeat="item in classes| filter:search | orderBy:'grade'">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.grade}}</td>
</tr>
</table>
</body>
<script src="libs/angular.js"></script>
<script type="text/javascript">
var app = angular.module("app",[])
.controller("ctrl",function($scope){
$scope.classes = [
{name:"张二",age:"22",grade:"88"},
{name:"张三",age:"21",grade:"89"},
{name:"李四",age:"20",grade:"90"},
{name:"李五",age:"21",grade:"91"},
{name:"王大麻子",age:"18",grade:"92"},
{name:"王二麻子",age:"17",grade:"93"}
];
}) </script>
</html>
| 2、AngularJS 服务 |
【服务Service】
$location：它可以返回当前页面的 URL 地址。
$http 服务: 服务向服务器发送请求，应用响应服务器传送过来的数据。
$timeout 服务: JS window.setTimeout 函数。
$interval 服务: JS window.setInterval 函数
<body ng-app="app" ng-controller="ctrl">
<pre>{{local}}</pre>
<p ng-bind="myHeader"></p>
<p ng-bind="num"></p>
<p>255转为16进制为{{gongneng}}</p>
<p>{{hex}}</p>
<p>{{123|filt}}</p> </body>
<script src="../libs/angular.js"></script>
<script> angular.module("app",[])
.controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){
$scope.local = $location.$$host;
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
$scope.num = 0;
$interval(function(){
$scope.num ++;
},1000); $scope.gongneng = $hexafy.$$gongneng;
$scope.hex = $hexafy.myFunc(255); })
/*自定义服务*/
.service('$hexafy', function() {
this.$$gongneng = "将转入的数字，转为16进制";
this.myFunc = function (x) {
return x.toString(16);
}
})
.filter("filt",function(){
return function(x){
return x.toString(16);
}
})
</script>
【自定义服务factory】
factory 是一个函数用于返回值,通常我们使用 factory 函数来计算或返回值。(factory使用上，与service差距不大)
<body ng-app="app" ng-controller="ctrl">
<p>
[功能]<br/>
{{gongneng}}
</p>
<p>
255转成16进制为：{{num}}
</p>
</body>
<script src="../libs/angular.js"></script>
<script> angular.module("app",[])
.controller("ctrl",function($scope,hexafy){
$scope.gongneng = hexafy.gongneng;
$scope.num = hexafy.myFunc(255);
})
.factory('hexafy',function(){
var obj = {
gongneng : "将转入的数字，转为16进制",
myFunc:function(x){
return x.toString(16);
}
};
return obj;
})
/*自定义服务*/
// .service('hexafy', function() {
// this.gongneng = "将转入的数字，转为16进制";
// this.myFunc = function (x) {
// return x.toString(16);
// }
// }) </script>
1、在AngularJS中，Service，factory都是基于provider实现的。
2、在provider中，通过$get()方法提供了factory的写法，用于返回 value/service/factory。；
3、provider是三种自定义服务中，唯一可以写进config配置阶段的一种。
<body ng-app="app" ng-controller="ctrl">
<p>
[功能]<br/>
{{gongneng}}
</p>
<p>
255转成16进制为：{{num}}
</p>
</body>
<script src="../libs/angular.js"></script>
<script> angular.module("app",[])
.controller("ctrl",function($scope,hexafy){
$scope.gongneng = hexafy.gongneng;
$scope.num = hexafy.myFunc(255);
}) /*定义一个provider服务*/
.provider('hexafy',function(){
// this.gongneng = "将转入的数字，转为16进制";
this.$get = function(){
var obj = {
gongneng : "将转入的数字，转为16进制",
myFunc : function(x){
return x.toString(16);
}
}
return obj;
}
}) // .factory('hexafy',function(){
// var obj = {
// gongneng : "将转入的数字，转为16进制",
// myFunc:function(x){
// return x.toString(16);
// }
// };
// return obj;
// }) /*自定义服务*/
// .service('hexafy', function() {
// this.gongneng = "将转入的数字，转为16进制";
// this.myFunc = function (x) {
// return x.toString(16);
// }
// }) </script>
学习时候的笔记，可能会有一些错误的地方，欢迎各位的批评指点。
反思，复盘，每天收获一点---------------------期待更好的自己
AugularJS从入门到实践（二）的更多相关文章
- AugularJS从入门到实践（一）
前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...
- AugularJS从入门到实践（三）
前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...
- Nginx从入门到实践(二)
静态资源web服务 静态资源类型 CDN CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工 ...
- 【实战】Docker入门实践二：Docker服务基本操作 和 测试Hello World
操作环境 操作系统:CentOS7.2 内存:1GB CPU:2核 Docker服务常用命令 docker服务操作命令如下 service docker start #启动服务 service doc ...
- 《python编程从入门到实践》读书实践笔记(二)
本文是<python编程从入门到实践>读书实践笔记11章的内容,主要包含测试,为体现测试的重要性,独立成文. 11 测试代码 写在前面的话,以下是我这些年开发中和测试相关的血泪史. 对于一 ...
- Docker入门教程（二）命令
Docker入门教程(二)命令 [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第二篇,介绍了Docker的基本命令以及命令的用法和功能. 在Docker ...
- WPF入门教程系列(二) 深入剖析WPF Binding的使用方法
WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...
- Python编程从入门到实践笔记——if语句
Python编程从入门到实践笔记——if语句 #coding=utf-8 cars=['bwm','audi','toyota','subaru','maserati'] bicycles = [&q ...
- Docker 从入门到实践（一）Docker 简介
读前须知:本教程大部分都是[Docker 从入门到实践 ]一书的知识,有兴趣可以直接观看书籍.同时,借鉴书籍的知识,如有侵权,请告知我,我会删除处理.谢谢. 一.什么是 Docker? Docker ...
随机推荐
- C#基础篇--静态成员、抽象成员、接口
1.静态成员: 静态成员(static).静态类与实例成员.类: 静态成员属于类所有,非静态成员属于类的实例所有. 静态成员不能标记为 Virtual,Abstract,Override,也就是说静态 ...
- be 动词
be 动词:表达人或事物的状态,即身份.性质.特征状态等 be动词 在翻译里面我们称之为缺项词,在我们的文化中很难找到一个具体的词汇与之像应对,我们只能用一个句子去解释它. be动词主要是用来表达人或 ...
- 转自52 梦回凉亭的她 Java常见问题，面试题
收集整理分享# 相关概念## 面向对象的三个特征封装,继承,多态.这个应该是人人皆知.有时候也会加上抽象.## 多态的好处允许不同类对象对同一消息做出响应,即同一消息可以根据发送对象的不同而采用多种不 ...
- 学习web前端怎样入门？初学者赶紧看过来！
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
- Deep Q-Network 学习笔记（二）—— Q-Learning与神经网络结合使用（有代码实现）
参考资料: https://morvanzhou.github.io/ 非常感谢莫烦老师的教程 http://mnemstudio.org/path-finding-q-learning-tutori ...
- Zab: A simple totally ordered broadcast protocol（译）
摘要 这是一个关于ZooKeeper正在使用的全序广播协议(Zab)的简短概述.它在概念上很容易理解,也很容易实现,并且提供很高的性能.在这篇文章里,我们会呈现ZooKeeper在Zab上的需求,也会 ...
- R自带数据包
datasets(R自带数据包) 作者:王彦博 作品来源:百度百科 precip #长度为70的命名向量 euro #欧元汇率,长度为11,每个元素都有命名 landmasses #48个陆地的面积, ...
- 【Android Developers Training】 95. 创建一个同步适配器
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【Android Developers Training】 35. 序言：分享文件
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 14.什么是jsp动作
JSP动作元素(action elements),动作元素为请求处理阶段提供信息.动作元素遵循XML元素的语法,有一个包含元素名的开始标签,可以有属性,可选的内容,与开始标签匹配的结束标签. 包含的类 ...