[{ALLOW view All}]
[{ALLOW edit Markus}]
(07.10.2018)\\
Based on book ["Angular - das umfassende Handbuch"|https://www.rheinwerk-verlag.de/3988] by Andreas Höller
* Download examples [https://www.rheinwerk-verlag.de/3988]
* Install Projects:
## move to folder
## cmd > npm install (based on file [packages.json|https://docs.npmjs.com/files/package.json] in current folder)

[Angular Install & Update|AngularInstall]

[Angular and Fiori]

!Links

Public: [Tutorial|https://angular.io/tutorial] | [Wiki|https://github.com/angular/angular-cli/wiki] | [Blog|https://blog.angular.io/]

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

[TypeScript] | [Apache & Solr|Website Creation]

! Node.js
[Node.js|https://nodejs.org] is a runtime environment for javascript on the server, [details|https://de.wikipedia.org/wiki/Node.js]. 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|https://code.visualstudio.com/] 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"|https://github.com/ShawnFunke/vs_code_http_server_and_html_preview/issues?utm_source=vsmp&utm_medium=ms%20web&utm_campaign=mpdetails]
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|https://docs.npmjs.com/files/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|Angular CSS]\\
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|Angular Configuration]

!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|Angular Configuration])

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|http://velocityjs.org/], [Bootstrap|http://getbootstrap.com/docs/4.1/getting-started/download/]

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]