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) —
https://github.com/dog-ears/er-diagram-tool
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
cloud9(https://c9.io/)
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
nodeJS(https://nodejs.org/)
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.
[Change]
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: //***.c9users.io/dist/index.html and it becomes notFound,
Let’s open https: //***.c9users.io/.
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@github.com:dog-ears/er-diagram-tool.git git push -u origin master git tag 0.1.0 git push origin 0.1.0
■github
https://github.com/dog-ears/er-diagram-tool/tree/0.1.0
Up to here for this time.
Next time, install ngx – bootstrap, add google material icon, create navigator.