Question

我一直在努力让我的AngularJS应用程序显示基于模板的视图。

问题： ui-router似乎是正确的＆＃34;路由＆＃34;所有文件，因为模板文件（landing.html）作为对象传递到控制台（请参阅下面的console.log(result)中的main.js）。然而，模板文件没有显示在应该<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>

我使用grunt并确保让它同时观看并/templates复制到/dist。总体而言，Angular应用程序的行为正确（控制台中没有ng错误）。

此外，如果不是指定模板文件（templateURL），我只需在template: <h2>Show me the contents of landing.html!</h2>中使用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]);
})();

Answer 1

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

  }]);

AngularJS ui-router没有渲染视图

1 个答案: