關於ng的路由的幾點想法（ui-view）

在配置路由的時候，我們可以選擇ng框架自帶的路由，也可以使用第三方路由插件ui-router

注意：

（1）在使用angular-ui-router的時候，必須先引入angular-ui-router.js模塊

（2）在自己的項目中注入“ui-router”

（3）給他一個ui-view="..."當作模板的容器

the problems of my project:

the question:  in my project, i want to use the common tags but the different part pages,

solution：將tags放在父級的ui-view="content" 中，在html 模板中再次寫一個ui-view="part"

<div class="con-detail">
    <div ui-view="content">
        <div ng-show="nav_show">
            <settingnav></settingnav>
            <proadduser></proadduser>
        </div>
    </div>
</div>
<div class="ideas-list">
    <div class="my-row">
        <div class="amdin-nav" ><!--共用的tags-->
            <ul class="list-inline adminAction-listHeader">
                <li ui-sref="home.ideas.allIdeas"  >
                    <a href="" ng-class="{active:eval=='allIdeas'}" class="my-btn-lg" >全部創意</a>
                </li>
                <li ui-sref="home.ideas.myIdeas"  >
                    <a class="my-btn-lg" ng-class="{active:eval=='myIdeas'}" >我的創意</a>
                </li>
                <li ui-sref="home.ideas.appr_list" >
                    <a class="my-btn-lg"  ng-class="{active:eval=='waitList'}">待審批</a>
                </li>
                <li ui-sref="home.ideas.approval" >
                    <a class="my-btn-lg"  ng-class="{active:eval=='hasApproval'}" >已審批</a>
                </li>
            </ul>
        </div>
        <div class=" list-content"  ui-view="part" >
　　　　　　　　<!--用於子模板的放入-->
       </div>
    </div>
</div>

js:

define(['angular','ng-require','rap','ng-bootstrap','ui-router'], function (angular) {
    var myapp = angular.module('myapp', ['ui.router', 'ui.bootstrap', 'ngRap','ngRequire']);

   /................................./
    return myapp;
});
define(['app'], function (myapp) {
    myapp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', '$requireProvider',
        function ($stateProvider, $urlRouterProvider, $locationProvider, $requireProvider) {
            $urlRouterProvider.otherwise('home.ideas');　//默認跳轉
$stateProvider.state('home.ideas', {//創意列表（全部創意）
    url: '/ideasList',
    views: {
        "content": {
            templateUrl: 'tpls/ideas/list.html',
            //controller:"ideas_list_ctrl"
            controller:function($state){
                $state.go("home.ideas.allIdeas");<!---進一步的跳轉到全部創意--->
            }
        }
    }
})
.state('home.ideas.allIdeas', {//全部創意（用於跳轉的狀態）
    url: '/allIdeas',             //瀏覽器的地址欄上面顯示的
    views: {
        "part": {
            templateUrl: 'tpls/ideas/all_idea_list.html',
            controller:'ideas_list_ctrl'
        }
    }
})

.state('home.ideas.myIdeas', {//我的創意
    url: '/myIdeas',
    views: {
        "part": {
            templateUrl: 'tpls/ideas/myIdeas.html',
            controller:'ideas_myIdeas_ctrl'
        }
    }
})

然后在每一個的控制器中配置：tags的狀態(注意要在rootScope中配置狀態，因為我沒給出父級控制器（上面在配置content的時候）)

 /............../
    myapp.controller('ideas_list_ctrl',
        ['$scope','$rootScope','ideas_api','myalert', function (s,rs,ideas_api,myalert) {

         console.log("this is idea_list ctrl");

            rs.eval="allIdeas";

/............./
    myapp.controller('ideas_hasPass_ctrl',
        ['$scope','$rootScope','setting_api', 'ideas_api', function (s,rs,setting_api, ideas_api) {
　　　　　　console.log("this is idea_hasApproval ctrl");

            rs.eval='hasApproval';