В настоящее время я изучаю Angular.JS и работал с несколькими учебниками, подобными этому this one. Я последовал за Шагами, но попытался улучшить код, сохранив отдельные части, такие как controllers или services в отдельном .js файлах, потому что я слышал, что это хорошая привычка. Это не проблема, и все было хорошо. Но когда я придумал Service, который предоставляет мои сообщения, я также попытался написать какой-то API в Service, потому что я научился в другом учебнике для этого.Проблемы с услугой AngularJS
Появляется проблема: API для получения моего списка сообщений работает нормально, но если я попытаюсь отправить данные из-за функции addPost в API, он вообще не работает.
Возможно, вы можете помочь мне узнать, в чем проблема, потому что я хочу реализовать Backend на post-Service позже и хочу, чтобы все $http запросов в одном месте.
EDIT
код-образец ниже работает сейчас, и вы можете увидеть проблему, если вы пытаетесь добавить сообщение. Код останавливается после/во время функции addPost() в MainCtrl, потому что «очистка» формы HTML не происходит.
здесь вы можете найти свой код:
var app = angular.module('flapperNews', []);
app.controller('MainCtrl', function($scope, postService){
$scope.test = "Hello, World!";
$scope.posts = postService.getPosts();
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { return; }
postService.addPost({title: $scope.title, link: $scope.link, upvotes: 0});
//This code above was my try ith the API in posts.js
// $scope.posts.push({
// title: $scope.title,
// link: $scope.link, // this whole part is from the tutorial and works fine
// upvotes: 0
//});
$scope.title = '';
$scope.link = '';
};
$scope.incrementUpvotes = function(post) {
post.upvotes += 1;
};
});
app.factory('postService', function() {
var srv = {};
srv._posts = [
{title: 'post 1', link: '', upvotes: 5},
{title: 'post 2', link: '', upvotes: 2},
{title: 'post 3', link: '', upvotes: 15},
{title: 'post 4', link: '', upvotes: 9},
{title: 'post 5', link: '', upvotes: 4}
];
srv.getPosts = function() {
return angular.copy(srv._posts);
};
srv.addPost = function(post) { //function to put the new Post in the Array
srv._posts.push(post);
};
return {
getPosts: function() {
return srv.getPosts();
},
addPost: function(post) { //the public API to put the post in the Array
srv.addPost(post);
}
};
});<!DOCTYPE html>
<html>
<head>
\t <meta charset="Utf-8">
\t <title>FlapperNews</title>
\t <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
\t <style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>
<body ng-app="flapperNews" ng-controller="MainCtrl">
\t <div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy:'-upvotes'">
<span class="glyphicon glyphicon-thumbs-up"
ng-click="incrementUpvotes(post)"></span>
{{post.upvotes}}
<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>
<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>
</div>
</div>
\t <!-- Scripts -->
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
\t <script src=scripts/app.js></script>
\t <script src=scripts/controller/main.js></script>
\t <script src=scripts/service/posts.js></script>
</body>
</html>
какая ошибка у вас есть? – AlainIb
Не запугивайте в создание отдельных файлов для всего. И какова ваша ошибка? –
после того, как я нажму ** Сообщение ** новый 'post' не будет добавлен в список сообщений над' формой'. – JohnDizzle