angular（3）服务 --注入---自定义模块--单页面应用
ng内部，一旦发生值改变操作，如$scope.m=x,就会自动轮询$digest队列，触发指定的$watch，调用其回调函数，然后修改dom树。
1.ng提供了许多内置的服务，例如常用的$scope\$http\$window\$location等。
http：POST请求：
var app = angular.module('myApp', ['ng']);
app.run(function($http){ //post 请求设置请求头
$http.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};
});
app.controller('ctl', function ($scope,$http) {
var obj={"name":"xiaode","age":16};
$scope.sendData=function () {
console.log($.param(obj));
$http.post('server.php',$.param(obj)).success(function (data) {
$scope.data=data
})
}
})GET请求类似不需要设置请求头
自定义服务
factory自定义服务：app.factory(name,fn) fn为一个函数返回对象
service自定义服务：app.factory(name,fn) fn为一个构造函数
constant、value自定义服务 类似不过第二个参数是一个对象
demo：
<script>
var app = angular.module('myApp', ['ng']);
/*自定义服务*/
app.factory('$output',function () { //对象形式 factory
return{
print:function (msg) {
console.log(msg);
}
}
});
app.service('$student',function () { //构造函数的形式
this.name='Mical';
this.speak=function () {
console.log(this.name);
}
});
app.controller('ctl', function ($scope,$output,$student) {
$output.print('ddsd');
console.log($student.name);
})
<script>
2. 三种写法：推断式 标记式 行内式 ，下面demo只是写出 注入服务的形式
var app = angular.module('myApp', ['ng']);
app.factory('$show', function () {
return {
show: function () {
alert("hello factory show");
}
}
});
app.service('$print', function () {
this.print = function () {
alert('hello serverce print');
}
});
app.controller('ctl1', function ($scope, $print, $show) {
//推断式注入不需要关注参数的先后顺序 ng会推断这个服务是否存在
//不能处理压缩和混淆后的代码，只能处理原始代码
});
var ctrFunc = function ($scope, $show, $write) {
};
ctrFunc.$inject = ['$scope', '$show', '$write']; //标记式依赖注入不能是匿名函数
app.controller('ctl2', ctrFunc);
app.controller('ctl3', ['$scope', '$print', '$show', function ($scope, $print, $show) {
//行内式，最优写法
}])
</script>
3.ps：手动可以通过 var jector=angular.injector（[‘ng’，‘myApp’]）得到注入器 然后has（‘’）判断 在get（‘’）
4.自定义模块：
<script>
var app01 = angular.module('myApp01', ['ng']);
app01.factory('$custom',function () {
return {
show:function () {
console.log('自定义模块');
}
}
});
app02=angular.module('myApp02',['ng','myApp01']);
app02.controller('ctl', ['$scope','$custom',function($scope,$custom) {
$scope.print=function () {
$custom.show();
}
}])
</script>
5.单页面应用(SPA)
异步请求，通过路由确定资源，局部更新
步骤：
1.创建唯一完整的页面:index.html，引入angular.js和angular-route.js
2.创建自定义模块，声明依赖于ng和ngRoute两个模块3.在index.html的body中使用ngView指令声明一个容器元素，用于盛放模板页面
4.创建模板页面
5.在当前模块中使用ngRoute提供的对象配置路由字典
6.创建几个模板页面
7.测试路由字典的配置是否正确 http://127.0.0.1/index.html#/路由地址
上demo：
首先是html片段
main.html
<div ng-include="'tpl/header.html'" ></div> //引入头部html片段
<h1>主页</h1>
<button ng-click="jump('/Person/3')">跳转到person</button> //3是传入到person的参数
<div ng-include="'tpl/footer.html'"></div>person.html
<div ng-include="'tpl/header.html'"></div>
<h1>个人中心</h1>
<a ng-click="jump('/Main')">跳转到主页</a>
<div ng-include="'tpl/footer.html'"></div>
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular</title>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
</head>
<body ng-controller="parentCtrl">
<div ng-view></div>
<script>
var app = angular.module('myApp',['ng','ngRoute']);
app.controller('parentCtrl',['$scope','$location',function ($scope,$location) {//需要$location服务
$scope.jump=function (arg) { //在body控制器中定义jump(),在子$scope里面都可以用
$location.path(arg)
}
}]);
app.config(function ($routeProvider) { //路由配置
$routeProvider.when('/Person',{
templateUrl:'tpl/person.html'
}).when('/Main',{
templateUrl:'tpl/main.html'
}).when('/Person/:id',{ //接收方接收参数 参数名ID
templateUrl:'tpl/person.html',
controller:'personCtrl'
}).otherwise({
redirectTo:'/Main'
})
});
app.controller('personCtrl',['$scope','$routeParams',function ($scope,$routeParams) {
console.log($routeParams.id); //如果需要传参数，就需要$scopeParms服务
}]);
</script>
</body>
</html>
angular（3）服务 --注入---自定义模块--单页面应用的更多相关文章
- discuz自定义生成单页面
在pc端,若要生成一个单页面,有一个比较方便的方法是生成新的专题页,然后diy其中的内容. 不过这种做法有两个缺点 1 url太过冗赘 2 只有一个插入url代码功能,没有文本编辑功能 而且文本框小的 ...
- 基于angular的route实现单页面cnodejs
Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...
- Cloud Test 单页面即时监测功能上线！
什么是即时监测? 即时监测,顾名思义是指输入 URL 后能够立即进行监测并展示结果,无需注册. 如下图,在输入框内输入需要监测的 URL,点击免费监测,即可展示网页监测结果: 图中我们可以看到页面各个 ...
- 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...
- AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...
- Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- H5单页面架构：requirejs + angular + angular-route
说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...
- 浅谈HTML5单页面架构（三）—— 回归本真：自定义路由 + requirejs + zepto + underscore
本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...
- angular factory Services provider 自定义服务 工厂
转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...
随机推荐
- linux动态时钟探索
在早期的linux内核版本的时间概念都是由周期时钟提供的.虽然比较有效,但是,对于关注能耗电量的系统上,就不能满足长时间休眠的需求,因为周期系统要求必须在一定的频率下,周期性的处于活动状态.因此,li ...
- SDK截图程序（一）
程序将系统窗口左上角100*100的图像复制到粘贴板上.程序的关键位置上加上了注释,相关知识<windows程序设计>第14章内容 #include <windows.h> # ...
- ftpget 从Windows FTP服务端获取文件
/********************************************************************************* * ftpget 从Windows ...
- javascript数组 去重
数组去重的方法有很多,到底哪种是最理想的,自己不清楚.于是自己测试了下数组去重的效果和性能.测试十万个数据,代码和所耗大概时间如下. 到底采用哪种方法,根据实际情况而定吧. /*方法一: 1,'1' ...
- Eclipse “cannot be resolved to a type” 错误
eclipse中遇到了“XX cannot be resolved to a type”的报错信息.网上找了些资料,本文将做以简单总结. (1)jdk不匹配(或不存在) 项目指定的jdk为“j ...
- 20160405互联网新闻<来自涛涛大产品>
1.滴滴或将收购腾讯地图,打造“滴滴地图”(滴滴与神州.uber之间的争斗,归根到底还是BAT的代理人之战)2.优信二手车否认合并传言 并谴责58同城仿冒优信网站(商战无所不用其极)3.京东旗下的拍拍 ...
- bootstrap-datetime 的使用
bootstrap-datetime js的下载 http://pan.baidu.com/s/1eQnE5dK html的代码 <div class="input-group dat ...
- ArrayList集合 、特殊集合
一.ArrayList集合 集合内可以放不同类型的元素 另:object类型为所有数据类型的基类 添加元素:.add(); 清空集合:al.clear(); 克隆集合:.clone(); 判断是否包含 ...
- oracle参数配置
一.Oracle LARGE_POOL_SIZE大小设置值多少 java_pool_size:以字节为单位, 指定 Java 存储池的大小, 它用于存储 Java 的方法和类定义在共享内存中的表示法, ...
- Android——通讯录
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...