如何使用Angular UI-Router获取状态？

I am trying to migrate my Angular routing from routeProvider to stateProvider with below code, I don't see states content when click on navbar, any idea what's wrong?

我正在尝试使用以下代码将我的Angular路由从routeProvider迁移到stateProvider，我在点击导航栏时看不到状态内容，任何想法有什么问题？

app.js

angular.module('sampleApp', ['ui.router', 'MainCtrl', 'NerdCtrl', 'NerdService'])
  .config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'views/home.html',
        controller: 'MainController'
      })
      .state('nerd', {
        url: '/nerd',
        templateUrl: 'views/nerd.html',
        controller: 'NerdController'
      });
  });

main.html

main.html中

<body ng-app="sampleApp" ng-controller="NerdController">
<div class="container-fluid">
    <!-- HEADER -->
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" ui-href="home">Stencil: Node and Angular</a>
        </div>
        <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
        <ul class="nav navbar-nav">
            <li><a ui-sref="nerd">Nerds</a></li>
        </ul>
    </nav>
    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>
</div>
 <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/controllers/NerdCtrl.js"></script>
    <script src="js/services/NerdService.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>
</body>

3 个解决方案

#1

Use ui-view instead of ng-view, in that element ui-router will put template based on $location changes.

使用ui-view代替ng-view，在该元素中，ui-router将根据$ location更改放置模板。

<div ui-view></div>

#2

Remove ng-controller from body. Using, ui-router, It handles injecting the right controller for the right templates that you have defined in your $stateProvider.
从身体上移除ng-controller。使用ui-router，它处理为你在$ stateProvider中定义的正确模板注入正确的控制器。
Like Pankaj has pointed out, change ng-view to ui-view.
就像Pankaj指出的那样，将ng-view改为ui-view。
Change ui-href="home" to ui-sref="home"
将ui-href =“home”更改为ui-sref =“home”

#3

I have solution for this question. some time ago i was doing the same:

我有这个问题的解决方案。前段时间我也是这样做的：

in app.js:

在app.js中：

var app=angular.module('ppl_App',['ui.router','oc.lazyLoad','ngStorage','ngFileUpload'])

Provide UI-Routing content ( In app.js ):

提供UI路由内容（在app.js中）：

angular.module('ppl_App').config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/login');

    $stateProvider
    .state('root',{
        views: {
            '@':{
                templateUrl:'index.html'
                    },
        'header@':{
                templateUrl: 'app/views/common/header.html'
                          },
        'content_left@':{
                templateUrl: 'app/views/common/content-left.html'
                            },
        'content_right@':{
                templateUrl: 'app/views/common/contentright.html'
                         },
        'footer@':{
                templateUrl: 'app/views/common/footer.html'
          }
        }               
        })
    .state('root.login',{
            url:'/login',
            views:{
                'contentRight@root':{
                        templateUrl:'app/views/login.html',
                        controller:'loginCtrl'
                                            },
                          },
                    })


 .state('root.register',{
    url:'/register',
    views:{
            'contentRight@root':{
            templateUrl:'app/views/register.html',
            controller:'registerCtrl'
              },
            },    
        })
    });

See the view name in the snapshot ( In red color shape) :

查看快照中的视图名称（红色形状）：

Now you can use these views in your html page. ( I have used in index.html )

现在，您可以在html页面中使用这些视图。（我在index.html中使用过）

<body ng-app="ppl_App">
    <div class="navbar navbar-inverse navbar-fixed-top" ui-view="navigation">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
                <a class="brand" href="">PPL</a>
                <div class="pro_info pull-right">
                    <div class="pro_icn"><img src="app/assests/images/pic_small.png"></div>
                    <div class="pro_txt">Me<b class="caret"></b></div>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                        <li><a tabindex="-1" href="#">My Profile</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="header header_fixed" ui-view="header">
        <!-- //header goes here -->
    </div>
    <div class="container">
            <div class="content_rgt" ui-view="content_right">
                <!-- //right content goes here -->
            </div>
            <div class="content_lft" ui-view="content_left">
                <!-- //left content goes here -->
            </div>
    </div>
    <div class="clear"></div>
    </div>
    <div class="footr" ui-view="footer">
        <!-- //footer goes here -->
    </div>
    <script type="text/javascript" src="app/app.js"></script>
</body>

See how to use in html in snapshot ( In red color box ):

了解如何在快照中的html中使用（在红色框中）：

You can redirect on this particular views using ui-sref, like this:

您可以使用ui-sref重定向此特定视图，如下所示：

<div class="addtnal_acnt">
    <a ui-sref="root.register">Create My Account Now !</a>
</div>


    <div class="addtnal_acnt">
       <br>
          <a ui-sref="root.login"> Loging Again !</a>
    </div>

You can redirect from controller code ( .js file ) using $state.go() :

您可以使用$ state.go（）从控制器代码（.js文件）重定向：

$state.go('root.login');

要么

$state.go('root.register');

#1