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>
为什么这项工作的附加说明会改善您的答案。 – ryanyuyu
templateUrl: '/home.html', 现在是 templateUrl: 'home.html做为', 而且它仍然给了我同样的错误,我也试图改变 \t <脚本类型=“文本/ NG-模板“id =”\ home.html“> 至 \t