使用角度js的内联模板上的404

我试图用定义为home.html的内联模板制作一个简单的Hello World页面。所使用的路由是ui.router，并运行代码时，我收到的使用角度js的内联模板上的404

GET /home.html 404 0.868 ms - 1076

一个无限循环这表明，我认为角度无法找到中定义的模板home.html的。

app.js

var app = angular.module('HelloWorld', ['ui.router']); 

app.controller('MainCtrl', [ 
    '$scope', 
    'posts', 
    function($scope, posts){ 
     $scope.test = 'Hello world!'; 
     $scope.posts = posts.posts; 
     $scope.addPost = function(){ 
      if(!$scope.title || $scope.title === '') { return; } 
      $scope.posts.push({ 
       title: $scope.title, 
       link: $scope.link, 
       upvotes: 0 
      }); 
      $scope.title = ''; //Set title to empty 
      $scope.link = ''; // Set link to empty 
     }; 
     $scope.incrementUpvotes = function(post) { 
      post.upvotes += 1; 
     }; 
    }]); 

app.factory('posts', [function(){ 
    var o = { 
     posts: [ 
      {title: 'post 1', upvotes: 5} 
     ] 
    }; 
    return o; 
    }]); 


app.config([ 
    '$stateProvider', 
    '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 

     $stateProvider 
      .state('home', { 
       url: '/home', 
       templateUrl: 'home.html', 
       controller: 'MainCtrl' 
      }); 

     $urlRouterProvider.otherwise('home'); 
    }]);

index.ejs

<!DOCTYPE html> 
<html ng-app="HelloWorld"> 
<head> 
    <title>Hello World</title> 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script> 
    <script src="javascripts/app.js"></script> 
    <style> .glyphicon-thumbs-up { cursor:pointer } </style> 
</head> 

<body> 
    <div class="row"> 
     <div class="col-md-6 col-md-offset-3"> 
      <ui-view></ui-view> 
     </div> 
    </div> 

    <script type="text/ng-template" id="home.html"> 
     <div class="page-header"> 
      <h1>Hello World</h1> 
     </div> 
    </script> 
</body> 
</html>

我看不出什么，似乎在代码是想错了。我也尝试使用/home.html中的应用程序配置和HTML无济于事。我可以使用一些见解来了解如何错过配置/内联模板。

来源

2016-06-07 JME

看到工作代码题外话：同时考虑的getter/setter方法模块和controllerAs语法在你的应用程序角的最佳实践。模块变量和'$ scope'都是过时的技术。 – isherwood

如果这正是你的代码中有失踪“，在模板的ID。下面的修正见

<script type="text/ng-template" id="home.html">

来源

2016-06-07 20:25:27 Don

复印时出现错字，编辑正确 – JME

你的代码工作对我罚款。为了进一步测试它添加以下到HTML ：

<a ui-sref='home'>Home</a> 
<a ui-sref='about'>About</a> 

.... 

<script type="text/ng-template" id="about.html"> 
    <div class="page-header"> 
    <h1>About</h1> 
    </div> 
</script>

我加入以下途径给javascript：

.state('about', { 
    url: '/about', 
    templateUrl: 'about.html', 
    controller: 'MainCtrl' 
});

钍添加了左上角的链接，允许您切换视图。您可以在http://codepen.io/amartin007/pen/rLOvqa

来源

2016-06-07 23:04:19 Anthony

使用角度js的内联模板上的404

回答

相关问题