Knocks/FrontEnd

Knoks

Technologies

• Angular 5
• Webpack 2
• TypeScript 2.x.x
• TSLint - rules descriptions
• Material Design
• Angular Flex-Layout
• SCSS for styles
• Angular2 material

Help video cast online example.

Installation

• Pre requirements: installed NodeJS 8.x.x with NPM
• On local repository the NPM command: npm run setup
• Install editorconfig for your editor.

Development Points

NPM task runners:

1. npm run start - Start dev server

2. npm run test - run tests

3. npm run build - default build production version. Result folder: dist/{brand name} Default values: BRAND_NAME="LDI" API_URL="http://localhost:52281/v1" API_IDENTIFIER="138659EBEBBF408AA1282D46EBDFBDC7"

   1. to pass BRAND_NAME parameter in build command use next: npm run build -- --env.brand_name=BRAND_NAME
   2. to pass API_URL parameter in build command use next: npm run build -- --env.api_url=URL
   3. to pass API_IDENTIFIER parameter in build command use next: npm run build -- --env.api_id=IDENTIFIER
   4. for example npm run build -- --env.brand_name=BRAND_NAME --env.api_url=URL --env.api_id=IDENTIFIER

---

Application entry points:

Entry point for application: src/app/app.module.ts

All declared components, global providers, global imports

---

Routing:

Setup: src/app/app.routing.ts

---

Components

Root components: app.component

Other components placed to src/app/components folder

---

Component Structure

1. component class
   1. Naming: {componentn name}.component.ts
   2. should export class with decorator @Component
2. component template
   1. Naming: {componentn name}.component.html
3. component styles (optional)
   1. Naming: {componentn name}.component.scss

---

Shared

In app/shared folder common parts for component, like models, services, resolvers, etc...

---

License

Copyright © Knoks. All Rights Reserved.