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

Practical KB from Angular in 2 hours Course:

Angular CLIS commands

Create new project: --style=scss

ng new AngularNews --routing --skip-install --dry-run

after created go to the directory for the new app

cd AngularNews

open folder in visual studio Code

code .

npm install //in folder installs the missing libraries

main.ts in src folder is the module that starts the first component

ng serve //to start web server

Environments/Environments.ts file for configurations, testing, production etc

Add material to our project

ng add @angular/material

https://material.angular.io/components/button/overview

See guides for using in app.module.ts

Bootstrap

npm install --save bootstrap

added the css to angular.json butr didn’t work best to use sheet directly

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/
bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="an
onymous">

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrit
y="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" cross
origin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.m
in.js" integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="an
onymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="an
onymous"></script>

Create components --dry-run

Ng generate component home --module=app --spec=false

Ng build
ng build --prod
deploy to firebase

https://console.firebase.google.com/project/inventoryeventos/hosting?hl=es-419
npm install -g firebase-tools