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. 使用InstallUtil安装及卸载Windows服务的具体操作 Visual Studio 2012版本

    关于Visual Studio 2012中使用InstallUtil对Windows服务进行安装与卸载的文章,在MSDN中的http://msdn.microsoft.com/en-us/librar ...

  2. C++中的名字重整技术

    C++ 一直为人诟病之一的原因是他的二进制模块兼容性不好,即ABI(Application Binary Interface)问题.对于同一源代码,不同编译器,甚至同一编译器不同版本都不兼容,其编译出 ...

  3. Django中管理并发操作

    上一篇我们说了,如何在Django中进行事务操作,数据的原子性操作 涉及了事务操作,我们不得不考虑的另一个问题就是:并发操作 还是那个用户转账的操作 我们使用事务操作解决的操作中途服务器宕机问题 但是 ...

  4. 第3章—高级装配—条件化的Bean

    条件化的Bean 通过活动的profile,我们可以获得不同的Bean.Spring 4提供了一个更通用的基于条件的Bean的创建方式,即使用@Conditional注解. @Conditional根 ...

  5. str_split 分隔中文出现乱码 替代函数

    function mbstringtoarray($str,$charset) { $strlen=mb_strlen($str); while($strlen){ $array[]=mb_subst ...

  6. 运行零币Zcash（ZEC）

    1.在基于 Ubuntu 或者 Debian 的系统中: $ sudo apt-get install \build-essential pkg-config libc6-dev m4 g++-mul ...

  7. 20.Class的继承

    1.简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多 class Point { } class ColorPoint extends ...

  8. ok6410 android driver(1)

    target system : Android (OK6410) host system : Debian Wheezy AMD64 1.Set up android system in ok6410 ...

  9. python-FTP模块

    #!/user/bin/python #coding=utf-8 import ftplib import os import socket HOST = 'ftp.kernel.org' DIRN ...

  10. InnoDB索引概述,二分查找法,平衡二叉树

    索引是应用程序设计和开发的一个重要方面.如果索引太多,应用的性能可能会受到影响:如果索引太少,对查询性能又会产生影响.要找到一个合适的平衡点,这对应用的性能至关重要. 如果知道数据的使用,从一开始就应 ...