Angular.js学习笔记(三)

2020-09-03 09:46:56 浏览数 (1)

一、过滤器

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 模板文件,则使用该参数:

高级路由:

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

## 如果连入第三方文件时不写协议的话: 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

0 人点赞