如何在angularjs和jade中发布值?

时间:2015-12-06 15:36:53

标签: javascript angularjs node.js mongodb mongoose

我正在尝试使用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'
     });
  }]);

0 个答案:

没有答案