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
— 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.
Create an account or log in with Github account.
Create new workspace.
-select blank Template
(2) update node and npm
Original version (as of February 2, 2018)
Since the Recommended Version is 8.9.4,
// 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.
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/.
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 email@example.com:dog-ears/er-diagram-tool.git 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.