考虑到 多视图等因素，所以 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. W/MessageQueue: Handler (android.os.Handler) {4241f8f8} sending message to a Handler on a dead thread

    缩略信息是: sending message to a Handler on a dead thread 我是用IntentService时报的 稍微纤细一点儿的信息是: Handler (andro ...

  2. (转)_declspec(dllexport)

    先看代码:以下是在dev-c++里建立自已的dll时的dll.h里面的代码,这里面有一个:_declspec(dllexport) #ifndef _DLL_H_#define _DLL_H_//防重 ...

  3. Qt 定时器Timer使用

    From: http://dragoon666.blog.163.com/blog/static/107009194201092602326598/ 1.新建Gui工程,在主界面上添加一个标签labe ...

  4. 【Java面试题】39 Set里的元素是不能重复的，那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?

    1.什么是Set?(what) Set是Collection容器的一个子接口,它不允许出现重复元素,当然也只允许有一个null对象. 2.如何来区分重复与否呢?(how) “ 用 iterator() ...

  5. mysql 5.7 详细图文安装教程

    官网下载太慢,可以上下载频道下载(mysql-installer-community-5.7.13.0.msi): http://download.csdn.net/download/tan3739/ ...

  6. Android学习笔记——Menu（一）

    背景: Android3.0(API level 11)开始,Android设备不再需要专门的菜单键. 随着这种变化,Android app应该取消对传统6项菜单的依赖.取而代之的是提供anction ...

  7. 常用帝国cms标签收录

    帝国网站管理系统V6.6版-数据字典 :  http://www.phome.net/doc/manual/extend/html/dbdoc/index.html 帝国模板网:http://www. ...

  8. C语言----项目构建Make,Automake,CMake

    http://blog.csdn.net/dc_726/article/details/48978849

  9. input 监听输入事件

    $("#" + inputId).on("input", function () { var checkboxId = $("#" + in ...

  10. sqlite数据库下载安装和初步操作和所遇到的问题near &quot;sqlite3&quot;:syntax error

    1.下载sqlite数据库:http://www.sqlite.org/download.html 假设是在window上安装须要在 Windows 区下载预编译的二进制文件.如图下载下载 sqlit ...