Diese Seite (Version-1) wurde zuletzt am 13-Apr.-2020 17:36 von Administrator geändert.

Du bist nicht autorisiert, diese Seite umzubenennen.

Du bist nicht autorisiert, diese Seite zu löschen.

Versionsgeschichte der Seite

Version Zuletzt geändert Größe Autor Änderungen Kommentar

Links

Eingehende Links Ausgehende Links
Angular
Angular

Versionsunterschiede

Unterschiede zwischen Version und .

Zeile 1: 249 Zeilen hinzugefügt.
[{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]
Diese Seite (Version-1) wurde zuletzt am 13-Apr.-2020 17:36 von Administrator geändert.Top