MEANのプロジェクトをAngular4でCMS作成する⑥

Node.jsのディレクトリの方にmodels, routesっというフォルダを追加する。

そして、それぞれにpage.jsを作成する。

そして、modelフォルダのpage.jsにはDBの定義を作成

var mongoose = require('mongoose');

// Page schema
var PageSchema = mongoose.Schema({
    title: {
        type: String
    },
    slug: {
        type: String
    },
    content: {
        type: String
    },
    sidebar: {
        type: String
    },

})

var Page = module.exports = mongoose.model('Page', PageSchema);

var mongoose = require('mongoose');

// Page schema

var PageSchema = mongoose.Schema({

title: {

type: String

slug: {

type: String

content: {

type: String

sidebar: {

type: String

})

var Page = module.exports = mongoose.model('Page', PageSchema);

routesフォルダにはのpage.jsには

var express = require('express');
var router = express.Router(1);

// Get Page Model
var Page = require('../models/page')



/*
    GET all Pages
 */

router.get("/", function(req, res){
    Page.find({}, function(err, pages) {
        if(err) console.log(err);
         res.json(pages);
    })
})

// Exports
module.exports = router;

var express = require('express');

var router = express.Router(1);

// Get Page Model

var Page = require('../models/page')

GET all Pages

router.get("/", function(req, res){

Page.find({}, function(err, pages) {

if(err) console.log(err);

res.json(pages);

})

// Exports

module.exports = router;

app.jsは以下のような感じ

var express = require("express");
var path = require("path");
var mongoose = require("mongoose");
var bodyParser = require("body-parser");
var config = require("./config/database.js");

// Connect To Database
mongoose.connect(config.database);
var db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error"));
db.once("open", function() {
    console.log("connected to MongoDB")
});

// Init app
var app = express();

// Prettyfy JSON
app.set("json spaces", 40);

// Body parse middleware
// parse application/x-ww-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json());

<strong>// set routes
var pages = require("./routes/pages.js");
app.use("/pages", pages);
</strong>
// Start the server
var port = 3000;
app.listen(port, function() {
    console.log("Server running at " + port);
})

var express = require("express");

var path = require("path");

var mongoose = require("mongoose");

var bodyParser = require("body-parser");

var config = require("./config/database.js");

// Connect To Database

mongoose.connect(config.database);

var db = mongoose.connection;

db.on("error", console.error.bind(console, "connection error"));

db.once("open", function() {

console.log("connected to MongoDB")

});

// Init app

var app = express();

// Prettyfy JSON

app.set("json spaces", 40);

// Body parse middleware

// parse application/x-ww-form-urlencoded

app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json

app.use(bodyParser.json());

<strong>// set routes

var pages = require("./routes/pages.js");

app.use("/pages", pages);

</strong>

// Start the server

var port = 3000;

app.listen(port, function() {

console.log("Server running at " + port);

})

↓のコードを追加した。

// set routes
var pages = require(“./routes/pages.js”);
app.use(“/pages”, pages);

適当にMongoDBにレコードを追加してみる。

そうすると。。

http://localhost:3000/pages

にブラウザで接続。

で、OK。

MEANのプロジェクトをAngular4でCMS作成する⑤

Node.jsのAPIのフォルダを仮にnodecmsprojectっとして作成して、

そのフォルダに移動し、npm init

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (nodecmsproject) app.js
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/user/Documents/workspace5/nodecmsproject/package.json:

{
  "name": "app.js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

$ npm init

This utility will walk you through creating a package.json file.

It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields

and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and

save it as a dependency in the package.json file.

Press ^C at any time to quit.

package name: (nodecmsproject) app.js

version: (1.0.0)

description:

entry point: (index.js)

test command:

git repository:

keywords:

author:

license: (ISC)

About to write to /Users/user/Documents/workspace5/nodecmsproject/package.json:

{

"name": "app.js",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"author": "",

"license": "ISC"

}

Is this OK? (yes) yes

packageの名前を聞かれるのでそこだけapp.jsっとして、ほかはリターンですすんでいく。

次に

Expressフレームワーク,Mongoose,Body-parserをインストール。

をインストール。

Expressとは、Node.jsでの王道的な開発をスピードアップするためのフレームワーク

Mongooseは、MongoDBを操作するためのライブラリ。

Body-parserは、ExpressでPOSTで値を受け取る場合のミドルウェア。

$ npm install --save express mongoose body-parser
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN app.js@1.0.0 No description
npm WARN app.js@1.0.0 No repository field.

+ body-parser@1.18.3
+ express@4.16.3
+ mongoose@5.3.1
added 84 packages from 61 contributors and audited 188 packages in 7.114s
found 0 vulnerabilities

$ npm install --save express mongoose body-parser

npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN app.js@1.0.0 No description

npm WARN app.js@1.0.0 No repository field.

+ body-parser@1.18.3

+ express@4.16.3

+ mongoose@5.3.1

added 84 packages from 61 contributors and audited 188 packages in 7.114s

found 0 vulnerabilities

/nodecmsproject/app.jsを作成してそこにコーディングを開始、必要なパッケージをインポートしていく。

var express = require("express");
var path = require("path");
var mongoose = require("mongoose");
var bodyParser = require("body-parser");
var config = require("config");

var express = require("express");

var path = require("path");

var mongoose = require("mongoose");

var bodyParser = require("body-parser");

var config = require("config");

/nodecmsproject/config/database.js

を作成。

module.exports = {
    database: ""
}

module.exports = {

database: ""

}

。。DBがまだ作っていないので、MongoDBの作成をする。

まず昔にmongodbをインストールした記憶があるので、それを確認。

$ mongo --version
MongoDB shell version v3.4.1
git version: 5e103c4f5583e2566a45d740225dc250baacfbd7
OpenSSL version: OpenSSL 1.0.2l  25 May 2017
allocator: system
modules: none
build environment:
    distarch: x86_64
    target_arch: x86_64

$ mongo --version

MongoDB shell version v3.4.1

git version: 5e103c4f5583e2566a45d740225dc250baacfbd7

OpenSSL version: OpenSSL 1.0.2l 25 May 2017

allocator: system

modules: none

build environment:

distarch: x86_64

target_arch: x86_64

っということで接続情報を確認。

$ mongo 
MongoDB shell version v3.4.1
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.4.1

$ mongo

MongoDB shell version v3.4.1

connecting to: mongodb://127.0.0.1:27017

MongoDB server version: 3.4.1

接続先は127.0.0.1:27017とわかる。

PHPStormのMongoExpressPluginを使う。

↓みたいな感じでMongoDBのGUIを設定。

↓みたいな感じでPHPStorm開発環境に表示される。

mongoのコマンドライン上で、このプロジェクト用のDBを作成

DB作成という目的のためだけのコマンドは存在しない。

新規のDBを使用するっとコマンドすると同時に新規にDBが作成される。

> use cmsproject;

1	> use cmsproject;

続いて、DB内にコレクションを作成する

> db.createCollection("pages");
{ "ok" : 1 }

1 2	> db.createCollection("pages"); { "ok" : 1 }

ここで初めてDBが作成される。

ここで

/nodecmsproject/config/database.js

の作成に戻って、

module.exports = {
    database: "mongodb://localhost/cmsproject"
}

module.exports = {

database: "mongodb://localhost/cmsproject"

}

/nodecmsproject/app.jsは以下のようにコーディングしてみる。

var express = require("express");
var path = require("path");
var mongoose = require("mongoose");
var bodyParser = require("body-parser");
var config = require("./config/database.js");

// Connect To Database
mongoose.connect(config.database);
var db = mongoose.connection;
db.on("error", console.error.bind(console, "connection error"));
db.once("open", function() {
    console.log("connected to MongoDB")
});

// Init app
var app = express();

// Prettyfy JSON
app.set("json spaces", 40);

// Body parse middleware
// parse application/x-ww-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json());

// Start the server
var port = 3000;
app.listen(port, function() {
    console.log("Server running at " + port);
})

var express = require("express");

var path = require("path");

var mongoose = require("mongoose");

var bodyParser = require("body-parser");

var config = require("./config/database.js");

// Connect To Database

mongoose.connect(config.database);

var db = mongoose.connection;

db.on("error", console.error.bind(console, "connection error"));

db.once("open", function() {

console.log("connected to MongoDB")

});

// Init app

var app = express();

// Prettyfy JSON

app.set("json spaces", 40);

// Body parse middleware

// parse application/x-ww-form-urlencoded

app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json

app.use(bodyParser.json());

// Start the server

var port = 3000;

app.listen(port, function() {

console.log("Server running at " + port);

})

で、とりあえず走らせてみる

$ node app.js
(node:2961) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
Server running at 3000
connected to MongoDB

$ node app.js

(node:2961) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.

Server running at 3000

connected to MongoDB

っとなればOK。

Node.jsのソースが変えられるたびに自動で反応しサーバをリロードさせるようにnodemonをインストール

$ npm install -g nodemon

1	$ npm install -g nodemon

$ nodemon app.js
[nodemon] 1.18.4
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node app.js`
(node:3021) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
Server running at 3000
connected to MongoDB

$ nodemon app.js

[nodemon] 1.18.4

[nodemon] to restart at any time, enter `rs`

[nodemon] watching: *.*

[nodemon] starting `node app.js`

(node:3021) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.

Server running at 3000

connected to MongoDB

OK.

MEANのプロジェクトをAngular4でCMS作成する④

レイアウトのベースとしてBootstrapの公式ページから適当なサンプルを拾ってくる。

https://getbootstrap.com/docs/3.3/examples/starter-template/

このbodyの中身だけをsrc/app/app.component.htmlにコピペ

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Project name</a>

</div>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</div>

</div>

</nav>

<h1>Bootstrap starter template</h1>

<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>

</div>

ブラウザで確認。

ちょっと変だけど、まぁとりあえずOK。

MEANのプロジェクトをAngular4でCMS作成する③

ナビゲーションバーを作成したい。

そのためのコンポーネントを取得する。

$ ng g c componets/navbar
CREATE src/app/componets/navbar/navbar.component.css (0 bytes)
CREATE src/app/componets/navbar/navbar.component.html (25 bytes)
CREATE src/app/componets/navbar/navbar.component.spec.ts (628 bytes)
CREATE src/app/componets/navbar/navbar.component.ts (269 bytes)
UPDATE src/app/app.module.ts (406 bytes)

$ ng g c componets/navbar

CREATE src/app/componets/navbar/navbar.component.css (0 bytes)

CREATE src/app/componets/navbar/navbar.component.html (25 bytes)

CREATE src/app/componets/navbar/navbar.component.spec.ts (628 bytes)

CREATE src/app/componets/navbar/navbar.component.ts (269 bytes)

UPDATE src/app/app.module.ts (406 bytes)

src/app/componets/navbar/navbar.component.html

のファイルを開いてみると

<p>
  navbar works!
</p>

<p>

navbar works!

</p>

といった状態。

本体の

src/app/app.component.html

を内容を全部消して、以下のように書き直す。

<app-navbar></app-navbar>

1	<app-navbar></app-navbar>

そしてリフレッシュして確認。

MEANのプロジェクトをAngular4でCMS作成する②

次にjQueryとBootstrapもインストールしておく。

$ npm install jquery bootstrap@3 –save
+ jquery@3.3.1
+ bootstrap@3.3.7
added 2 packages from 2 contributors and audited 38986 packages in 15.177s
found 0 vulnerabilities

そして、angular.jsonにインストールしたファイルを組み込む。

“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/cmsproject”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “src/tsconfig.app.json”,
“assets”: [
“src/favicon.ico”,
“src/assets”
],
“styles”: [
“src/styles.css”,
“node_modules/bootstrap/dist/css/bootstrap.css”
],
“scripts”: [
“node_modules/jquery/dist/jquery.js”,
“node_modules/bootstrap/dist/js/bootstrap.js”
]
},

赤色は追加した部分。

もう一度サーバを立ち上げ直してみる。

$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-02T14:01:14.518Z
Hash: c343c06bcd8a1fb9b97f
Time: 9685ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 341 kB [rendered]
chunk {styles} styles.js, styles.js.map 165 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

赤色の部分を見てもらうと、バンドルされたスクリプトの容量が増加していることがわかる。

localhost:4200をもう一度ブラウザで見る。

変化していることが分かります！

MEANのプロジェクトをAngular4でCMS作成する①

MEANのプロジェクトをAngular4で作成する。

まずは、AngularCLIをインストールする。

AngularCLIとは、AngularJS用のコマンドラインインターフェースのこと、

Angularを中心にプロジェクト開発をする上で使うことになるので、

まずインストール

npm install -g @angular/cli

1	npm install -g @angular/cli

そして、プロジェクトのベースを作成。

$ ng new cmsproject --skip-install
You are running version v4.3.1 of Node.js, which is not supported by Angular CLI v6.
The official Node.js version that is supported is 8.9 and greater.

Please visit https://nodejs.org/en/ to find instructions on how to update Node.js.

$ ng new cmsproject --skip-install

You are running version v4.3.1 of Node.js, which is not supported by Angular CLI v6.

The official Node.js version that is supported is 8.9 and greater.

Please visit https://nodejs.org/en/ to find instructions on how to update Node.js.

っと思ったらこんなことを言われてしまった。

Node.jsのバージョンが低くてAngular CLIでサポートされてないっということで、アップデートしてください。っということです。

ということで、Nodeのバージョン管理をするnをインストール

npm install -g n

1	npm install -g n

それで↓のバージョンをインストールする。

Node.jsのホームページでは↓のバージョンが一番使われてるっとあったので。

$ n 8.12.0

1	$ n 8.12.0

そして再度コマンド。

$ ng new cmsproject --skip-install

1	$ ng new cmsproject --skip-install

生成したディレクトリはこんな感じ

ここまで来たら初めて

$npm install

1	$npm install

では、サーバを開始してみる

$ ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                                          
Date: 2018-10-02T13:39:30.049Z
Hash: 47e9e37ea031431baa5f
Time: 12095ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

$ ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-10-02T13:39:30.049Z

Hash: 47e9e37ea031431baa5f

Time: 12095ms

chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]

chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]

chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]

chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]

chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]

ℹ ｢wdm｣: Compiled successfully.

っと言った感じでサーバが開始。

localhost:4200をブラウザで開いてみるっと。

といった感じで表示が出ればOK。

HARD WORKER

カンボジア・プノンペンのフリーWEBプログラマー

Tag: AngularJS4

MEANのプロジェクトをAngular4でCMS作成する⑥

MEANのプロジェクトをAngular4でCMS作成する⑤

MEANのプロジェクトをAngular4でCMS作成する④

MEANのプロジェクトをAngular4でCMS作成する③

MEANのプロジェクトをAngular4でCMS作成する②

MEANのプロジェクトをAngular4でCMS作成する①

October 2024
M	T	W	T	F	S	S
« Nov
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31