gpt4 book ai didi

javascript - AngularJS - 在一个简单的应用程序上获取 "Uncaught Error: [$injector:modulerr]"消息

转载 作者:行者123 更新时间:2023-12-02 14:12:10 25 4
gpt4 key购买 nike

我正在关注 Linkster 的在线教程,该教程展示了如何使用 MEAN 堆栈创建 Reddit 克隆。 (https://thinkster.io/mean-stack-tutorial#angular-routing)

我已经尝试了一切,但似乎没有任何效果。任何想法有什么问题吗?任何帮助/想法表示赞赏:)

-----index.html----------------

<html>
<head>
<title>Welcome to FlapperNews!</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>

<script src="app.js"></script>
<style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" ng-controller="MainCtrl">
<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>FlapperNews</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></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>
-upvotes: {{post.upvotes}}
</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="title" ng-model="title"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
</body>
</html>

----app.js----------------

var app = angular.module('flapperNews', ['ui-router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){

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

// .state('posts', {
// url: '/posts/{id}',
// templateUrl: '/posts.html',
// controller: 'PostsCtrl'
// });

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

app.factory('posts', [function(){
var o = {
posts: [{title: 'hello post1', link: '', upvotes: 0 }]
};
return o;
}])

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 = '';
$scope.link = '';
}

$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
}
}]);

最佳答案

尝试 var app = angular.module('flapperNews', ['ui.router']); 而不是 var app = angular.module('flapperNews', ['ui.router']); -路由器']);

关于javascript - AngularJS - 在一个简单的应用程序上获取 "Uncaught Error: [$injector:modulerr]"消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39442119/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com