2015-12-29 88 views
0

我今天开始跟踪一个tutorial到AngularJs,但实现稍微不同的东西,现在我卡住了,似乎Angular没有识别内联模板“家”。

P.S:要在chrome上本地运行,我必须安装一个web服务器。

angular.module('little_tweet', ['ui.router']) 
 
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 
 
\t $stateProvider 
 
\t .state('home', { 
 
\t \t url: '/home', 
 
\t \t templateUrl: '/home.html', 
 
\t \t controller: 'MainCtrl' 
 
\t }) 
 
\t .state('posts', { 
 
    \t url: '/posts/{id}', 
 
    \t templateUrl: '/posts.html', 
 
    \t controller: 'PostsCtrl' 
 
\t }); 
 

 
\t $urlRouterProvider.otherwise('home'); 
 

 
}]) 
 
.factory('posts', [function() { 
 
\t var o = { posts: []}; 
 
\t return o; 
 
}]) 
 
.controller('MainCtrl', ['$scope', 'posts', function($scope, posts){ 
 
\t $scope.posts = posts.posts; 
 
\t 
 
\t $scope.current_user = 'me'; 
 
    
 
    $scope.addPost = function() { 
 
    \t if(!$scope.message || $scope.message === '') { return; } 
 
    
 
    $scope.posts.push({ 
 
    \t user: $scope.current_user, 
 
    \t message: $scope.message, 
 
    \t time: new Date() 
 
    }); 
 

 
\t \t $scope.message = ''; 
 
\t }; 
 
}]) 
 
.controller('PostsCtrl', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) { 
 
\t $scope.post = posts.posts[$stateParams.id]; 
 
}]);
<html> 
 
<head> 
 
    <title>Little Tweet</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.2.19/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="app.js"></script> 
 
    <style> .glyphicon-thumbs-up { cursor:pointer } </style> 
 
</head> 
 
<body ng-app="little_tweet"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-md-offset-3"> 
 
\t \t \t 
 
\t \t \t <ui-view></ui-view> 
 
     
 
     <div class="page-header"> 
 
     <h1>Little Tweet</h1> 
 
     </div> 
 

 
     <div ng-repeat="post in posts"> 
 
     <span style="font-size:20px; margin-left:10px;"> 
 
      {{{post.user}}: {{post.message}} at {{post.time}} 
 
     </span> 
 
     </div> 
 

 
     <form ng-submit="addPost()" 
 
     style="margin-top:30px;"> 
 
     <h3>Add a new post</h3> 
 

 
     <div class="form-group"> 
 
      <input type="text" 
 
      class="form-control" 
 
      placeholder="Message" 
 
      ng-model="message"></input> 
 
     </div> 
 
     <button type="submit" class="btn btn-primary">Post</button> 
 
     </form> 
 

 
    </div> 
 
    </div> 
 
\t <script type="text/ng-template" id="/home.html"> 
 
\t <div class="page-header"> 
 
\t  <h1>Little tweet</h1> 
 
\t </div> 
 

 
\t <!-- rest of template --> 
 
\t </script> 
 
</body> 
 
</html>

回答

1

从模板URL路径中删除/

编辑 存在{{{post.user}}: {{post.message}} at {{post.time}}额外{

+0

为什么这项工作的附加说明会改善您的答案。 – ryanyuyu

+0

templateUrl: '/home.html', 现在是 templateUrl: 'home.html做为', 而且它仍然给了我同样的错误,我也试图改变 \t <脚本类型=“文本/ NG-模板“id =”\ home.html“> 至 \t