Skills

This project was generated with Angular CLI version 13.3.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files. Run ng serve -O

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. The web-packs will be loaded.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.

Generate new Component

Snapshot C:\Users\psteens\IdeaProjects\AngularJS\Coruses\BootCampPercipio\HTML_Day_01_Part1_Starter\skills>ng generate component home CREATE src/app/home/home.component.html (19 bytes) CREATE src/app/home/home.component.spec.ts (612 bytes) CREATE src/app/home/home.component.ts (267 bytes) CREATE src/app/home/home.component.css (0 bytes) UPDATE src/app/app.module.ts (467 bytes)

Second way: ng g c register

Creating Mock-database

npm install json-server --save-dev --save-dev is used for that it is not saved for the final packages. creating your database: create file data.json. preferable under data-folder. Our example: { "employees" : [ { "username": "Axle", "password": "1234" } ] }

Add in package.json: "server":"json-server --watch ./src/app/data/db.json"

Running Mock-database

npm run server in terminal. Can also be done in the configurations of the project. Don't forget it's with Ultimate.

Getting data

http://localhost:3000/employees

Bootstrap

adding css-code, npm install bootstrap npm install jquery

a new "node_modules" directory is added.

Open angular.json add to styles-array: "node_modules/bootstrap/dist/css/bootstrap.css"

underneath with scripts array in correct order: node_modules/jquery/dist/jquery.min.js node_modules/bootstrap/dist/js/bootstrap.js

Build the application with ng build. You will receive the following error: Warning: bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 36.05 kB with a total of 536.05 kB. Tweaking possible in the angular.json file.

Reactive form

import it import reactive forms. import in the app.module.ts

Example: import { ReactiveFormsModule } from "@angular/forms";

Tell application that you Reactive form add in app.module.ts the import ReactiveFormsModule

In the specific module import by the following "import { FormControl, FormGroup, Validators } from "@angular/forms";"

creat