考虑到 多视图等因素，所以 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. 各种api接口

    实用号码归属地查询(IP 地址,手机号码): 默认格式: http://api.liqwei.com/location/ (使用来访者的 IP 地址) 指定 IP 地址格式: http://api.l ...

  2. HBase系统入门--整体介绍

    转自:http://www.aboutyun.com/thread-8957-1-2.html 问题导读:1.HBase查询与写入哪个更好一些?2.HBase面对复杂操作能否实现?3.Region服务 ...

  3. android listview 总结

    ScrollView与ListView冲突: public class MyExpandableListView extends ExpandableListView { public MyExpan ...

  4. 关于Unity中的帧动画组件的编写

    一.帧动画 1: 美术准备好一个连续动作的离散图片;2: 程序在准确的时间来切换这个图片;3: 优点: 简单,速度快; 缺点:资源占用相对过大; 二.frame_anim组件编写 1: 代码里面强制要 ...

  5. e650. 激活事件

    An object wishing to fire item events must implement ItemSelectable. This example shows typical code ...

  6. mac下普通用户无法创建crontab的问题解决

    想在mac下弄一个crontab定时任务,以为会像linux上那样顺利那,结果碰壁了,报错信息例如以下: ➜  autoshell  crontab -ecrontab: no crontab for ...

  7. 基于Linux的智能家居的设计(4)

    3  开发环境的搭建 本次课题使用的开发环境比較特殊.没有一个现成的集成开发环境,需要自己一步一步的搭建开发环境,开发环境的搭建的过程十分复杂,并且假设没有这个开发环境本次课题就无法进行. 因此.在进 ...

  8. 快速找出System.Management.Automation.dll，c#调用powershell

    public static void InvokeSystemPS(string cmd) { List<string> ps = new List<string>(); ps ...

  9. About {DynamicResource {x:Static SystemColors.ControlBrushKey}}

    from : http://blog.sina.com.cn/s/blog_749e42850100sahi.html 前提: <system:String x:Key="{Compo ...

  10. JavaScript实现禁用键盘和鼠标的点击事件

    编写自己定义的JavaScript函数maskingKeyboard()和rightKey(); maskingKeyboard():禁用键盘 rightKey():禁用鼠标右键 <script ...