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中的路由配置以及服务等模块的一些基本操作的更多相关文章

  1. JavaEE开发之SpringMVC中的路由配置及参数传递详解

    在之前我们使用Swift的Perfect框架来开发服务端程序时,聊到了Perfect中的路由配置.而在SpringMVC中的路由配置与其也是大同小异的.说到路由,其实就是将URL映射到Java的具体类 ...

  2. Django中的路由配置简介

    Django中的路由配置简介 路由配置(URLconf)就是Django所支撑网站的目录.其实,我们利用路由交换中的"寻址"的概念去理解Django的路由控制会简单很多,它的本质就 ...

  3. Flask中的路由配置

    在Flask中也同样有django中的路由配置只不过没有djngo那么严格主要的参数有一下六个记住常用的就可以了 1.endpoint   反向生成url地址标志,默认视图函数名 2.methods ...

  4. react中的路由配置踩坑记

    react 路由配置中,如果根路由(/)匹配一个组件,另一个路由(/list)在进行匹配的时候也会匹配到根路由(/),即在 /list 页面展示的时候 / 页面总是展示在上方. 此时如果想进行严格匹配 ...

  5. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  6. 在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 ...

  7. django中url路由配置及渲染方式

    今天我们学习如何配置url.如何传参.如何命名.以及渲染的方式,内容大致有以下几个方面. 创建视图函数并访问 创建app django中url规则 捕获参数 路径转换器 正则表达式 额外参数 渲染方式 ...

  8. vue项目中router路由配置

    介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router:    cnpm install vue-rou ...

  9. MVC 伪静态路由、MVC路由配置，实现伪静态。

    前段时间,研究了一下mvc路由配置伪静态,在网上扒了很多最后还是行不通,所以我现在把这些心得整理出来,供大家分享: 1.mvc中默认路由配置是:http://localhost:24409/Home/ ...

随机推荐

  1. golang在gitlab中的工作流

    在敏捷开发的时代, 快速的编码, code review, 测试, 部署, 是提升程序员效率的关键. 同时在基础工具完备的如今, 我们甚至无需过多的操作就可以轻松实现上述步骤, 本文就以gitlab为 ...

  2. (转)Centos7上部署openstack ocata配置详解

    原文:http://www.cnblogs.com/yaohong/p/7601470.html 随笔-124  文章-2  评论-82  Centos7上部署openstack ocata配置详解 ...

  3. Linux安装phpMywind

    1.安装MySQL http://www.cnblogs.com/wangshuyi/p/6091244.html 2.安装apache.php.及其扩展 yum install -y httpd p ...

  4. vs2010 编译 boost1.65.1

    vs2010编译boos1.65.1注意选项 vs2010 不支持 c99 ,string.c和debugger.c 变量定义顺序位置报错,改变顺序即可. debugger.c va_copy 在c8 ...

  5. 数据库~Mysql派生表注意的几点~关于百万数据的慢查询问题

    基础概念 派生表是从SELECT语句返回的虚拟表.派生表类似于临时表,但是在SELECT语句中使用派生表比临时表简单得多,因为它不需要创建临时表的步骤. 术语:*派生表*和子查询通常可互换使用.当SE ...

  6. PHP之string之ord()函数使用

    ord (PHP 4, PHP 5, PHP 7) ord - Return ASCII value of character ord - 返回字符的 ASCII 码值 Description int ...

  7. java.lang.IllegalArgumentException: Comparison method violates its general contract!

    这个错误就是写比较器的时候少写了返回值的情况: 比如: Collections.sort(list, new Ordering<QtmSysUserListDto>() { @Overri ...

  8. 关于对Enum的理解

    之前一直对枚举类型的理解存在误解,现重新学习 Enum 类型的介绍 枚举类型(Enumerated Type) 很早就出现在编程语言中,它被用来将一组类似的值包含到一种类型当中.而这种枚举类型的名称则 ...

  9. <python数据挖掘入门与实战>代码

    从百度搜索,净是csdn下载的,现在csdn下载弄的很恶心,垄断并且只想赚钱了,不想使用, 去github上找到了. https://github.com/PacktPublishing/Learni ...

  10. MySQL中使用SHOW PROFILE命令分析性能的用法整理（配合explain效果更好，可以作为优化周期性检查）

    这篇文章主要介绍了MySQL中使用show profile命令分析性能的用法整理,show profiles是数据库性能优化的常用命令,需要的朋友可以参考下   show profile是由Jerem ...