Anjular中的路由配置以及服务等模块的一些基本操作

前端开发

2017-03-15

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>

软件 url