我的ui-view沒有工作？

我正在學習Angular JS，並且在使用ui-view時被卡住了。我不知道ui-view或其他什麼是麻煩。但我的導航欄沒有出現。任何幫助必須是偉大的！我的ui-view沒有工作？

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> 
    <script src="app.js"></script> 
</head> 

<body ng-app="myApp"> 
    <!-- NAVIGATION --> 
    <div ui-view="navbar"></div> 

    <!-- MAIN CONTENT --> 
    <div class="container"> 
     <div ui-view="content"></div> 
    </div> 

</body> 
</html>

app.js

(function() { 
    'use strict'; 

    angular 
     .module('myApp', ['ui.router']) 
     .config(stateConfig); 

    stateConfig.$inject = ['$stateProvider']; 

    function stateConfig($stateProvider) { 
     $stateProvider.state('app', { 
      abstract: true, 
      views: { 
       '[email protected]': { 
        templateUrl: 'navbar.html', 
        controller: 'NavbarController', 
        controllerAs: 'vm' 
       } 
      } 
     }); 
    } 
})();

navbar.html

<nav class="navbar navbar-inverse" role="navigation"> 
    <ul class="nav navbar-nav"> 
     <li><a ui-sref="home">Home</a></li> 
     <li><a ui-sref="about">About</a></li> 
    </ul> 
</nav>

幫助，請！

來源

2017-06-14 Duc Tran

你的'app'狀態是抽象的，但沒有任何後代，所以它不會被訪問。 https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states – Claies

由於Claies指出你需要有後代狀態，這樣只有你的父母抽象狀態纔會被激活。請檢查答案here

在運行配置中，您必須通過調用$state.go('your.state.name')來初始化/激活根URL，或者您必須使用ng-route的otherwise api來激活初始狀態。我在這裏使用了未命名的視圖內容index.html

來源

2017-06-14 10:56:50 Kanagu

我的ui-view沒有工作？

回答

相關問題