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 ...
随机推荐
- Grunt入门教程
引入:grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于: ① 压缩文件 ② 合并文件 ③ 简单语法检查 环境:grunt是基于nodejs运行的,所以需要有nodejs,在N ...
- 最近开发的ECG项目
最近参与公司开发了一款读取ECG心电接口程序 原理就是通过心电设备读取患者的心电数据 并生成ECG文件 然后通过ECG客户端程序读取ECG文件 并解析转换成图片 上传至服务器 下边是客户端程序截图 客 ...
- Linux软件的安装方法！！！
1.yum/rpm(*.rpm) 包管理器:直接yum/rpm安装. 优点:是全自动化安装,不需要为依赖问题发愁,缺点是自主性太差,软件的功能.存放位置固定,不易变更. 2.源码包(*.tar.gz) ...
- 重复发起Volley请求不要使用同一对象
1.创建volley请求Request request = new JsonObjectRequest(...); 2.添加到队列中mRequestQueue.add(request); reques ...
- Apriori 关联分析算法原理分析与代码实现
前言 想必大家都听过数据挖掘领域那个经典的故事 - "啤酒与尿布" 的故事. 那么,具体是怎么从海量销售信息中挖掘出啤酒和尿布之间的关系呢? 这就是关联分析所要完成的任务了. 本文 ...
- springmvc学习笔记--ueditor和springmvc的集成
前言: 在web开发中, 富文本的编辑器真心很重要. 有电商店铺的打理, 新闻稿/博客文章/论坛帖子的编辑等等, 这种所见即所的编辑方式, 大大方便了非技术人员从事互利网相关的工作. 因为手头有个小项 ...
- service的简单使用
Service的生命周期方法比Activity少一些,只有onCreate, onStart, onDestroy 我们有两种方式启动一个Service,他们对Service生命周期的影响是不一样的. ...
- php部分---单文件上传的封装类
<?php $fileinfo=$_FILES["myfile"]; function uploadfile($fileinfo,$allowext=array('jpeg' ...
- WP8应用上传失败查错
开发的一个应用,好久没有更新. 最近做了些修改,在设备上安装测试,没什么 问题,上传到STORE,收到反馈说有两个操作必挂. 知道了直接设备安装测试和从STORE上下载,会有些不同. http://s ...
- oracle恢复误删除数据
--开启行移动功能alter table 表名 enable row movement;--恢复表数据flashback table 表名 to timestamp to_timestamp('201 ...