我开始研究AngularJS并遇到了一些问题
我按照本网站的教程进行操作:https://thinkster.io/mean-stack-tutorial
我将$ stateProvider.state设置为如下所示,但它没有加载home.html
我甚至单独创建home.html,但它没有用。
这段代码出了什么问题?
app.js:
'use strict';
var app = angular.module('flapperNews', ['ui.router']);
// controller
app.controller('MainCtrl', ['$scope', 'servicePosts', function($scope, servicePosts){
$scope.posts = servicePosts.myPosts;
$scope.addPost = function(){
if (!$scope.title || $scope.title === '') { return; }
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0
}); // ng-model을 index.html에서 이용했기 때문에 가능함
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function(post){
post.upvotes += 1;
};
}]);
// service
app.factory('servicePosts', [function(){
var o = {
myPosts: [{title:'hi', upvotes:0}]
};
return o;
}]);
// router
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$stateProvider.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
index.html:
<html>
<head>
<title>My Angular App!</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="./scripts/app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
<script type="text/ng-template" id="/home.html">
// <!-- Header -->
<div class="page-header">
<h1>Flapper News</h1>
</div>
// <!-- show list part -->
<div ng-repeat="post in posts | orderBy: '-upvotes' ">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"> {{post.upvotes}} </span>
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
</div>
// <!-- submit part -->
<form ng-submit="addPost()" style="margin-top:30px;">
<h3>Add a new post</h3>
// <!--ng-model 이라는 것은 scope의 변수로 지정하겠다 라는 의미인듯 -->
<div class="form-group">
<input type="text" placeholder="Title" ng-model="title"></input>
</div>
<div class="form-group">
<input type="text" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit">Post</button>
</form>
</script>
</head>
<body ng-app="flapperNews">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>