我正在尝试使用AngularJS,NodeJS和Jade制作类似博客的网络应用。我正在尝试在我的一个视图中发布表单中的值,并将其作为JSON对象保存到MongoDB数据库。它似乎不起作用。任何帮助,将不胜感激。
以下是一些视图代码 (layout.jade)
doctype html
html(ng-app="app")
head
meta(charset="utf-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge,chrome=1")
meta(name="viewport" content="width=device-width, initial-scale=1")
// Montserrat Font
link(href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css')
// CSS
link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css")
link(rel="stylesheet" href="stylesheets/style.css" type="text/css")
// Libraries
script(src="https://code.jquery.com/jquery-2.1.4.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js")
title Punterest
body
.head
h1 Welcome to Punterest
block grid
.fixed-action-btn.click-to-toggle(style='bottom: 45px; right: 24px;')
a.btn-floating.btn-large.red.darken-1.waves-effect.waves-light.modal-trigger(href="#post-modal")
i.large.mdi-navigation-menu
#post-modal.modal
.modal-content
h3 New Post
.row
form.col.s12
.row
.input-field.col.s12
input.validate(id="link" type="text" ng-model="newPostUrl")
label(for="link") Image URL
.row
.input-field.col.s12
input.validate(id="enter-text" type="text" ng-model="newPostText")
label(for="enter-text") Text
.modal-footer
a(href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" ng-click="save()") Post
a(href="#!" class="modal-action modal-close waves-effect waves-red btn-flat") Cancel
script(src="javascripts/pingrid.js")
script(src="javascripts/main.js")
(index.jade)
extends layout
block grid
ng-view
// Libraries
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-resource.min.js")
// Template
script(type="text/ng-template" id="/posts.html").
<div class="grid">
<a class="pin-item" ng-repeat="post in posts" href="#/{{post._id}}">
<img ng-src="{{post.url}}">
<h2>{{post.text}}</h2>
</a>
</div>
script(type="text/ng-template" id="/postDetails.html").
<h1>{{ post.text }}</h1>
<img ng-src="{{post.url}}">
script.
angular.module('app', ['ngRoute', 'ngResource'])
//---------------
// Services
//---------------
.factory('Posts', ['$resource', function($resource){
return $resource('/posts/:id', null, {
'update': { method:'PUT'}
});
}])
//---------------
// Controllers
//---------------
.controller('PostController', ['$scope', 'Posts', function ($scope, Posts) {
$scope.posts = Posts.query();
$scope.save = function(){
if($scope.newPostUrl.length < 1 && $scope.newPostText.length < 1) return;
var post = new Posts({ url: $scope.newPostUrl, text: $scope.newPostText });
todo.$save(function(){
$scope.posts.push(post);
$scope.newPostUrl = '';
$scope.newPostText = '';
});
}
}])
.controller('PostDetailCtrl', ['$scope', '$routeParams', 'Posts', function ($scope, $routeParams, Posts) {
$scope.post = Posts.get({id: $routeParams.id});
}])
//---------------
// Routes
//---------------
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/posts.html',
controller: 'PostController'
})
.when('/:id', {
templateUrl: '/postDetails.html',
controller: 'PostDetailCtrl'
});
}]);