簡單的AngularJS和ui.router示例不起作用

我想用一個非常簡單的示例使用ui.router，但不知道爲什麼它不起作用。簡單的AngularJS和ui.router示例不起作用

下面是代碼：

<!doctype html> 
<html ng-app="test"> 
    <head> 
     <meta charset="utf-8"> 
     <title> ngTest </title> 
    </head> 
    <body> 

     <a ui-sref="pages.home">Home</a> 
     <div ui-view></div> 

     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> 
     <script> 
      var $app = angular.module('test', ['ui.router']); 
      $app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){ 
       $urlRouterProvider.otherwise('/'); 
       $stateProvider.state('pages', { 
        url: '/pages', 
        abstract: true 
       }); 
       $stateProvider.state('pages.home', { 
        url: '/home', 
        template: '<h1> Hello </h1><p> {{ message }} </p>', 
        controller: function($scope){ 
         $scope.message = 'Hey, It works !'; 
        } 
       }); 
      }]); 
     </script> 
    </body> 
</html>

當點擊「主頁」鏈接，URL被改變，但不顯示的看法！

感謝您的幫助提前:)

來源

2015-09-01 webNeat

嘗試改變'網址： '/頁'，''到URL： '＃/頁'，' – Lal

..和控制檯佈局IIS） –

@Lal？爲什麼它需要成爲'＃/ pages'？你能解釋一下嗎？ –

您需要稍微修改您的結構。如果您使用的路線像

$stateProvider.state('pages.home', {

那麼你就需要專門指定模板中的用戶界面視圖爲孩子呈現。所以它應該是這樣的：

$stateProvider.state('pages', { 
    url: '/pages', 
    abstract: true, 
    template: '<div ui-view></div>' //pages.home template will be nested into this template. 
}); 

$stateProvider.state('pages.home', { 
    url: '/home', 
    template: '<h1> Hello </h1><p> {{ message }} </p>', 
    controller: function($scope){ 
     $scope.message = 'Hey, It works !'; 
    } 
});

試一試。乾杯。

來源

2015-09-01 15:58:36

是的，模板丟失，謝謝 – webNeat

@ webNeat：是的訣竅是，父模板需要包含另一個'ui-view'這將嵌套子模板。乾杯。 –

只是改變從url到templateURL。並確保你指定了你的html的確切位置。

乾杯。

來源

2015-09-01 15:54:37

我在'html'標籤中使用'ng-app' – webNeat

所以，試着將你的url改爲templateUrl ..然後確定你正在指定你的html的確切位置。 –

該模板沒問題，問題是在父狀態中缺少模板 – webNeat

簡單的AngularJS和ui.router示例不起作用

回答

相關問題