考虑到 多视图等因素，所以 angular 的路由考虑使用 ng-ui-route来做，而不使用 ng-route来做!

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript" src="./js/angular.min.js"></script>

<script type="text/javascript" src="./js/angular-route.js"></script>

<script type="text/javascript" src="./js/angular-ui-router.js"></script>

<style type="text/css">

a{margin-right:30px;}

</style>

</head>

<body>

<!-- 参考： https://blog.csdn.net/zcl_love_wx/article/details/52034193-->

<!-- 传递参数： https://blog.csdn.net/smile_panda/article/details/50976777-->

<div ng-app="myApp" class="myApp" ng-controller="myAppController">

    <a ng-repeat="x in navlist" ui-sref="{{x.name}}({id:{{x.id}}})">{{x.title}}</a>

    <a ui-sref="pram({id:22222})">传参</a>

    <div class="myAppBot" ui-view></div>

    <script type="text/ng-template" id='home'>

        <div ng-controller="homeController">

        {{username}}

        </div>

    </script>

    <script type="text/ng-template" id='hot'>

        <div ng-controller="hotController">

        {{username}}

        </div>

    </script>

    <script type="text/ng-template" id='top'>

        {{username}}

    </script>

    <script type="text/ng-template" id='pram'>

        {{username}}

    </script>

</div>

</body>

<script type="text/javascript">

var myApp = angular.module('myApp', ['ui.router']);

myApp.config(["$stateProvider",  function ($stateProvider) {

    $stateProvider

    .state("/",{

        url: "/", //定义路由

        templateUrl:"home",  //定义模板 还有个是 template

        controller:"homeController" // 定义控制器

    })

    .state("home",{

        url: '/home',

        templateUrl:"home",

        controller:"homeController",

    })

    .state("hot",{

        url:'/hot',

        templateUrl :'hot',

        controller:"homeController",

        params:{'id':''}

    })

    .state("top",{

        url:'/top',

        templateUrl:'top',

        controller:"topController",

        params:{'id':null}

    })

    .state("pram",{

        url:'/pram',

        templateUrl :'pram',

        controller:"pramController",

        params:{'id':null}

    })

;

}]);

myApp.controller('myAppController',['$scope',function($scope){

    alert();

    $scope.navlist = [

        {title:'首页',name:'home',id:1},

        {title:'热门',name:'hot',id:2},

        {title:'推荐',name:'top',id:3},

    ];

}]);

myApp.controller('homeController',['$scope','$stateParams',function($scope,$stateParams){

    $scope.username = "张三";

}]);

myApp.controller('hotController',['$scope','$stateParams',function($scope,$stateParams){

    console.log($stateParams);

    $scope.username = "这里hot控制器";

    // console.log($routeParams);

}]);

myApp.controller('topController',['$scope','$stateParams',function($scope,$stateParams){

    console.log($stateParams);

    $scope.username = "这里top控制器";

}]);

myApp.controller('pramController',['$scope','$stateParams',function($scope,$stateParams){

    console.log($stateParams);

    $scope.username = "这里pram控制器";

}]);

</script>

</html>

angular -- ng-ui-route路由及其传递参数？script标签版的更多相关文章

  1. angular -- ng-ui-route路由及其传递参数？page页面版

    前面有说过 ng-ui-route 使用 script 标签来做,但是很多时候,会通过引入模板页面的方式来实现: 具体代码: <!DOCTYPE html> <html lang=& ...

  2. vue嵌套路由-query传递参数（三）

    在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <div id="app"> &l ...

  3. angular 1.x 控制器之间互相传递参数

    我们要向前方看齐,基于js引用类型的对象就不记了,所以使用基于事件的方式: angular 中 $on,$emit,$boardcast来实现父控制器和子控制器互相通讯, 其中$on表示事件监听, $ ...

  4. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  5. vue嵌套路由--params传递参数

    在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另一种是值不显示在url中. 1.显示在url中index.html <d ...

  6. Vue通过路由 query传递参数

    父组件通过query来传递num参数为1,相当与在 url 地址后面拼接参数 <template> <div> <h3>首页</h3> <rout ...

  7. Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  8. angular之两种路由

    安装angular npm install -g @angular/cli ng new myapp ng g component componentName 自带路由 引入:angular-rout ...

  9. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

随机推荐

  1. MySQL的最大连接数

    mysql的最大连接数默认是100, 这个数值对于并发连接很多的数据库应用是远远不够的,当连接请求大于默认连接数后,就会出现无法连接数据库的错误,因此我们需要把它适当调大一些 设置新的MySQL最大连 ...

  2. 关于SqlServer数据库C盘占用空间太大问题

    工程需要用上了SQL SERVER2008 ,主要作为数据仓库使用,使用SSIS包从ORACEL10G中抽取数据到MS SQL中.环境是win2003x64的,驱动使用的oracle10gX64.使用 ...

  3. Charles安装包及破解包下载地址

    Charles安装包及破解包下载地址 http://xclient.info/s/charles.html?_=baf317d2a9932afca9b32c327f8a34c9

  4. 关于Cocos2d-x中坐标系的种类和转换

    注意: 当一个节点有一个子节点的时候,如果移动父节点,子节点也会跟着做相应的移动变化,只要被添加到父节点中,子节点就被绑定了,所以子节点的位置,坐标就会被动地变化. 当一个节点有一个子节点的时候,如果 ...

  5. Hibernate查询_HQL_EJBQL_QBC_QBE

    查询按功能强弱可以分为以下几种:Native SQL > HQL > EJBQL > QBC > QBE 1.Native SQLNative SQL为数据库系统本身的SQL, ...

  6. bedtools 的安装与使用

    1) 安装 bedtools 提供了3种安装方式 从google code 下载源代码进行安装 利用系统中的包管理工具进行安装, 比如cnetos 下的yum, ubuntu下的apt-get, ma ...

  7. samtools faidx 命令处理fasta序列

    samtools faidx 能够对fasta 序列建立一个后缀为.fai 的文件,根据这个.fai 文件和原始的fastsa文件, 能够快速的提取任意区域的序列 用法: samtools faidx ...

  8. Stream(流)的基本操作

    //把流转化为文件  public static void StreamToFile(Stream stream, string filepath)        {            byte[ ...

  9. SharePoint 沙盒无法启动新的解决方案服务的SPUserCodeV4

    开发部署时报错: 错误原因:没有启动该服务: 解决方式:打开管理中心—应用程序管理—服务应用程序--管理服务器上的服务,启动该服务即可.

  10. C++类中静态成员函数

    引述自<深入探索C++对象模型>2001:5:1版次,p-150 static member functions的主要特性就是它没有this指针,所以: 1.它不能直接存取其所在class ...