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]); 
})();

为什么使用@@包括哪些内容？ – 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); 
    }); 

    }]);

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

@ orlando21不客气 –

AngularJS ui路由器不呈现视图

相关推荐