Angular

One framework. Mobile & desktop.

→ angular.io, API

History

Angular has replaced AngularJS (aka Angular v1).

Releases

Version	Date	More
13.0		blog.ninja-squad.com
12.0		blog.ninja-squad.com
10.0	2020-06-25	blog.angular.io, blog.ninja-squad.com

Learn

Training

• Ninja Squad

Resources

• Become a ninja with Angular - Pro Pack

Books

• Become a ninja with Angular - Ebook

Tutorials

• github.com/devpro/dojo-angular-beginner

• web.dev

Libraries

• NgRx: ngrx.io, Documentation

Tools

• Visual Studio Code

  • Using Angular in Visual Studio Code

Quick start

• Use Angular CLI

# create the application
ng new

# launch locally (open http://localhost:4200)
ng serve --open

# add material theme
ng add @angular/material

# create the first module
ng generate module layout

# create the home page component
ng generate component layout/home

→ angular.io/guide/quickstart

Recipes

Authentication

• oktadeveloper/okta-angular-mongodb-hangman-example

CI CD

Sonar

• Create a sonar-project.properties file at the root folder of the application

sonar.host.url=https://sonarcloud.io
sonar.login=<token>
sonar.organization=<company>
sonar.projectKey=<projetKey>
sonar.projectName=<projectName>
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.sources=src
sonar.exclusions=**/node_modules/**,**/*.spec.ts,**/coverage/**,**/bin/**,**/obj/**
#sonar.tests=test
sonar.test.inclusions=**/*.spec.ts
sonar.typescript.lcov.reportPaths=src/WebApp/ClientApp/coverage/lcov.info
#sonar.dotnet.visualstudio.solution.file=Solution.Name.sln

• Edit package.json file

{{< highlight json >}} "scripts": { "sonar": "node_modules/sonar-scanner/bin/sonar-scanner.bat" }, "dependencies": { "sonar-scanner": "^3.1.0", "tslint-sonarts": "^1.8.0", } {{< /highlight >}}

Update

• Follow the procedure given at update.angular.io

Web design

Material design

• Material Design components for Angular

DataTables

• Option 1: Angular Datatable

  • Getting started

• Historique de la recherche :

  • Angular 5 and jQuery DataTables !

  • 10 Best Angular DataTables

materialize-css

• Home site: materializecss.com

• Integration in an Angular project:

  • Clean and ok: How to use materialize-css with angular

  • Didn't work: How to use MaterializeCSS in Angular 2

  • Didn't also work: stanleyeosakul/angular-travelville

  • Didn't try: sherweb/ngx-materialize