AngularJS ui路由器不呈現視圖

我一直在努力讓我的AngularJS應用程序顯示基於模板的視圖。AngularJS ui路由器不呈現視圖

問題： UI路由器似乎是正確的「路由」的所有文件，因爲模板文件（landing.html）被傳遞到控制檯作爲對象（見下文main.jsconsole.log(result)）。儘管如此，該模板文件並未顯示在<div ui-view></div>應該是的應用程序中。

的index.html：

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
@@include('partials/head.html') 
<body> 

    @@include('partials/header.html') 

     <div ui-view></div> 

    @@include('partials/footer.html') 
</body> 
</html>

main.js：

angular.module('myApp', [ 
    'ui.router' 
]) 
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('landing', { 
     url: '/', 
     controller: 'LandingCtrl as landing', 
     templateUrl: 'templates/landing.html' 
    }); 
     $urlRouterProvider.otherwise('/landing'); 

}]) 
    .run(['$http', '$templateCache', function($http, $templateCache) { 

    $http.get('templates/landing.html', { 
     cache: $templateCache 
    }).then(function(result) { 
     console.log(result); 
    }); 

    }]);

我的模板文件landing.html上：

<main class="content"> 

    @@include('partials/search.html') 
    <h2>Show me the contents of landing.html!</h2> 

</main>

我我們咕嚕咕嚕，並確保它有觀看和複製到/dist/templates。總的來說，Angular應用程序的行爲是正確的（控制檯中沒有ng錯誤）。另外，如果不是指定模板文件（templateURL），而是簡單地在main.js中使用template: <h2>Show me the contents of landing.html!</h2>，那麼這將在視圖中呈現。有些東西阻止了文件的渲染。

問題：鑑於ui路由器正確找到並路由所有文件，沒有人有一個想法，爲什麼該應用程序根本不顯示模板文件？

編輯這裏是LandingCtrl.js：

(function() { 
    function LandingCtrl($scope, $location, $anchorScroll) { 
    $scope.goTo = function(id) { 
     $location.hash(id); 
     console.log($location.hash()); 
     $anchorScroll(); 
    };  
    }  
    angular 
    .module('myApp') 
    .controller('LandingCtrl', ['$scope', '$location', '$anchorScroll', LandingCtrl]); 
})();

來源

2017-08-08 orlando21

爲什麼使用@@包括哪些內容？ – Vivz

嗨@Vivz，我正在使用HTML partials，否則我的一些文件會更長。我嘗試過不同的時間來排除他們，看看他們是否有所作爲，但目前爲止沒有得到不同的結果。 – orlando21

您的ui-view會根據您的狀態 – Vivz

在main.js文件更改Landing State下面的網址：

angular.module('myApp', [ 
    'ui.router' 
]) 
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 

    $stateProvider 
    .state('landing', { 
     url: '/landing', 
     controller: 'LandingCtrl as landing', 
     templateUrl: 'templates/landing.html' 
    }); 
     $urlRouterProvider.otherwise('/landing'); 

}]) 
    .run(['$http', '$templateCache', function($http, $templateCache) { 

    $http.get('templates/landing.html', { 
     cache: $templateCache 
    }).then(function(result) { 
     console.log(result); 
    }); 

    }]);

來源

2017-08-09 06:28:37

好吧，在'$ stateProvider.state'中，我用'url：/ landing'替換'url：/'。真棒，它的作品。謝謝！ – orlando21

@ orlando21不客氣 –

AngularJS ui路由器不呈現視圖

回答

相關問題