AngularJS UI路由器未加載模板

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>內部的<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路由器未加載模板

問題描述

1 個解決方案

解決方案1
2 已采納 2017-08-09 06:37:57

AngularJS UI路由器未加載模板

問題描述

1 個解決方案

解決方案1 2 已采納 2017-08-09 06:37:57

解決方案1
2 已采納 2017-08-09 06:37:57