Angularで作るER DIAGRAM TOOL – 第一回 Cloud9へAngularをインストールする

Scaffold package for Laravel which I develop on my own,
As complicated and complicated to write JSON data,
Apart from studying Angular, I decided to make ER diagram making tool.

— Development environment —
IDE : Cloud9
development language : Typescript
Framework : Angular v5.2.3
CSS Framework : bootstrap, ngx-bootstrap
JS library : jsplumb Community Edition

— Functional requirement —
-Create, modify and delete Model (Table)
-Create, modify, delete and rearrange Schema (Column)
-Create / delete Relationship (one-to-many or many-to-many)
*Delete one-to-many by deleting target Schema
*Delete many-to-many by deleting pivot model
-Exporting JSON

— git repository (updated as needed) —

Because I am a beginner Angular,
I am thinking to make commentary easy to understand for beginners.

Let’s first install Angular on Cloud 9.

(1) Cloud9


Create an account or log in with Github account.
Create new workspace.

-select blank Template
-Remove README

(2) update node and npm

Original version (as of February 2, 2018)
node v6.11.2
npm 3.10.10


Since the Recommended Version is 8.9.4,
Install it.

// node update

nvm install v8.9.4
nvm alias default v8.9.4

In node v 8.9.4
It became npm 5.6.0.

(3) Installation of Angular

Following the official, use AngularCLI.

//  Installation of Angular

npm install -g @angular/cli

// Create project

ng new er-diagram

An er-diagram folder is created right under the root, but since it is unnecessary, we change the hierarchy.

shopt -s dotglob
mv er-diagram/* ./
rm -rf er-diagram

// Change document route

sudo vi /etc/apache2/sites-available/001-cloud9.conf

-Change to edit mode with i.
-To exit, save the file with: wq! By pressing esc key.

DocumentRoot /home/ubuntu/workspace

DocumentRoot /home/ubuntu/workspace/dist

with this,

ng build

When you execute, the dist folder is created.

Open index.html in the dist folder and preview it with “Run”.
* The displayed url is https: //*** and it becomes notFound,
Let’s open https: //***

During work,

ng build -w

By executing the above, you will be monitoring file status,
It is updated automatically each time you save.

(4) Setting of github

When installing with Angular CLI, git init is done.
So, set it remotely and push it.

git remote add origin
git push -u origin master
git tag 0.1.0
git push origin 0.1.0


Up to here for this time.
Next time, install ngx – bootstrap, add google material icon, create navigator.


  • このエントリーをはてなブックマークに追加