Angular resumen

What's new in Angular 8?

• Typescript 3.4 or above support.

• Ivy Renderer Engine Support.
• Angular 8 is written in TypeScript. It implements core and optional functionality as a set of
TypeScript libraries that you can import into your apps.

Ng module AppModule (reusable modules like routing, Httpclient Mongodb ie), bootstraps components

Components (templateUrl:)→ have their HTML template (Template uses directives, like ngif ngrepeat,
like inline ASP ), a component can have JavaScript functions for the HTML Template

Directives:
•Component Directives ng-init, Structural Directives ngif, switch, for , Attribute Directives for
styling ngClass, ngStyle
Animations are defined in the metadata for the @Component {animations:}
service worker is a script that runs in the web browser and manages caching for an application.
Web workers allow you to run CPU-intensive computations in a background thread,
tsconfig.json Default TypeScript configuration for projects in the workspace

Backend Services, get HTTP backend data with module HTTPClient.get() or post() (like html pages) to
feed the Components. MongoDB is an alternative,
String interpolation {{ model.data }}
Event binding: for click and others, like focus
Property and Data Binding: one way or 2 way [(ngModel)] = "[property of your component]"  
Routing: allows navigation between paths, redirects to another HTML template for example

Angular 8 forms: Reactive forms (complex robust datavalidation, ajax updating etc)Template-driven
forms (simpler), validations are usually setup with a validation function
dependency injection: a core concept of Angular 2+ design pattern and allows a class receive
dependencies from another class. Most of the time in Angular, dependency injection is done by
injecting a service class into a component or module class. It can also improve Memory Usage by
registering a Service/component on the RootModule for it to be available to all components, as well as
build time checking of dependencies

My approach: define the Backend services with SwaggerHub, create MVC class stubs for the Angular
FrontEnd, then create One Component for each Backend Page/REST Service that call the HTTPClient
to communicate with the Backend data

Angular Previous Versions

•AngularJS (also known as Angular 1.0): AngularJS is a JavaScript based open-source
frontend web framework developed and maintained by Google. AngularJS can be added to an
HTML page with a <script> tag. Because AngularJS was the first version of the Angular, so it
is also known as Angular 1. AngularJS was first released on October 20, 2010 by a team of
Google.

•Angular 2: Angular 2 was a complete rewrite of AngularJS. It was first released in May 2016
and the final version was released on September 14, 2016.

•Angular 4: Angular 4 was the updated version of Angular 2. The Google team skipped the
Angular 3 to avoid the confusion due to the misalignment of the router package's version
which was already distributed as v3.3.0.

•Angular 5: Angular 5 was the improved version of the previous one. It was released on
November 1, 2017 and improved the support for progressive web apps.

•Angular 6: Angular 6 Angular 6 was released on May 4, 2018. It was a major released
focused on ng update, ng add, Angular Elements, Angular Material + CDK Components,
Angular Material Starter Components, CLI Workspaces, Library Support, Tree Shakable
Providers, Animations Performance Improvements, and RxJS v6.

•Angular 7: Angular 7 was released on October 18, 2018. It was focused on Application
Performance, Angular Material & CDK, Virtual Scrolling, Improved Accessibility etc.
 •Angular 8: Angular 8 is the latest version running nowadays. Angular 8 is released on May
28, 2019. It is mainly focused on Differential loading, Dynamic imports for lazy routes, web
workers and Angular Ivy as an opt-in support. It also supports TypeScript 3.4.

Ng-component
import { Component } from '@angular/core';

npm NodePackageManager
ng packages like:
ng new myapp
ng serve
ng generate component

ng model imports one or more components

ng-app attribute
<div ng-app>
<p>My first expression: {{ 5 + 5 }}</p>
</div>

ng-init applies initial values for the app

ng-model for the data model, input, select, textarea

ng-bind to bind data 2 way or {{ student.LastName }} curly braces

ngif ng-repeat

[style]=”condition : true : false”

One way data binding

(click) {{variablename For Databinding}}
using ifs, bookmarks
<ng-template [ngIf]="clickCounter > 4" [ngIfElse]="none">
<p>The click counter <strong>IS GREATER</strong> than 4.</p>
</ng-template>

<ng-template #none>
<p>The click counter is <strong>not greater</strong> than 4.</p>
</ng-template>
I use Visual Studio that creates everything for you,

<a routerlink="/"> routerlink is like HREF link

<router-outlet> where routed components are displayed in a template
Style
https://medium.com/razroo/dependency-injection-in-angular-c265043883f8

import { PostsFacade } from '@razroo/razroo/data-access/posts';

@Component({
selector: 'razroo-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.scss']
})
export class BlogComponent implements OnInit {
posts: any[];
allPosts$: Observable<Post[]> = new PostsFacade().allPosts$;

constructor() {}

ngOnInit() {}

Observable, to subscribe to users event like keypress, or error event handling

https://www.javatpoint.com/angular-8-ngif-directive
https://www.tutorialandexample.com/angular-8-tutorial