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. Mac 10.12原生方法对NTFS分区进行读写的配置

    说明:不一定有效,最简单的方法就是不用NTFS,直接FAT32,对于大文件就用切割. 方法: 1.确定U盘名称 diskutil list ls /Volumes/ 2.比如我找到的U盘名称为Unti ...

  2. C# 文件操作系列一

    在.Net环境中,所有关于文件操作的类都在System.IO命名空间下,注:在修改文件时,安全性显得格外重要,但是本随笔不过多讲述安全性,这里假设我们有足够的权限. 1.管理文件系统 先通过一幅图来了 ...

  3. python笔记02-----字符串操作

    python中定义变量的字符串 str1 = "www"      #str1就是字符串了 一定用引号 或者直接使用"字符串."来调用内部的方法 1.字符串大小 ...

  4. STL中deque 解析

    一.deque的中控器 deque是连续空间(至少逻辑上看来如此),连续线性空间总令我们联想到array或vector.array无法成长,vector虽可成长,却只能向尾端成长,而且其所谓的成长原是 ...

  5. Oracle 12c JDBC 连接

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  6. R语言改变大小写 toupper()和 tolower()函数

    这些函数改变字符串的字符的大小写. 语法 toupper()和 tolower()函数的基本语法为: toupper(x) tolower(x) 以下是所使用的参数的说明: x - 向量输入. 示例 ...

  7. Diskrete Mathematik

    1.Aussagenlogik 1.1 Gleichwertiges Kalkül 1.2 Normalform Einfache Disjunktion besteht aus Disjunktio ...

  8. DDD学习笔记(一)

    最近开始筹备一个电商项目. 其实是公司的老本行了. 但今年公司希望在做项目的同时, 沉淀出一套针对电商的基础产品. 这样可以提高新项目的开发效率, 减少重复劳动. 那现如今, DDD(领域驱动设计)应 ...

  9. 使用 csc.exe 编译C#代码

    csc.exe是C#的编译器,可以将C#代码编译为IL中间语言代码(exe.dll),然后再通过.net framework中的clr内的JIT(即时编译器)将中间语言代码编译为机器语言,然后再由机器 ...

  10. 十五、读写锁ReentrantReadWriteLock

    一.简介 有时候我们对资源的修改操作非常地少,但是读取的频率却很高.如果采用一般的互斥锁,那么大量的读取操作也需要做等待.基于读写分离的思想,我们可以使用JDK的读写锁来处理这种情况. 1)读读不互斥 ...