Anjular中的路由配置以及服务等模块的一些基本操作
1.路由的配置：
在Angular.js中，我们可以根据自己的需求来配置路由，以达到当url中的地址改变时，会跳转不同的页面
<script>
//一开始的url:"http://mycc.com#/"
//第一步：创建模板
//数组里面的是该模板要依赖的模板，这边要依赖的是ngRoute模块
var app = angular.module('movie_list', ['ngRoute','myJsonpService'])
//第二步：配置路由规则
app.config(['$routeProvider',function($routeProvider) {
//当url变成:"http://mycc.com#/cc"时，执行when里面的函数
$routeProvider.when('/cc'，{
template:"这里面可以放一段具有html语义的字符串,如:<div>这是div标签</div>",
templateUrl:"这里面放的是html的路径,这个与template只能二选一",
controller:"控制器名称,如:routeController"
})；
}]);
//有需要的话可以创建一个控制器
//这边的数组里面需要什么就传入什么(但是传入的要是angular里提供的或者是创建的service里面的,譬如这边的MyService)
app.controller('routeController', ['$scope',"$location",'MyService', function($scope,$location,MyService){
$scope.name = 'cc';//这边设置的属性，在上面的template/templateUrl中可以直接使用
//可以直接使用MyService里面封装的函数,传入相关参数即可
MyService.jsonp();
}])
</script>
2.服务模块的配置
这个创建的服务可以在其他模块中使用
(function(angular){
// 1.创建模块
var app = angular.module('myJsonpService', [])
// 2.创建服务
app.service('MyService',['$window',function($window){
this.jsonp = function(url, arg, fn){
// 1.创建script标签
var scrip = $window.document.createElement('script')
// 2.设置src属性值
// 2.1 拼接url及arg
// arg {} ?a=b&c=22
var querystring = ''
for(var key in arg){
querystring += key+'='+ arg[key] +'&'
}
var funcName = 'myJsonp'+ $window.Math.random().toString().substr(2) // 0.232
url += '?' + querystring +'callback='+funcName
$window[funcName] = function(data){
fn(data)
}
scrip.src = url
// 3.把script标签添加到dom上去
$window.document.body.appendChild(scrip)
}
}])
})(angular)
3.自定义模块
使用自定义模块可以创建我们想要的模块，实现我们想要的功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div my-demo></div>
</body>
<script>
//一开始的url:"http://mycc.com#/"
//第一步：创建模板
//数组里面的是该模板要依赖的模板，这边要依赖的是ngRoute模块
var app = angular.module('demo', [])
//第二步：创建自定义指令
//参数一:指令的名称(注意的是命名规则)
//参数二:与创建控制器的第二个数组参数相类似
app.directive('myDemo', [function(){
//返回的是一个对象
return {
// name: '',
// priority: 1,
// terminal: true,
scope: {}, //传入的是一个对象，可以获取自定义指令的属性值
// controller: function($scope, $element, $attrs, $transclude) {},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
template: '',//一个HTML字符串
templateUrl: '',//1.html文件的路径 2.script标签的id
replace: true,//布尔值，为true时，模板会被用来替换自定义指令所在的标签
transclude: true,//布尔值，为true时，将自定义标签中的内容插入到模板中拥有ng-transclude指令的标签中
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
link: function($scope, iElm, iAttrs, controller) {
//
}
};
}]);
</script>
</html>
Anjular中的路由配置以及服务等模块的一些基本操作的更多相关文章
- JavaEE开发之SpringMVC中的路由配置及参数传递详解
在之前我们使用Swift的Perfect框架来开发服务端程序时,聊到了Perfect中的路由配置.而在SpringMVC中的路由配置与其也是大同小异的.说到路由,其实就是将URL映射到Java的具体类 ...
- Django中的路由配置简介
Django中的路由配置简介 路由配置(URLconf)就是Django所支撑网站的目录.其实,我们利用路由交换中的"寻址"的概念去理解Django的路由控制会简单很多,它的本质就 ...
- Flask中的路由配置
在Flask中也同样有django中的路由配置只不过没有djngo那么严格主要的参数有一下六个记住常用的就可以了 1.endpoint 反向生成url地址标志,默认视图函数名 2.methods ...
- react中的路由配置踩坑记
react 路由配置中,如果根路由(/)匹配一个组件,另一个路由(/list)在进行匹配的时候也会匹配到根路由(/),即在 /list 页面展示的时候 / 页面总是展示在上方. 此时如果想进行严格匹配 ...
- Vue2.0中的路由配置
Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...
- 在RedHat Linux系统中安装和配置snmp服务
检查系统是否安装snmp服务 # rpm -qa|grep snmp net-snmp-5.3.2.2-17.el5 net-snmp-perl-5.3.2.2-17.el5 net-snmp-dev ...
- django中url路由配置及渲染方式
今天我们学习如何配置url.如何传参.如何命名.以及渲染的方式,内容大致有以下几个方面. 创建视图函数并访问 创建app django中url规则 捕获参数 路径转换器 正则表达式 额外参数 渲染方式 ...
- vue项目中router路由配置
介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router: cnpm install vue-rou ...
- MVC 伪静态路由、MVC路由配置，实现伪静态。
前段时间,研究了一下mvc路由配置伪静态,在网上扒了很多最后还是行不通,所以我现在把这些心得整理出来,供大家分享: 1.mvc中默认路由配置是:http://localhost:24409/Home/ ...
随机推荐
- dp--最大区间和变形-cf-1155D
dp--最大区间和变形-cf-1155D D. Beautiful Array time limit per test 2 seconds memory limit per test 256 mega ...
- Java 线程类别
Java 线程类别 守护线程和非守护线程 守护线程和非守护线程之前的唯一区别在于:是否阻止JVM的正常退出. JVM正常退出是与异常退出相对的概念,异常退出如调用System.exit(status) ...
- centos 7 上安装 testlink 1.9.15/1.9.16/1.9.17/1.9.18 （mysql/php/httpd）
1.9.18 的System Requirements - server.注意,适用于 1.9.15 及以后. Server environment should consist of: web-se ...
- ASP.NET MVC利用ActionLink实现动态组合查询
一个文件传输数据表,内有日期.传输协议.传输方向(上传或下载).文件名等信息,完整的表内容显示如下: 现在需要分类查询,即按照协议和传输方向查询.单独的分类查询问题并不大,比如,按协议查询,在View ...
- TortoiseGit学习系列之TortoiseGit基本操作修改提交项目（图文详解）
前面博客 TortoiseGit学习系列之TortoiseGit基本操作克隆项目(图文详解) TortoiseGit基本操作修改提交项目 项目克隆完成后(可以将克隆 clone 理解为 下载,检出 c ...
- 基于Flume做FTP文件实时同步的windows服务。
需求:做一个windows服务,实现从ftp服务器实时下载或者更新文件到本地磁盘. 功能挺简单的.直接写个ftp工具类用定时器跑就能搞定,那我为什么不用呢? 别问,问就是我无聊啊,然后研究一下Flum ...
- Java 中 String 的常用方法（一）
上一篇介绍了 String 中的几个常用构造方法,由 String 这个核心对象发散出去关于字符的编码,字符的字节表达,对 GC 的影响,正则表达式,模式匹配,这可能是 Java 里内涵最丰富的对象了 ...
- multi-threads JavaEE 容器
Thread -- Request What is recommended way for spawning threads from a servlet in Tomcat [duplicate] ...
- redis的数据类型(一) key操作
redis是一个key-value形式的数据缓存,因此包括key和value. 一.key的说明 1.redis的key Redis的key是字符串类型,但是key中不能包括边界字符,由于ke ...
- JavaScript函数——闭包
闭包 概念 只有函数内部的子函数才能读取局部变量,所以闭包可以理解成"定义在一个函数内部的函数".在本质上,闭包是将函数内部和函数外部连接起来的桥梁 例子 function out ...