scaffolding course

This commit is contained in:
francesco 2021-09-28 21:03:24 +02:00
parent 7c1c0130a0
commit 85e5b9c93f
23 changed files with 71 additions and 0 deletions

52
docs/angularcommands.md Normal file
View File

@ -0,0 +1,52 @@
# Angular CLI
## requirements
Install nodejs, npm, angular-cli and @angular-devkit/build-angular
```bash
sudo apt install nodejs npm
sudo npm install -g @angular/cli
sudo npm install --save-dev @angular-devkit/build-angular
```
Create first project
```bash
ng new my-first-app --no-strict
```
Select `N` for no routing and normal `CSS`.
Navigate to the project and spinn up the dev server
```bash
cd my-fisrt-app
gn serve
```
## NgTemplate
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.0.
### Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
### 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. Use the `--prod` flag for a production build.
### Running unit tests
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
### Running end-to-end tests
Run `ng e2e` to execute the end-to-end tests via a platform of your choice.
### Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

0
docs/angularuniversal.md Normal file
View File

0
docs/animations.md Normal file
View File

0
docs/authentication.md Normal file
View File

0
docs/component.md Normal file
View File

0
docs/databinding.md Normal file
View File

0
docs/deployment.md Normal file
View File

View File

0
docs/directives.md Normal file
View File

View File

0
docs/forms.md Normal file
View File

0
docs/http.md Normal file
View File

0
docs/ngmodules.md Normal file
View File

0
docs/ngrx.md Normal file
View File

0
docs/observables.md Normal file
View File

0
docs/optimization.md Normal file
View File

0
docs/pipes.md Normal file
View File

0
docs/routing.md Normal file
View File

0
docs/services.md Normal file
View File

0
docs/testing.md Normal file
View File

19
docs/thebasic.md Normal file
View File

@ -0,0 +1,19 @@
## The Basic
Angular serves the **index.html** in the `src` directory and loads the components from the `src/app` directory.
The scafolding creates a root-component which is loaded into the index.html on the `<app-root></app-root>`-Tag.
In the `@Component` we find a `selector` with the value of `<app-root></app-root>`. With this selector, Angular is able to replace in the index.thml on the `<app-root></app-root>`-Tag with the content in the app.component.html.
When the app is builded, the angular cli will inject at the bottom a bundle of *.js files which is needet to run the app.
`main.ts` is the file which will be executet at the beginning.
<img src="../img/ngmodule.png" alt="ngmodule" width="800"/><br>
<img src="../img/component.png" alt="component" width="800"/>
Angular's main ideas is to build components to build an app. Each Component has it's own template (html), maybe it's own style (CSS) and more important it's own business logic.
Components can be reused in multiple parts or the application.

BIN
img/component.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 845 KiB

BIN
img/ngmodule.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 678 KiB