MEAN.JS-SPAの構築：次のレベル

前の章では、Angularjsを使用した単一ページのmeanjsアプリケーションの作成を見てきました。この章では、AngularアプリケーションがAPIを使用してMongodbからデータを取得する方法を見てみましょう。

このアプリケーションのソースコードは、次のリンクからダウンロードできます：[リンク]。 zipファイルをダウンロードします。システムでそれを抽出します。

私たちのソースコードのディレクトリ構造は次のとおりです-

mean-demo
   -app
      -models
         -student.js
   -config
      -db.js
   -public
      -js
         -controllers
            -MainCtrl.js
            -StudentCtrl.js
         -services
            -StudentService.js
         -app.js
         -appRoutes.js
      -views
         -homel
         -studentl
      -indexl
   -.bowerrc
   -bower.json
   -package.json
   -server.js

このアプリケーションでは、ビュー（homel）を作成しました。このビューには、コレクションStudentのすべての学生がリストされ、新しい student レコードを作成したり、学生レコードを削除したりできます。これらの操作はすべて、REST API呼び出しを介して実行されます。

ターミナルを開き、以下のコマンドを実行してnpmモジュールの依存関係をインストールします。

$ npm install

次に、以下のコマンドを使用してBowerコンポーネントをインストールします。 public/libsの下のすべてのファイルで、bower pullを確認できます。

$ bower install

アプリケーションのノード構成は、server.jsファイルに保存されます。これはノードアプリのメインファイルであり、アプリケーション全体を構成します。

//modules =================================================
const express = require('express');
const app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var methodOverride = require('method-override');
//set our port
const port = 3000;
//configuration ===========================================
//configure body parser
app.use(bodyParser.json());//parse application/json

//parse application/vnd.api+json as json
app.use(bodyParser.json({ type: 'application/vnd.api+json' }));

//parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

//override with the X-HTTP-Method-Override header in the request.
app.use(methodOverride('X-HTTP-Method-Override')); simulate DELETE/PUT

//set the static files location/public/img will be/img for users
app.use(express.static(__dirname + '/public'));

//config files
var db = require('./config/db');
console.log("connecting--",db);
mongoose.connect(db.url);//Mongoose connection created

//grab the student model
var Student = require('./app/models/student');
function getStudents(res) {
   Student.find(function (err, students) {
     //if there is an error retrieving, send the error. nothing after res.send(err) will execute
         if (err) {
            res.send(err);
         }
         res.json(students);//return all todos in JSON format
      });
   };
app.get('/api/studentslist', function(req, res) {
   getStudents(res);
});
app.post('/api/students/send', function (req, res) {
   var student = new Student();//create a new instance of the student model
   student.name = req.body.name;//set the student name (comes from the request)
   student.save(function(err) {
      if (err)
         res.send(err);
         getStudents(res);
   });
});
app.delete('/api/students/:student_id', function (req, res) {
   Student.remove({
      _id: req.params.student_id
      }, function(err, bear) {
         if (err)
            res.send(err);
         getStudents(res);
      });
});
//startup our app at http://localhost:3000
app.listen(port, () ⇒ console.log(`Example app listening on port ${port}!`));

フロントエンドルートの定義

_public/indexl_ファイルには、次のコードスニペットがあります-

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>finddevguides Node and Angular</title>

      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->

      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>

      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/services/StudentService.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>

         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

API呼び出しを行い、APIリクエストを実行するサービスを作成しました。私たちのサービス、_StudentService_は以下のように見えます-

angular.module('StudentService', [])
//super simple service
//each function returns a promise object
.factory('Student', ['$http',function($http) {
   return {
      get : function() {
         return $http.get('/api/students');
      },
      create : function(student) {
         return $http.post('/api/students/send', student);
      },
      delete : function(id) {
         return $http.delete('/api/students/' + id);
      }
   }
}]);

私たちのコントローラ（MainCtrl.js）コードは以下のとおりです-

angular.module('MainCtrl', []).controller('MainController',
   ['$scope','$http','Student',function($scope, $http, Student) {
   $scope.formData = {};
   $scope.loading = true;
   $http.get('/api/studentslist').
   then(function(response) {
      $scope.student = response.data;
   });
  //CREATE
  //when submitting the add form, send the text to the node API
   $scope.createStudent = function() {
     //validate the formData to make sure that something is there
     //if form is empty, nothing will happen
      if ($scope.formData.name != undefined) {
         $scope.loading = true;
        //call the create function from our service (returns a promise object)
         Student.create($scope.formData)
        //if successful creation, call our get function to get all the new Student
         .then(function (response){
            $scope.student = response.data;
            $scope.loading = false;
            $scope.formData = {}
         },    function (error){
         });
      }
   };
  //DELETE
   ==================================================================
  //delete a todo after checking it
   $scope.deleteStudent = function(id) {
      $scope.loading = true;
      Student.delete(id)
     //if successful delete, call our get function to get all the new Student
      .then(function(response) {
         $scope.loading = false;
         new list of Student
      });
   };
}]);

実行中のアプリケーション

プロジェクトディレクトリに移動し、以下のコマンドを実行します-

$ npm start

ここで http：//localhost：3000 に移動すると、以下の画像に示すようなページが表示されます-

アプリケーションの実行ページ

テキストボックスにテキストを入力し、[追加]ボタンをクリックします。レコードが追加され、次のように表示されます-

実行中のアプリケーション追加ボタン

チェックボックスをオンにすると、レコードを削除できます。

Meanjs-building-spa-next-level

MEAN.JS-SPAの構築：次のレベル

フロントエンドルートの定義

実行中のアプリケーション