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 ...
随机推荐
- redis 原子增一的妙用
有这样一个需求,插入数据库之前需要了解数据库ID号,考虑到不同的主机怎么去协同这个ID呢 同时要保证每个主机分到不同的ID号,这个比较麻烦,如果独立开一个服务来一个C/S操作比较麻烦,幸好REDIS提 ...
- 使用SqlLocalDB命令行管理LocalDB
SqlLocalDB.exe start v11.0 SqlLocalDB.exe info v11.0 SQL Server Management Stdio添加管道连接实例 默认实例名(local ...
- PowerDesigner中Name与Code同步的问题
转自:http://blog.sina.com.cn/u/48932504010005t9 PowerDesigner中,但修改了某个字段的name,其code也跟着修改,这个问题很讨厌,因为一般来说 ...
- C++ 一些笔记
1.指针.引用和const ; int &a = i; int *p ; int *&r=p;//r是对指针的引用 r=&i;//实质上是将p指向i *r=;//实质上是将i的 ...
- android中加载的html获取的宽高不正确
wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...
- BHP Net Tool
#导入需要用到的包 import sys import getopt import threading import socket import subprocess #定义全局变量 listen = ...
- ubuntu kylin 16.04系统的基本安装
系统版本:ubuntu kylin 16.04 硬件状况:500G HDD+120G SSD 已安装操作系统:WIN 10专业版(craked) ——WIN 10系统是装在SSD的第一个盘符内的.以前 ...
- java.lang.NoSuchMethodError: antlr.collections.AST.getLine()I错误解决
在J2EE框架下开发web网站,这种问题经常遇到,只要我们网上搜一下,就可以看到很多版本的,我整理一下: 第一种可能性解决:看看我的项目:主要 是里面的Structs 1.3 (structs 2)和 ...
- chosen组件实现下拉框
chosen组件用于增强原生的select控件,使之有更好的用户体验.官方demo https://harvesthq.github.io/chosen/ 目前项目中碰到的使用,比如一个页面中有两个不 ...
- linux 模块常用命令
lsmod | grep pcspkr 查看pcspkr模块是否运行modprobe -r pcspkr 删除pcspkr模块modinfo pcspkr 查看pcspkr模块信息m ...