My Angular App

Download nodejs from nodejs.org

Unpack nodejs

Install nodejs (and NPM to go with it automatically) locally.

$ ln -s node-v14.9.0-darwin-x64 nodejs

Add "export PATH=/Users/mrbear/nodejs/bin:$PATH" to .bashrc

Install Angular CLI¹.

$ npm install -g @angular/cli

[angular@vps386 ~]$ ng --version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.8
Node: 14.9.0
OS: darwin x64

Angular:
...
Ivy Workspace:

Package Version
------------------------------------------------------
@angular-devkit/architect 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.5

Update angular CLI

npm search @angular/cli

Initial project creation

[angular@vps386 ~]% ng new myproject
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE myproject/README.md (1027 bytes)
CREATE myproject/.editorconfig (274 bytes)
CREATE myproject/.gitignore (631 bytes)
CREATE myproject/angular.json (3590 bytes)
CREATE myproject/package.json (1261 bytes)
CREATE myproject/tsconfig.base.json (458 bytes)
CREATE myproject/tsconfig.json (426 bytes)
CREATE myproject/tslint.json (3184 bytes)
CREATE myproject/.browserslistrc (853 bytes)
CREATE myproject/karma.conf.js (1021 bytes)
CREATE myproject/tsconfig.app.json (292 bytes)
CREATE myproject/tsconfig.spec.json (338 bytes)
CREATE myproject/src/favicon.ico (948 bytes)
CREATE myproject/src/index.html (295 bytes)
CREATE myproject/src/main.ts (372 bytes)
CREATE myproject/src/polyfills.ts (2835 bytes)
CREATE myproject/src/styles.css (80 bytes)
CREATE myproject/src/test.ts (753 bytes)
CREATE myproject/src/assets/.gitkeep (0 bytes)
CREATE myproject/src/environments/environment.prod.ts (51 bytes)
CREATE myproject/src/environments/environment.ts (662 bytes)
CREATE myproject/src/app/app-routing.module.ts (245 bytes)
CREATE myproject/src/app/app.module.ts (393 bytes)
CREATE myproject/src/app/app.component.css (0 bytes)
CREATE myproject/src/app/app.component.html (25757 bytes)
CREATE myproject/src/app/app.component.spec.ts (1068 bytes)
CREATE myproject/src/app/app.component.ts (213 bytes)
CREATE myproject/e2e/protractor.conf.js (869 bytes)
CREATE myproject/e2e/tsconfig.json (299 bytes)
CREATE myproject/e2e/src/app.e2e-spec.ts (642 bytes)
CREATE myproject/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
Successfully initialized git.

[angular@vps386 ~]$ % ng serve
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.66 MB [initial] [rendered]
Date: 2020-09-02T12:23:53.701Z - Hash: c7223a73cc964c3ed1e6 - Time: 5305ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Creating our first component

[angular@vps386 ~]$ ng generate component player-settings
installing component
create src/app/player-settings/player-settings.component.css
create src/app/player-settings/player-settings.component.html
create src/app/player-settings/player-settings.component.spec.ts
create src/app/player-settings/player-settings.component.ts
update src/app/app.module.ts

Components, Directives, Pipes and Services

For an indepth explanation see reference [4].

modules

a grouping of different components and services

components

a component controls a patch of screen called a view

directives

Attribute or structural directives change the Dom. For example ngIf and ngFor. A component is basically a specialized form of directive.

pipes

filters, for example for displaying dates and currency which are built in filters.

services

independent business logic or connections to external sources wrapped in classes and injected.

Verifying Angular Version

The version of angular can be seen in the dom of your app, something like:

<app-root _nghost-jcv-c16="" ng-version="10.0.14">

Settings depending on environment (prod/test/dev)

There are different .ts files loaded depending on which environment you are building for. These are appropriately named environmnent.*.ts.

See for more information references 2 and 3.

Deploy

ng build --target=production --base-href '/myapp/'

References

[1] Github - Angular CLI

https://github.com/angular/angular-cli

[2] StackOverflow - How to config different development environment in angular 2 app

http://stackoverflow.com/questions/36004810/how-to-config-different-development-environment-in-angular-2-app

[3] Shayne Boywer: Angular CLI using the environment option

http://tattoocoder.com/angular-cli-using-the-environment-option/

[4] Angular 2 - Architecture

https://angular.io/docs/ts/latest/guide/architecture.html

Thoughtram - Understanding @Injectable in Angular

https://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html