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. solr 服务搭建

    1.  linux 中 安装jdk,  tomcat, 2. 下载 solr-4.10.3.tgz.tgz 并解压 解压后文件夹:solr-4.10.3 3. 将 solr-4.10.3/dist 下 ...

  2. Android中自定义组合控件

    Android中自定义控件的情况非常多,一般自定义控件可以分为两种:继承控件及组合控件.前者是通过继承View或其子类,重写方法实现自定义的显示及事件处理方式:后者是通过组合已有的控件,来实现结构的简 ...

  3. (转)OpenStack构架知识梳理

    http://www.cnblogs.com/kevingrace/p/8459034.html-------------------Openstack架构概念图-简单汇总 原文:http://www ...

  4. IO流（三）其他流与File类

    1:其他的流 1: DataOutputStream ;多了一些操作基本数据类型的功能 DataInputStream:读取文件. 用DataOutputStream流写进去的数据,就用DataInp ...

  5. TortoiseGit学习系列之TortoiseGit基本操作克隆项目（图文详解）

    前面博客 全网最详细的Git学习系列之介绍各个Git图形客户端(Windows.Linux.Mac系统皆适用ing)(图文详解) 全网最详细的Git学习系列之安装各个Git图形客户端(Windows. ...

  6. λ(lambda)表达式

    理论阶段 函数接口 函数接口是行为的抽象: 函数接口是数据转换器; java.util.Function包.定义了四个最基础的函数接口: Supplier<T>: 数据提供器,可以提供 T ...

  7. subset II

    Subsets II Given a collection of integers that might contain duplicates, nums, return all possible s ...

  8. 使用Microsoft Azure云平台中的Service Bus 中继 Intanet环境下的WCF服务。

    之前写的一篇文章:) 看起来好亲切. http://www.cnblogs.com/developersupport/archive/2013/05/23/WCF-ON-IIS-Azure-Servi ...

  9. Django 模板语言从后端传到前端

    如果我们在后端有数据动态提取到前端的时候 就需要模板语言加以渲染后再将渲染好的HTML文件传入前端 我们的views.py里的index函数里有个s变量是个列表,将数据以大括号的形式传入{" ...

  10. js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll

    开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...