考虑到 多视图等因素，所以 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. C#基础教程/适合初学者

    C#基础教程 第一章       C#语言基础 本章介绍C#语言的基础知识,希望具有C语言的读者能够基本掌握C#语言,并以此为基础,能够进一步学习用C#语言编写window应用程序和Web应用程序.当 ...

  2. js彈出層或者js彈出引用url Frame 層

    function Popup() { var _this = this; this.CssName = "layermask";//樣式 //遮蓋層 this.hiddLayer ...

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

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

  4. 写给测试人员：不是所有的bug都需要修复

    用户往往对产品中各种各样的bug抱怨不已,而测试人员往往认为自己的职责就是揪出这些所有的bug并把它们全都修复.然而,这是一个误区.微软卓越测试工程总监Alan Page近日撰文,再次解释了有哪些bu ...

  5. BMP是在Bean中完成对数据库JDBC的各种调用

    BMP是在Bean中完成对数据库JDBC的各种调用 CMP是由EJB容器自动完成对数据库的操作 会话Bean主要处理业务逻辑

  6. C#中的程序集和命名空间

    C#中的程序集和命名空间 如果说命名空间是类库的逻辑组织形式,那么程序集就是类库的物理组织形式.只有同时指定类型所在的命名空间及实现该类型的程序集,才能完全限定该类型.<精通.NET核心技术-- ...

  7. linux -- 常用的20个命令

    1. ls命令 ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹. root@tecmint:~# ls Andr ...

  8. 【JavaScript】使用setInterval()函数作简单的轮询操作

    轮询(Polling)是一种CPU决策怎样提供周边设备服务的方式,又称"程控输出入"(Programmed I/O). 轮询法的概念是.由CPU定时发出询问.依序询问每个周边设备是 ...

  9. Nginx配置PATHINFO隐藏index.php

    1.网络来源:http://www.shouce.ren/post/view/id/1529 server {      listen       80;     default_type text/ ...

  10. 谈谈我对Android View事件分发的理解

    写这篇博客的缘由.近期因为项目中用到相似一个LinearLayout中水平布局中,有一个TextView和Button,然后对该LinearLayout布局设置点击事件.点击TextView能够触发该 ...