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. 论文分享NO.2（by_xiaojian）

    论文分享第二期-2019.03.26 NIPS2015,Spatial Transformer Networks,STN,空间变换网络

  2. yaf视图

    Yaf默认是开启了自动渲染,所以建了action后,他就会自己找模板!在测试的时候,如果不想让他寻找模板可以在action中return false 或者在bootstrap.php中关闭渲染 Yaf ...

  3. Java面试题-Java容器

    一.Java容器分类 Java容器划分为两个概念Collection.Map Collection: 一个独立元素的序列,这些元素都服从一条或多条规则.List必须按照插入的顺序保存元素,不关心是否重 ...

  4. JAVA练手--String

    package tet; public class kk { public static void main(String[] args) { //1. { String Stra = "1 ...

  5. Delphi下OpenGL2d绘图(05)-画图片Bmp

    一.前言 找了不少资料,要画图片要先处理一下,需要引用别的单元,Delphi中没带,需要另外下载Gl.pas.看网上说是自带的OpenGl单元封装的是1.0版的,有此函数未声明.网上可以找到Gl.pa ...

  6. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  7. 将字符串 “ hello word，你 好 世 界 ！ ” 两端空格去掉并且将其中的其他所有空格替换成一个空格 输出结果为“hello word,你 好 世界”

    string str = " hello word,你 好 世 界 ! "; string msg = str.Trim(); //去掉首尾空格 //使用split分割字符串,st ...

  8. Java - 复合模式优于继承

    继承是实现代码重用的方法之一,但使用不当则会导致诸多问题. 继承会破坏封装性,对一个具体类进行跨包访问级别的继承很危险. 即,子类依赖父类的实现细节. 如果父类的实现细节发生变化,子类则可能遭到破坏. ...

  9. linux ubuntu 学习总结（day01）基本命令学习

    个人总结,请尊重版权,转载请在显眼地方注明出处:https://www.cnblogs.com/sunshine5683/p/9948259.html day(01)基本命令学习 今天开始自学linu ...

  10. delphi之读写文件的三种方式

    一.Tstrings.Tstringlist procedure TForm1.Button2Click(Sender: TObject); var strlist: TStringList; pat ...