关于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';