首页 技术 正文
技术 2022年11月20日
0 收藏 700 点赞 4,935 浏览 4045 个字

一、过滤器

1、uppercase,lowercase 大小写转换
{{ “lower cap string” | uppercase }} // 结果:LOWER CAP STRING
{{ “TANK is GOOD” | lowercase }} // 结果:tank is good
2、date 格式化
{{1490161945000 | date:”yyyy-MM-dd HH:mm:ss”}} // 2017-03-22 13:52:25
3、number 格式化(保留小数)
{{149016.1945000 | number:2}}//保留两位
{{149016.1945000 | number}}//默认为保留3位
4、currency货币格式化
{{ 250 | currency }} // 结果:$250.00
{{ 250 | currency:”RMB ¥ ” }} // 结果:RMB ¥ 250.00
5、filter查找
输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集
// 查找name为iphone的行
{{ [{“age”: 20,”id”: 10,”name”: “iphone”},
{“age”: 12,”id”: 11,”name”: “sunm xing”},
{“age”: 44,”id”: 12,”name”: “test abc”}
] | filter:{‘name’:’iphone’} }}
同时filter可以自定义比较函数。
6、limitTo 截取
{{“1234567890” | limitTo :6}} // 从前面开始截取6位
{{“1234567890” | limitTo :6,6}} // 从第6位开始截取6位
{{“1234567890” | limitTo:-4}} // 从后面开始截取4位
7、orderBy 排序
// 根据id降序排
{{ [{“age”: 20,”id”: 10,”name”: “iphone”},
{“age”: 12,”id”: 11,”name”: “sunm xing”},
{“age”: 44,”id”: 12,”name”: “test abc”}
] | orderBy:’id’:true }}

// 根据id升序排
{{ [{“age”: 20,”id”: 10,”name”: “iphone”},
{“age”: 12,”id”: 11,”name”: “sunm xing”},
{“age”: 44,”id”: 12,”name”: “test abc”}
] | orderBy:’id’ }}
9、json(不用掌握,基本用不上)

二、服务

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
$location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象,但 window.location 对象在 AngularJS 应用中有一定的局限性。
AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
AngularJS $interval 服务对应了 JS window.setInterval 函数。

创建自定义服务
你可以创建访问自定义服务,链接到你的模块中:
创建名为hexafy 的访问:
app.service(‘hexafy’, function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
要使用访问自定义服务,需要在定义过滤器的时候独立添加:
实例
使用自定义的的服务 hexafy 将一个数字转换为16进制数:
app.controller(‘myCtrl’, function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});

三、路由

NG中路由是单独提供的功能模块 ngRoute, 也是一个单独发行的文件
– 安装或者下载angular-route的包
– 引入这个包
– 在自己的模块中添加 ngRoute 依赖
– 路由配置(配置路由规则)
+ 规则指的就是 什么样的请求 找什么控制器
+ [{url:’/sdf’,controller:’MainController’}]
– 编写对应的控制器和视图

实例解析1:
1、载入了实现路由的 js 文件:angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module(‘routingDemoApp’,[‘ngRoute’])
3、使用 ngView 指令。
<div ng-view></div>
该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。
module.config([‘$routeProvider’, function($routeProvider){
$routeProvider
.when(‘/’,{template:’这是首页页面’})
.when(‘/computers’,{template:’这是电脑分类页面’})
.when(‘/printers’,{template:’这是打印机页面’})
.otherwise({redirectTo:’/’});
}]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。

实例解析2:(黑科技写法–自称)
<script id=”a_tmpl” type=”text/ng-template”>
<!– 只有type=”text/javascript”的script节点才会被当做JS执行 –>
<!– script中的内容就算不能执行,也不可以显示在界面上 –>
<h1>{{title}}</h1>
</script>

module.config([‘$routeProvider’, function($routeProvider){
$routeProvider
.when(‘/’,{templateUrl: ‘a_tmpl’})
.when(‘/computers’,{templateUrl: ‘a_tmpl’})
.when(‘/printers’,{templateUrl: ‘a_tmpl’})
.otherwise({redirectTo:’/’});
}]);

路由设置对象:
AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。
路由配置对象语法规则如下:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
参数说明:
template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:
.when(‘/computers’,{template:’这是电脑分类页面’})
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:
$routeProvider.when(‘/computers’, {
templateUrl: ‘views/computers.html’,
});
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
controller:
function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
controllerAs:
string类型,为controller指定别名。
redirectTo:
重定向的地址。
resolve:
指定当前controller所依赖的其他模块。

高级路由:

控制器中传入参数$routeParams用来代表路由中的值,传入参数$route,用于在switch(status)–‘var status=$routeParams.status’函数中的default中来更新$routeParams值为空

,代码为:$route.updateParams({status:”});
如果锚点是/students/zhangsan
可以写成/:role/:name来对应此锚点
会得到{role:students,name:zhangsan}对象

## 如果连入第三方文件时不写协议的话:
http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js

<script src=”//apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js”></script>
如果当前你的网站是HTTP的方式部署的话,请求
http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js
如果是HTTPS的话,请求
https://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,918
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,444
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,255
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,069
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,701
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,741