(07.10.2018)
Based on book "Angular - das umfassende Handbuch" by Andreas Höller

• Download examples https://www.rheinwerk-verlag.de/3988
• Install Projects:
  1. move to folder
  2. cmd > npm install (based on file packages.json in current folder)

Angular Install & Update

Angular and Fiori

Links#

Public: Tutorial | Wiki | Blog

This Wiki: Angular Binding | Angular Routing | Angular CSS | Angular Best Practices | Angular Project Steps

TypeScript | Apache & Solr

Node.js#

Node.js is a runtime environment for javascript on the server, details. It uses the Node Package Manager (npm).

Visual Studio#

It is a free integrated development environment (IDE) with syntax highlighting, folder based projects and built-in command line view.

• Download and install
• add TSLint: Extensions > search "tslint" > TSLint 1.0.28 > Install
• check Menu > File > Preferences > Keyboard Shortcuts
  • Ctrl+Shift+P > command window
  • Shift+Alt+F > pretty print / beautify

Webserver "lite-server"#

> npm lite-server (config via "packages.json" > "scripts")
> concurrently "tsc -p "TypeScriptFiles" -w" "lite-server"

VSC Plugin "HTTP Server / HTML Review"#

Settings at Extensions > right-click at "HTTP Server" > Extension Settings >

shs.serverPort	8080
shs.serverHost	127.0.0.1
shs.mainFile	index.html

Start with F1 >

shs.createServer	        Simple HTTP Server: Create HTTP Server		
shs.createServerWithSingleFile	Simple HTTP Server: Create HTTP Server With Current File

http://127.0.0.1:8080

Angular CLI (ng)#

The angular command line interpreter (CLI) is installed with npm and can be used then via command "ng".

npm install -g @angular/cli
ng --version
ng help

Option -g installs the global CLI version. This is necessary to initially use "ng new". When you have created a project you use the local CLI version, which is then independent from the global one.
To update global local one use

npm i npm to update  

To install / update the local one use

npm install @angular/cli
npm install --save-dev @angular/cli@latest
ng update <= THIS IS TO ANALYZE
ng update @angular/core
ng update --all

This will add entry "@angular/cli": "^6.2.4" at devDependencies in your package.json.
To update the global CLI version use

npm install -g @angular/cli@latest 
npm update -g --all

Align file package-lock.json

Versions of @angular/compiler-cli and typescript could not be determined.
The most common reason for this is a broken npm install.

Please make sure your package.json contains both @angular/compiler-cli and typescript in
devDependencies, then delete node_modules and package-lock.json (if you have one) and
run npm install again.

Built and serve http://localhost:4200#

ng serve (in memory without files)
ng build --watch (with files)	

Parameter possible: --proxy-config proxy.conf.json (CORS)

Create project#

ng new Test002
ng new Test003 --prefix=me --routing=true

Note: you need to choose a CSS stylesheet format
ng uses package loader "webpack", which does not need "moduleId" for relative pathes
webpack configuration is in file "angular-cli.json"

Packages used are specified with package.json

Project update#

npm uninstall -g @angular/cli
npm cache clean		
npm install -g @angular/cli@latest
cd projectFolder
rm -rf node_modules dist tmp
npm install --save-dev @angular/cli@latest
npm install
ng init > overwrite/skip/diff ?
> npm start = start project via npm and file "package.json" (uses devDependencies modules, not global ones)\\
  (add parameter in "scripts" via "--": "npm start -- --port 8080")\\

Generate

ng generate module app-routing --flat --module=app
ng generate component hello-cli (short: ng g c hello-cli) = add component later\\
ng g directive|pipe|service|module|class|interface|enum\\
ng lint (linter TSLint) = static code validation based on file "tslint.json"\\

automated tests:

• component tests with karma.conf.js
• integration test with protractor.conf.js (e2e=end to end)
• > ng test (uses karma in watch mode) --watch=false
• test cases in ...specs.ts
• > npm test
• > ng e2e or npm run e2e (uses protractor, needs a running application)
• test cases in ...po.ts

Install additional javascript libs or css (see also package.json)#

Libraries

npm install --save lodash
npm install --save-dev @types/lodash  (scoped package for lodash to add types)
npm install --save bootstrap
npm install --save jquery 
npm install --save @types/jquery
npm install --save velocity-animate
npm install --save rxjs
npm install --save rxjs-compat
npm install --save fancybox

See velocity.js, Bootstrap

They are added in angular.json (not in index.html) automatically, you can add custom ones, too:

 "styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.css"
     ],
 "scripts": [
     "node_modules/jquery/dist/jquery.js",
     "node_modules/bootstrap/dist/js/bootstrap.min.js",
     "node_modules/velocity-animate/velocity.min.js",
     "src/assets/js/ebel-animate.js"
     ]

component:

import * as $ from 'jquery';
import * as velocity from 'velocity-animate';

    const myElement = $('.header');
    
    velocity(myElement, {
      left: param_diff_left,
      top: param_diff_top,
      width: param_diff_with
    }, { duration: 900 });
    

ng build (creates dev deployment in folder "dist", uses global modules; to use local ones create script in npm) 
ng build --prod (compare angular-cli.json > "environments")
ng build --target=production --environment=prod
ng serve --prod
ng build --prod -aot

Angular (@ng)#

• "@NGModule" = configure angular module and group components and services
• "declaration" = specify global components
• module loader = manages modules and load them on demand = SystemJS via file systemjs.config.js
• module types = ES2015, AMD, CommonJS
• ts file will be compiled to js files on start or in advance via AOT
• NgFor = iterate (=class name, selector in HTML as camel case = ngFor!), prefix star (*) to create new DOM elements

"import" = something from modules
"@Component" = typescript decorator to configure and register component @angular

• decorator = add metadata to classes
• "moduleId: module.id" = enables @ng to retrive the relative path
• selector: ...
  • 'app-root' = html tag for component (<app-root></app-root>)
  • '[meRoot]' = attribute for component (<div meRoot>...)
  • '.meRoot' = class attribute for component (<div class="meRoot">...)
  • 'div:not(.goodbye)'
  • 'div.hello,span.hello'
• "templateUrl: <file>" = html template

backtick(`) = span string over multiple lines and add instance variables via name called interpolation
in opposite to property-binding
"export" = enables other modules to import the class

file index.html#

• shim and Reflect = for older browsers
• zone = from Goole to detect modell changes
• SystemJS = @ng module loader

  <!-- Polyfill(s) für ältere Browser -->
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="systemjs.config.js"></script>
  
  <script>
    System.import('app').catch(function(err){ console.error(err); });
  </script>

file systemjs.config.js specifies for SystemJS via "map" where to find modules (for "import") and packages and main file

Dynamic Content#

ng build --prod --aot=false --build-optimizer=false

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
https://stackoverflow.com/questions/48028676/compile-dynamic-html-in-angular-4-5-something-similar-to-compile-in-angular-js
https://angular.io/guide/dynamic-component-loader
https://juristr.com/blog/2017/07/ng2-dynamic-tab-component/
https://wesleygrimes.com/angular/2019/02/05/building-an-aot-friendly-dynamic-content-outlet.html
https://blog.bitsrc.io/how-to-build-dynamic-components-in-angular-6-41f50abddc64