Question

我的AngularJS应用程序找不到模板landing.html，尽管我试图在任何地方做出正确的声明。

index.html：

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

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

    <main class="content">

      <ui-view></ui-view>

    </main>

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

main.js：

angular.module('myApp', ['ui.router'])
  .config(['$stateProvider', '$locationProvider', 
  function($stateProvider, $locationProvider) {
  $stateProvider
    .state('landing', {
      url: '/',
        controller: 'LandingCtrl as landing',
        templateUrl: 'templates/landing.html'
    })
      .state('faq', {
      url: '/faq',
      templateURL: 'faq.html'
  });
    $locationProvider
        .html5Mode({
        enabled: true,
        requireBase: false
    });
}]);

我的文件结构如下：

/src
|
|--index.html
|--faq.html
|--js
|  |--main.js
|  |--controllers
|  |  |--LandingCtrl.js
|--templates
|  |--landing.html

我认为landing.html的路径已正确声明，但我仍然收到以下错误：

angular.min.js:sourcemap:123 Error: [$compile:tpload] http://errors.angularjs.org/1.6.4/$compile/tpload?p0=templates%2Flanding.html&p1=404&p2=Not%20Found

有人会知道应用程序无法找到模板的原因吗？

修改当我在浏览器URL中输入此内容时： http://localhost:3000/templates/landing.html

结果是： Cannot GET /templates/landing.html

编辑2 删除$locationProvider也会删除“landing.html not found”错误消息，但仍未显示应该在<ui-view>内呈现的视图。

Answer 1

在index.html更改<ui-view></ui-view>至<div ui-view></div>。

在main.js中更改代码如下： -

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

  }]);

AngularJS ui-router没有加载模板

1 个答案: