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 ...
随机推荐
- PCH文件
作用:xcode5 自带的一个文件,xcode以后这个文件需要自己手动创建(这个是xcode5 和xcode6最大的区别)提前编译文件,一般情况下.我们在pch文件中#import一些项目中常用的软件 ...
- 易图软件之EaseMap Desktop 1.0发布
概述 易图软件之EaseMap Desktop 1.0是一款基于arcgis runtime for wpf开发的地图编辑软件. 软件代码编写历时1个月终于完成. 目前这个版本的功能包括: 地图基本操 ...
- 【转】Native JavaScript Data-Binding
原文转自:http://www.sellarafaeli.com/blog/native_javascript_data_binding Two-way data-binding is such an ...
- win7系统下的FTP配置
2016-07-12 工作中需要在win7操作系统下配置FTP,遇到许多问题,所以记录下来方便以后解决问题. FTP是文件传输协议的简称.用于Internet上的控制文件的双向传输.同时,它也是一个应 ...
- C语言读取PE文件信息（一）
接下来的内容来源于对该博客文章http://www.pediy.com/kssd/pediy06/pediy7006.htm的解析. 一.打印Sections信息.下面的程序打印出Windows_Gr ...
- 转 git安装配置
Win7上Git安装及配置过程 一.安装说明 1.Git在windows平台上安装说明. Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件 ...
- C#编程语言与面向对象——抽象基类与接口
在一个类前加“abstract”关键字,此类就成为抽象类. 对应的,在一个方法前加“abstract”关键字,此方法就成为抽象方法. abstract class Fruit //抽象类 { publ ...
- windows 7 右下角登陆信息去除
---恢复内容开始--- 开始--运行中输入regedit 找到注册表键值HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\NlaSvc\Par ...
- mysql 操作用户权限
使用可以对mysql数据库用户表有操作权限的用户名登陆mysqlinsert into user(Host,User,Password) values('%','name','password');如 ...
- CentOS7防火墙
一.CentOS7依然使用iptables的方法 CentOS7不再使用iptables,而是使用firewalld,若不想使用firewalld,可以停掉firewalld并且安装iptables- ...