(07.10.2018)
Based on book "Angular - das umfassende Handbuch" 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 in current folder)
Links#
Public: Tutorial | Wiki | Blog
This Wiki: Angular Binding | Angular Routing | Angular CSS | Angular Best Practices | Angular Project Steps
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.htmlStart with F1 >
shs.createServer Simple HTTP Server: Create HTTP Server shs.createServerWithSingleFile Simple HTTP Server: Create HTTP Server With Current Filehttp://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 helpOption -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 updateTo 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 --allThis 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=trueNote: 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 fancyboxSee 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
"@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=falsehttps://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