Введение в СРЕДНИЙ стек

 'use strict'; //Setting up route angular.module('mean.bucketList').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { // states for my app $stateProvider .state('all bucket list', { url: '/bucketList', templateUrl: 'public/bucketList/views/list.html' }); } ]); 

Внутри public/bucketList/views/ создайте файл с именем list.html . Это наш вид, который будет отображать наш список сегментов. Содержимое этого файла показано ниже.

 <section data-ng-controller="BucketListController"> Welcome to the bucket list collection </section> 

Также создайте файл с именем bucketList.js внутри public/bucketList/controllers содержащий следующий код.

 'use strict'; angular.module('mean.bucketList').controller('BucketListController', ['$scope', '$stateParams', '$location', 'Global', function($scope, $stateParams, $location, Global) { $scope.global = Global; } ]); 

Затем запустите приложение, используя grunt . Убедитесь, что MongoDB работает, если это еще не сделано. Перейдите в браузере по http://localhost:3000/#!/bucketList , и вы должны увидеть созданный нами список. Если вам интересно о #! в URL это просто делается для разделения маршрутизации AngularJS и NodeJS.

Добавить в список ковшей

Давайте создадим представление, чтобы добавить вещи в наш список. Внутри public/bucketList/views добавьте новый HTML-файл с именем create.html содержащий следующий код.

 <section data-ng-controller="BucketListController"> <form class="form-horizontal col-md-6" role="form" data-ng-submit="create()"> <div class="form-group"> <label for="title" class="col-md-2 control-label">Title</label> <div class="col-md-10"> <input type="text" class="form-control" data-ng-model="title" id="title" placeholder="Title" required> </div> </div> <div class="form-group"> <label for="description" class="col-md-2 control-label">Description</label> <div class="col-md-10"> <textarea data-ng-model="description" id="description" cols="30" rows="10" placeholder="Description" class="form-control" required></textarea> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </form> </section> 

Этот код присоединяет контроллер BucketListController . Также обратите внимание, что при отправке формы вызывается метод с именем create() . Далее, давайте создадим метод с именем create() в BucketListController . Следующий код должен быть добавлен в public/bucketList/controllers/bucketList.js , как показано ниже. Мы BucketList сервис BucketList в контроллер, который нам необходим для взаимодействия с серверной частью.

 'use strict'; angular.module('mean.bucketList').controller('BucketListController', ['$scope', '$stateParams', '$location', 'Global', 'BucketList', function ($scope, $stateParams, $location, Global, BucketList) { $scope.global = Global; $scope.create = function() { var bucketList = new BucketList({ title: this.title, description: this.description }); bucketList.$save(function(response) { $location.path('/bucketList'); }); }; } ]); 

Содержимое public/bucketList/services/bucketList.js показано ниже.

 'use strict'; angular.module('mean.bucketList').factory('BucketList', ['$resource', function($resource) { return $resource('bucketList); } ]); 

Нам также нужно добавить маршрут для добавления элементов в список сегментов. Измените public/bucketList/routes/bucketList.js , добавив еще одно состояние, как показано ниже.

 'use strict'; //Setting up route angular.module('mean.bucketList').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { // states for my app $stateProvider .state('all bucket list', { url: '/bucketList', templateUrl: 'public/bucketList/views/list.html' }) .state('add bucket list', { url: '/addBucketList', templateUrl: 'public/bucketList/views/create.html' }) } ]); 

Перезагрузите сервер и перейдите по http://localhost:3000/#!/addBucketList . Вы должны увидеть форму создания списка сегментов. К сожалению, это еще не функционально. Нам тоже нужно создать бэкэнд.

Создание Back-end

Список сегментов должен иметь название, описание и статус. Итак, создайте новый файл с именем bucketlist.js в server/models/bucketlist.js и добавьте следующий код.

 'use strict'; /** * Module dependencies. */ var mongoose = require('mongoose'), Schema = mongoose.Schema; /** * Bucket List Schema */ var BucketListSchema = new Schema({ created: { type: Date, default: Date.now }, title: { type: String, default: '', trim: true }, description: { type: String, default: '', trim: true }, status: { type: Boolean, default: false } }); mongoose.model('BucketList', BucketListSchema); 

Нам нужно настроить экспресс-маршрут, чтобы сервисные вызовы из AngularJS обрабатывались правильно. Создайте файл с именем server/routes/bucketList.js содержащий следующий код.

 'use strict'; var bucketList = require('../controllers/bucketList'); module.exports = function (app) { app.post('/bucketList', bucketList.create); }; 

POST запросы к /bucketList обрабатываются методом bucketList.create() . Этот метод принадлежит контроллеру сервера bucketList.js , который нам еще нужно создать. Содержимое server/controllers/bucketList.js должно выглядеть так:

 'use strict'; /** * Module dependencies. */ var mongoose = require('mongoose'), BucketList = mongoose.model('BucketList'); /** * Create an Bucket List */ exports.create = function(req, res) { var bucketList = new BucketList(req.body); bucketList.save(function(err) { if (err) { console.log(err); } else { res.jsonp(bucketList); } }); }; 

Нам еще многое предстоит почистить, но мы можем проверить, работает ли он так, как ожидалось. Когда пользователь отправляет форму AngularJS, он вызывает службу AngularJS, которая вызывает метод create() на стороне сервера, который затем вставляет данные в MongoDB.

После отправки формы мы можем проверить, правильно ли вставлены данные в Mongo. Чтобы проверить данные в MongoDB, откройте другой терминал и выполните следующие команды.

 mongo // Enter the MongoDB shell prompt show dbs; // Shows the existing Dbs use mean-dev; // Selects the Db mean-dev show collections; // Show the existing collections in mean-dev db.bucketlists.find() //Show the contents of bucketlists collection 

Создание представления списка ковшей

Сначала добавьте новый маршрут в server/routes/bucketList.js :

 app.get('/bucketList', bucketList.all); 

Этот новый маршрут вызывает метод all() контроллера. Добавьте этот метод в server/controllers/bucketList.js , как показано ниже. Этот код находит записи в коллекции bucketList и возвращает их.

 exports.all = function(req, res) { BucketList.find().exec(function(err, bucketList) { if (err) { console.log(err); } else { res.jsonp(bucketList); } }); }; 

Затем добавьте новый метод в public/bucketList/controllers/bucketList.js как показано ниже.

 $scope.getAllBucketList = function() { BucketList.query(function(bucketList) { $scope.bucketList = bucketList; }); }; 

Этот код выбирает данные из Mongo и сохраняет их в нашей переменной $scope.bucketList . Теперь нам просто нужно привязать его к нашему HTML. Это делается в public/bucketList/views/list.html :

 <section data-ng-controller="BucketListController" data-ng-init="getAllBucketList()"> <ul class="bucketList unstyled"> <li data-ng-repeat="item in bucketList"> <span>{{item.created | date:'medium'}}</span> / <span>{{item.title}}</span> <div>{{item.description}}</div> </li> </ul> <a href="/#!/addBucketList">Create One</a> </section> 

Перезагрузите сервер и перейдите по http://localhost:3000/#!/bucketList . Это должно отобразить элементы списка сегментов. Вы также можете попробовать добавить новые элементы, нажав на ссылку «Создать» под списком.

Вывод

В этой статье мы сосредоточились на создании простого приложения с использованием стека MEAN. Мы реализовали добавление записи в MongoDB и отображение записей из БД. Если вы заинтересованы в расширении этого примера, вы можете попробовать добавить операции обновления и удаления. Код из этой статьи доступен на GitHub .