考虑到 多视图等因素，所以 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. 关于Struts2有时候出现的莫名其妙的错误

    有的时候突然出现红色叉叉,但是又不知道哪里错了,解决方法: 1.刷新项目文件夹 2.重启MyEclipse

  2. imx6 ar8031 千兆网卡不能用

    /*************************************************************************** * imx6 ar8031 千兆网卡不能用 * ...

  3. matlab中常用见的小知识点

    矩阵相关: 在matlab中,矩阵或向量是 column-major 表示形式.用 [] 来构建向量或矩阵, 用()来引用向量或矩阵中的元素:用:表示矩阵中的该index下的所以元素: matlab中 ...

  4. C++ 基本的输入输出

    C++ 基本的输入输出C++ 标准库提供了一组丰富的输入/输出功能,我们将在后续的章节进行介绍.本章将讨论 C++ 编程中最基本和最常见的 I/O 操作. C++ 的 I/O 发生在流中,流是字节序列 ...

  5. MultiplyVector方法

    该方法的功能是用来对方向向量v进行矩阵变换,当矩阵与v进行变换时,只是对v的方向进行转换.那么系统就会对参与变换的Matrix4x4矩阵M进行特殊处理. 例如:经过系统处理后就变为 其中n002 + ...

  6. hadoop2.7.1单机和伪集群的搭建-0

    内容中包含 base64string 图片造成字符过多,拒绝显示

  7. Linux使用expect实现自动登录的脚本

    前提条件服务器已经安装过tcl和expect, 若未安装:可以先执行 yum  install tcl  expect  进行安装 第一步.编写以下自动登录脚本login.sh ########### ...

  8. go在线图书

    https://books.studygolang.com/The-Golang-Standard-Library-by-Example/

  9. C# CRC16 查表法

    private static ushort[] crctab = new ushort[256]{                      0x0000, 0x1021, 0x2042, 0x306 ...

  10. List 和 ObservableCollection的区别

    在WPF中绑定一个集合的时候,比如:DataGrid.ItemsSource = new List<T>(); 这样的操作,会存在当数据行新增或者删除的时候不会得到及时的通知来刷新界面,而 ...