2016-01-24 3 views
1

Итак, я пытаюсь добавить функциональность базы данных на свой простой веб-сайт, и это расстраивает меня вне всяких сомнений. Я могу использовать базовый контроллер, но как только я включаю модели, начинается путаница. Если контроллер запущен на стороне клиента, как я могу импортировать мои модели? Я не могу использовать запрос, потому что он серверный. Но везде я смотрю онлайн, они просто используют требования в контроллерах. Где я могу хранить свои модели и контроллеры и как правильно включить их в свои представления? Я предположил, что модели и контроллеры должны как-то использоваться на стороне сервера, а затем информация передается в представление. Мне, должно быть, недостает большой концепции здесь, если это большая проблема. У меня есть ужасное понимание того, как все эти части взаимодействуют, и я чувствую, что это вызвано огромными пробелами в моем знании этого материала. И если кто-то может связать хороший ресурс, чтобы лучше понять основы этого материала, так что я прекратить эти глупые и досадные ошибки, которые я бы очень признателен :) Спасибо, ребята и девушки очень многоКак включить модели и контроллеры в моем приложении Node.js?

Модель:

var mongoose = require("mongoose"); 

var PostSchema = new mongoose.Schema({ 
    title: { 
     type: String, 
     required: true 
    }, 
    content: { 
     type: String, 
     required: true 
    }, 
    imgUrl: { 
     type: String, 
     required: true 
    }, 
    uploadDate: { 
     type: Date, 
     required: true 
    }, 
    lastUpdated: { 
     type: Date, 
     required: true 
    } 
}); 

PostSchema.pre("save", function(next) { 
    var currentDate = new Date(); 

    if(!this.uploadDate) { 
     this.uploadDate = currentDate; 
    } 

    this.lastUpdated = currentDate; 

    next(); 

}); 

var Post = mongoose.model("Post", PostSchema); 

module.exports = Post; 

Просмотров:

head.jade:

//- CSS 
link(href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet") 
link(href="stylesheets/style.css" rel="stylesheet") 

//- Scripts 
script(src="bower_components/angular/angular.min.js") 
script(src="bower_components/jquery/dist/jquery.min.js") 
script(src="bower_components/bootstrap/dist/js/bootstrap.min.js") 
script(src="app/app.js") 

title #{title} | Vagablog 

layout.jade:

doctype html 
html(ng-app="app") 
    head 
     include head.jade 
     block scripts 

    body 
     .container-fluid 
      .row 
       .col-xs-12 
        #logo-container 
         img(class="img-responsive" id="logo" src="../images/logo.png") 
      include nav.jade 
      block content 
      block footer 

index.jade:

extends partials/layout 

block scripts 
    script(src="app/controllers/PostCtrl.js") 

block content 
    div(ng-controller="PostCtrl") 
     .row 
      .col-xs-9 
       #main 
        .row 
         .col-xs-12 
          form(class="form-horizontal" ng-submit="post(title, content, image)") 
           .form-group 
            label(for="inputTitle" class="col-sm-2 control-label") Title 
            .col-sm-10 
             input(required type="text" class="form-control" id="inputTitle" placeholder="Title" ng-model="title") 
           .form-group 
            label(for="inputContent" class="col-sm-2 control-label") Content 
            .col-sm-10 
             textarea(required class="form-control" id="inputContent" placeholder="Content" ng-model="content") 
           .form-group 
            label(for="inputImg" class="col-sm-2 control-label") Image URL 
            .col-sm-10 
             input(required type="text" class="form-control" id="inputImg" placeholder="Image URL" ng-model="image") 
           .form-group 
            .col-sm-offset-2.col-sm-10 
             button(type="submit" class="btn btn-default") Post 

        .row 
         .col-xs-12 
          div(ng-repeat="post in getPosts()") 
           hr 
           .well 
            h2 {{ post.title }} 
            h4 {{ post.content }} 
            img(src="{{ post.imgUrl }}") 
            p Uploaded: {{ post.uploadDate }} 
            p Last Updated: {{ post.lastUpdated }} 

      .col-xs-3 
       .row 
        .col-xs-12 
         #sidebar 
          .well(style="height: 500px;") 

block footer 
    .row 
     .col-xs-12 
      hr 
      .footer 
       h4(class="copyright") Footer 

Контроллер:

(function() { 

    var Post = require("../models/post"); 

    var PostCtrl = function ($scope, $log, $location) { 

     $scope.post = function (postTitle, postContent, postImage) { 

      var newPost = Post({ 
       title: postTitle, 
       content: postContent, 
       imgUrl: postImage, 
       uploadDate: new Date(), 
      }); 

      newPost.save(function(err) { 
       if (err) { 
        throw err; 
       }; 
      }); 

     }; 

     $scope.getPosts = function() { 

      Post.find({}, function(err, posts) { 
       if (err) { 
        throw err; 
       }; 

       return posts; 

      }); 

     }; 
    }; 

    app.controller("PostCtrl", ["$scope", "$log", "$location", PostCtrl]); 

})(); 

Многочисленные ошибки:

ReferenceError: require is not defined 
PostCtrl.js:3:6 

"Error: [ng:areq] http://errors.angularjs.org/1.4.9/ng/areq?p0=PostCtrl&p1=not%20a%20function%2C%20got%20undefined 

GET 
http://localhost:3000/%7B%7B%20post.imgUrl%20%7D%7D [HTTP/1.1 500 Internal Server Error 4ms] 
+0

Вы смешивания клиента и на стороне сервера код. Mongoose нельзя запускать в браузере. Вы также не можете использовать 'require' в браузере без компилятора. Вам нужно использовать http-узел узла, например express, чтобы создать api, доступ к которому вы можете получить в своем угловом контроллере. – Seth

+0

Хм, интересно. Любые ресурсы, которые ссылаются на этот или пример проектов? – Jordan

+0

любое семенное пространство проекта MEAN покажет вам упомянутое разделение – charlietfl

ответ

0

Проблема вы работаете в перемешивает код клиентского и серверного. То, что вам нужно сделать, это создать API, который предоставляет маршруты, к которым может обратиться ваше приложение на стороне клиента. Эти маршруты возвращают запросы мангуста.

Это article должна предложить все, что нужно для настройки API сервер

Что касается вашего кода клиента, вы хотите создать заводы с угловым, которые имеют функции для каждой соответствующей конечной точки. В рамках этих функций вы можете использовать услугу $http для чтения и изменения данных из ресурсов. Это можно сделать так:

angular.module('myApp') 
.factory('bearsFactory', ['$http', function($http) { 
    var urlBase = 'localhost:9000/api/bears'; 

    return { 
    getBears: function() { 
     return $http.get(urlBase); 
    }, 

    getBear: function (id) { 
     return $http.get(urlBase + '/' + id); 
    }, 

    createBear: function (bear) { 
     return $http.post(urlBase, bear); 
    }, 

    updateBear: function (bear) { 
     return $http.put(urlBase + '/' + bear.ID, bear) 
    }, 

    deleteBear: function (id) { 
     return $http.delete(urlBase + '/' + id); 
    } 
    } 
}]); 

Затем в контроллерах вы можете использовать эти заводы, как так:

angular.module('myApp') 
.controller('bearController', ['$scope', 'bearsFactory', function ($scope, bearsFactory) { 
    $scope.getBears() { 
    bearsFactory.getBears() 
    .success(function (bears) { 
     $scope.bears = bears; 
    }) 
    .error(function (error) { 
     $scope.status = 'Unable to load bear data: ' + error.message; 
    }); 
    } 
}]); 
Смежные вопросы