Javascript 如何使用Angular UI路由器获取状态？_Javascript_Angularjs

Javascript 如何使用Angular UI路由器获取状态？

javascript angularjs

Javascript 如何使用Angular UI路由器获取状态？,javascript,angularjs,Javascript,Angularjs,我正在尝试将我的角度路由从routeProvider迁移到stateProvider，使用下面的代码，当单击导航栏时，我看不到状态内容，知道怎么了吗 app.js angular.module('sampleApp', ['ui.router', 'MainCtrl', 'NerdCtrl', 'NerdService']) .config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.other

我正在尝试将我的角度路由从

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

<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>



书呆子

使用

ui视图

而不是

ng视图

，在该元素中

ui路由器

将根据

$location

更改放置模板

<div ui-view></div>

使用

ui视图

而不是

ng视图

，在该元素中

ui路由器

将根据

$location

更改放置模板

<div ui-view></div>

从车身上卸下ng控制器。使用，

ui-router

，它可以为您在

$stateProvider

中定义的正确模板注入正确的控制器

正如Pankaj所指出的，将

ng视图

更改为

ui视图

将

ui href=“home”

更改为

ui sref=“home”

从车身上卸下ng控制器。使用，

ui-router

，它可以为您在

$stateProvider

中定义的正确模板注入正确的控制器

正如Pankaj所指出的，将

ng视图

更改为

ui视图

将

ui href=“home”

更改为

ui sref=“home”

我有这个问题的答案。不久前，我也在做同样的事情：

在app.js中：

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

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'
              },
            },    
        })
    });

<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>

<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>

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

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

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

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'
              },
            },    
        })
    });

<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>

<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>

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

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

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

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'
              },
            },    
        })
    });

<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>

<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>

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

现在您可以在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>

或

我有这个问题的答案。不久前，我也在做同样的事情：

在app.js中：

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

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'
              },
            },    
        })
    });

<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>

<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>

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

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

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

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'
              },
            },    
        })
    });

<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>

<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>

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

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

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

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'
              },
            },    
        })
    });

<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>

<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>

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

现在您可以在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>

或

点击此链接后，您可以前往plunker进行演示：点击此链接后，您可以前往plunker进行演示：