Differences

This shows you the differences between two versions of the page.

--- angular_docs_getting_started [2023/10/04 10:17] – [Angular applications: The essentials] kalaschnikow
+++ angular_docs_getting_started [2023/10/04 11:12] (current) – kalaschnikow
@@ Line 1: / Line 1: @@
+====== Angular Docs Getting Started ======
+===== What is Angular? =====
+https://angular.io/guide/what-is-angular#what-is-angular
+Angular is a development platform based on TypeScript. It includes:
+  * component-based framework
+  * libraries, which covers a variety of features like routing, forms management etc.
+  * developer tools
+==== Angular applications: The essentials ====
+=== Components ===
+A Component includes a TypeScript class with:
+  * @Component() decorator
+  * HTML-template
+  * styles
+=== Templates ===
+The HTML template declares how the component should be rendered. It can be done inline or by file path.
+Inline:
+<code>
+@Component ({
+  selector: 'hello-world',
+  template: `<p>{{message}}</p>`
+})
+</code>
+By file path:
+<code>
+@Component ({
+  selector: 'hello-world',
+  templateUrl: './hello-world-interpolation.component.html'
+})
+</code>
+  * Double curly braces ( ''{{}}'' )
+    * indicate that the value should be interpolated
+  * Property binding ( ''[]'' )
+    * sets values for properties and attribute of HTML elements
+The following examples illustrates how the HTML attribute ''style.color'' can be bound to the TypeScript variable ''fontColor'' from the component class.
+<code>
+<p
+  [id]="sayHelloId"
+  [style.color]="fontColor">
+  You can set my color in the component!
+</p>
+</code>
+**Event listeners** can be declared with the help of parentheses:
+<code>
+<button
+  type="button"
+  [disabled]="!canClick"
+  (click)="sayMessage()">
+  Trigger alert message
+</button>
+</code>
+The event listener calls the method ''sayMessage()'' which is defined in the component class.
+**Directives** can be used to add features to the templates. For example:
+  * *ngIf
+  * *ngFor
+It is also possible to declare own custom directives.
+=== Dependency Injection ===
+  * in the class which should be injected
+    * ''@Injectable'' declaration
+  * in the class which uses the injected functionality
+    * import
+      * e.g. ''import { Logger } from '../logger.service';''
+    * variable which uses the injected class
+      * e.g.
+        * declaration:
+          * ''constructor(private logger: Logger) { }''
+        * and then using:
+          * ''this.logger.writeCount(this.count)''
+==== Angular CLI ====
+  * ''ng build'' -> Compiles an Angular application into an output directory.
+  * ''ng serve'' -> Builds and serves your application, rebuilding on file changes.
+  * ''ng generate'' -> Generates or modifies files based on a schematic.
+  * ''ng test'' -> Runs unit tests on a given project.
+  * ''ng e2e'' -> Builds and serves an Angular application, then runs end-to-end tests.
+==== First-party libraries ====
+  * Angular Router -> Advanced client-side navigation and routing based on Angular components. Supports lazy-loading, nested routes, custom path matching, and more.
+  * Angular Forms -> Uniform system for form participation and validation.
+  * Angular HttpClient -> Robust HTTP client that can power more advanced client-server communication.
+  * Angular Animations -> Rich system for driving animations based on application state.
+  * Angular PWA -> Tools for building Progressive Web Applications (PWA) including a service worker and Web application manifest.
+  * Angular Schematics -> Automated scaffolding, refactoring, and update tools that simplify development at large scale.
+===== Try it =====
+  * Getting started
+    * ...
+  * Adding navigation
+    * ...
+  * Managing data
+    * ...
+  * Using forms for user input
+    * ...
+  * Deploying an application
+    * ...
+===== Setup =====
+...