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 ...
随机推荐
- pb将datawindow数据导出EXCEL
PB有dw有自带功能可以将数据导出成excel,但是head却是字段名称,这样不直观. 所见即所得的方式是,将dw保存成html然后将后缀名改成xls,但这样的方式还有些问题就是会错列,解决的方法是将 ...
- [转] Loren on the Art of MATLAB
http://blogs.mathworks.com/loren/2007/03/01/creating-sparse-finite-element-matrices-in-matlab/ Loren ...
- Python 中的map和reduce学习笔记
map和reduce都是Python中的内置函数 map函数接受两个参数,第一个参数是函数,第二个参数是列表,将函数依次作用于列表中的元素,并返回一个元素 reduce同样以函数和列表作为参数,区别在 ...
- 创建SO bapi
转自http://blog.sina.com.cn/s/blog_1647b3eff0102wi32.html 1.创建销售订单使用的BAPI BAPI_SALESORDER_CREATEFROMDA ...
- mysql 导入导出方法。
1.导出 mysqldump -u username - p databasename >名.sql enter passward: 2.导入:mysql -uroot -proot sour ...
- eclipse Run On Server 异常：could not load the Tomcat Server configuration at Servers\tomcat V5.0 Sertomcat
eclipse Run On Server 异常:could not load the Tomcat Server configuration at Servers\tomcat V5.0 Serto ...
- Perl的基本语法（转）
(原文来自:http://www.jb51.net/shouce/perl.htm)
- *** missing separator. Stop.
在make命令后出现这种错误提示,是提示第2行没有分隔符. 例如: 1 target:prerequisites 2 command -- 改为: 1 target:prerequisites 2 ...
- Git分布式版本管理工具基本使用方法
一.Git简介 早先linux内核代码托管在BitKeeper,这个是商业的,但是免费给linux社区使用: linux社区有个人试图破解BitKeeper,被BitKeeper发现后不再免费提供使用 ...
- 关于js中空值比较和传值的问题
昨天写导出功能时,有个条件审核状态,其中一个审核状态的key为0,我也是醉了. 然后我注意到这方面的问题,在网上找了找,我的理解可能有点问题.但是目前也就是这样了,以后在学习吧! 正文: js中各种类 ...