angular -- ng-ui-route路由及其传递参数？script标签版

考虑到多视图等因素，所以 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>