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>
一混五六年
