AngularJs实战（六）

==============angularJS 服务的使用=========================
var myModule=angular.module("MyModule",[]);/*** 使用 angularJS 中的服务*/
myModule.controller('LoadDataCtrl', ['$scope','$http', function($scope,$http){//模拟请求后台的数据$http({method: 'GET',url: 'data.json'}).success(function(data, status, headers, config) {console.log("success...");console.log(data);$scope.users=data;}).error(function(data, status, headers, config) {console.log("error...");});
}]);//页面中
<body><div ng-controller="LoadDataCtrl"><ul><li ng-repeat="user in users">{{user.name}}</li></ul></div>
</body>

===============自定义服务=====================
var myServiceApp = angular.module("MyServiceApp", []);// controller 中公共的部分抽取成服务
myServiceApp.factory('userListService', ['$http',function($http) {//作请求处理//参数、路径var doRequest = function(username, path) {return $http({method: 'GET',url: 'users.json'});}//对外暴露的方法return {userList: function(username) {return doRequest(username, 'userList');}};}
]);/*** 在 controller 中注入服务，并使用这个自定义的服务（userListService）* * $timeout ：多长时间后再做这件事，常用于防止页面常刷，而产生抖动*  自定写的服务要写在最后面*/
myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',function($scope, $timeout, userListService) {var timeout;//观察页面中 ng-model 的变化//$watch :监控数据模型的变化$scope.$watch('username', function(newUserName) {if (newUserName) {if (timeout) {$timeout.cancel(timeout);}timeout = $timeout(function() {//使用服务中封装的请求处理方法userListService.userList(newUserName).success(function(data, status) { //请求成功时$scope.users = data;});}, 350);}});}
]);//... 其它的controller//页面中
<body><div ng-controller="ServiceController"><label>用户名</label><input type="text" ng-model="username" placeholder="请输入用户名" /><pre ng-show="username">{{users}}</pre></div>
</body>

var myModule=angular.module("MyModule",[]);//使用内置的filter ,格式化数据
<body>{{ 1304375948024 | date }}<br>{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}<br>{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}<br></body>


var myModule=angular.module("MyModule",[]);/*** 自定义 过滤器*/
myModule.filter('filter1',function(){// item ：会自将页面中值传进来return function(item){return item + 'o(∩_∩)o';}
});  <body>{{'大漠穷秋'|filter1 }}
</body>

===============项目实战==========================
1.目录结构

2.根据网页原型编写各个模块

表单校验：
本地
http://damoqiongqiu.iteye.com/blog/1920191

远程：
http://damoqiongqiu.iteye.com/blog/1920993

3.编写业务逻辑
controller控制层：请求数据
service服务层：控制层中公共的部分
mode模型层：绑定数据
filter:数据格式化

AngularJs实战（六）相关推荐

《AngularJS实战》——3.1　模板中的过滤器
本节书摘来自华章出版社<AngularJS实战>一书中的第3章,第3.1节,作者:陶国荣,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.1 模板中的过滤 ...
Java并发编程原理与实战六：主线程等待子线程解决方案
Java并发编程原理与实战六:主线程等待子线程解决方案参考文章: (1)Java并发编程原理与实战六:主线程等待子线程解决方案 (2)https://www.cnblogs.com/pony1223 ...
Python爬虫实战六之抓取爱问知识人问题并保存至数据库
大家好,本次为大家带来的是抓取爱问知识人的问题并将问题和答案保存到数据库的方法,涉及的内容包括: Urllib的用法及异常处理 Beautiful Soup的简单应用 MySQLdb的基础用法正则表 ...
AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式一.使用$on.$emit和$broadcast进行controller通信虽然AngularJ ...
《AngularJS实战》——3.2　过滤器的应用
本节书摘来自华章出版社<AngularJS实战>一书中的第3章,第3.2节,作者:陶国荣,更多章节内容可以访问云栖社区"华章计算机"公众号查看. 3.2 过滤器的应用 ...
istio 实战六全链路监控 - Jaeger
系列文章 istio 实战一 Kubernetes 中快速搭建 istio istio 实战二 bookinfo 部署 istio 实战三智能路由 istio 实战四权重路由以及监控 is ...
STM32实战六 PWM加移相正交
这一章编写PWM程序,使用TIM3以两个通道,完全映射到PC6和PC7,除普通PWM输出外,增加移相正交PWM功能,为后面的编码器计数模式提供信号源. PWM.h #ifndef __PWM__ #d ...
OpenCV C++案例实战六《绿幕视频背景替换》
OpenCV C++案例实战六<绿幕视频背景替换> 前言一.图像预处理二.HSV色彩空间转换 1. cvtColor色彩空间转换 2. inRange抠图三.背景替换四.源码总结 ...
SpringBoot+MyBatis+MYSQL项目实战六（新增收货地址）
SpringBoot+MyBatis+MYSQL项目实战六(新增收货地址) 项目源码地址:电脑商城实战点击新增收货地址一:新增收货地址--数据表的创建 CREATE TABLE t_address ...
OpenVINO 2022.3实战六：NNCF 实现 YOLOv5 模型 INT8 量化
OpenVINO 2022.3实战六:NNCF 实现 YOLOv5 模型 INT8 量化 1 将YOLOv5模型转换为OpenVINO IR 使用OpenVINO模型优化器将YOLOv5模型转换为Op ...

AngularJs实战（六）

AngularJs实战（六）相关推荐

最新文章

热门文章