使用角度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

回答

相關問題