我一直在努力让我的 AngularJS 应用程序显示基于模板的视图。
问题： UI路由器似乎是正确的“路由”的所有文件，因为模板文件（landing.html）被传递到控制台作为对象（见console.log(result)中main.js图）。尽管如此，模板文件并未显示在应用程序中<div ui-view></div>应该显示的位置。
索引.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>
主要.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>
我正在使用 grunt 并确保同时监视和复制/templates到/dist. 总的来说，Angular 应用程序运行正常（控制台中没有 ng 错误）。
此外，如果我没有指定模板文件 ( templateURL)，而是简单地使用template: <h2>Show me the contents of landing.html!</h2>in，main.js那么它会在视图中呈现。有一些东西阻止了文件的呈现。
问题：鉴于 ui-router 正确查找和路由所有文件，有没有人知道为什么应用程序根本不显示模板文件？
编辑这里是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]);
})();
在您的 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);
});
}]);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句