前  言

 前端 

    AngularJS是为了克服HTML在构建应用上的不足而设计的。(引用百度百科)

本篇学习主要有两个部分:

①【AngularJS 过滤器】
  ②【AngularJS  服务 】
 
          

1、AngularJS 过滤器
【常用指令】
 AngularJS 过滤器:过滤器可以使用一个管道字符(|)添加到表达式和指令中。
         
        
         >>>系统内置过滤器:
        
            currency     格式化数字为货币格式。
            filter     从数组项中选择一个子集。
            lowercase     格式化字符串为小写。
            orderBy     根据某个表达式排列数组。
            uppercase     格式化字符串为大写。

[lowercase、uppercase、currency]

    <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>
【filter和orderBy】

    写到这里就不得不说一下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>
 【自定义服务provide】

    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从入门到实践(二)的更多相关文章

  1. AugularJS从入门到实践(一)

      前  言  前端    AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...

  2. AugularJS从入门到实践(三)

      前  言  前端    AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.Angu ...

  3. Nginx从入门到实践(二)

    静态资源web服务 静态资源类型 CDN CDN的基本原理是广泛采用各种缓存服务器,将这些缓存服务器分布到用户访问相对集中的地区或网络中,在用户访问网站时,利用全局负载技术将用户的访问指向距离最近的工 ...

  4. 【实战】Docker入门实践二:Docker服务基本操作 和 测试Hello World

    操作环境 操作系统:CentOS7.2 内存:1GB CPU:2核 Docker服务常用命令 docker服务操作命令如下 service docker start #启动服务 service doc ...

  5. 《python编程从入门到实践》读书实践笔记(二)

    本文是<python编程从入门到实践>读书实践笔记11章的内容,主要包含测试,为体现测试的重要性,独立成文. 11 测试代码 写在前面的话,以下是我这些年开发中和测试相关的血泪史. 对于一 ...

  6. Docker入门教程(二)命令

    Docker入门教程(二)命令 [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第二篇,介绍了Docker的基本命令以及命令的用法和功能. 在Docker ...

  7. WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

    WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...

  8. Python编程从入门到实践笔记——if语句

    Python编程从入门到实践笔记——if语句 #coding=utf-8 cars=['bwm','audi','toyota','subaru','maserati'] bicycles = [&q ...

  9. Docker 从入门到实践(一)Docker 简介

    读前须知:本教程大部分都是[Docker 从入门到实践 ]一书的知识,有兴趣可以直接观看书籍.同时,借鉴书籍的知识,如有侵权,请告知我,我会删除处理.谢谢. 一.什么是 Docker? Docker ...

随机推荐

  1. itmacy_我的博客

    开通博客的第一天,并不希望自己以后像写流水账一样来写自己的博客,而是希望每一篇博客,无论是转载还是原创,都是经过深思熟虑,并且有意义的...

  2. 初入计算机图形学(二):对bidirectional path tracing的一些困惑

    本人水平有限,若有错误也请指正~ 前文提及了光线追踪的一些常用手法,但是其中path tracing的实现最为简单,但是其最致命的一个缺点就是图像收敛速度很慢..原因在于从摄影机发射出的每一条光线若不 ...

  3. JavaScript:window.onload问题

    前几天做一个点击按钮,就实现切换图片效果的小demo时,代码看上去没问题,就是达不到效果.让我百思不得其解. 代码如下: <!DOCTYPE html> <html> < ...

  4. Java IO流之转换流

    一.转换流 1.在IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换流 2.转换流用于在字节流和字符流之间转换 3.转换流本身是字符流 二.两种转换流 Ou ...

  5. 常见类——Object

    1.在Java类继承结构中Java.lang.Object类位于顶端   2.如果定义一个Object类没有使用extends关键字声明其父类,则其父类为Java.lang.Object类   3.O ...

  6. Codility---MaxProfit

    Task description A zero-indexed array A consisting of N integers is given. It contains daily prices ...

  7. PHP·笔记(函数总结)

    PHP 指 PHP:超文本预处理器(译者注:PHP: Hypertext Preprocessor,递归命名) PHP 是一种服务器端的脚本语言,类似 ASP PHP 脚本在服务器上执行 PHP 支持 ...

  8. C# 中文在URL中的编码

      UTF-8中,一个汉字对应三个字节,GB2312中一个汉字占用两个字节. 不论何种编码,字母数字都不编码,特殊符号编码后占用一个字节. //按照UTF-8进行编码 string tempSearc ...

  9. 基于angularJs的单页面应用seo优化及可抓取方案原理分析

    公司使用angularJs(以下都是指ng1)框架做了互联网应用,之前没接触过seo,突然一天运营那边传来任务:要给网站做搜索引擎优化,需要研发支持.搜了下发现单页面应用做seo比较费劲,国内相关实践 ...

  10. shell脚本调用C语言之字符串切分之strtok函数

    今天上午在写一个需求,要求的比较急,要求当天完成,我大致分析了一下,可以采用从shell脚本中插入一连串的日期,通过调用proc生成的可执行文件,将日期传入后台数据库,在数据库中进行计算.需要切分日期 ...