Skip to content

Home

Jump to bottom
Imad El HItti edited this page Sep 27, 2017 · 5 revisions

Angular4 - Telosys 3 Template

This template is used by Telosys to generate an Angular web app using basic RESTful API services based on any backend server template of telosys :

Requirements

You need to have Angular CLI installed. For further info, refer to the GitHub project.

The Angular CLI version used in the template is v1.1.2

Getting started

1. Install Angular CLI

npm install -g @angular/cli

2. Generate your code with the current bundle

  • Define the variables REST_URL_ROOT and REST_API_ROOT in telosys-tools.cfg ( for example : REST_URL_ROOT=http://localhost:3000, REST_API_ROOT=/api/v1)
  • Download the bundle containing the templates
  • Generate the code with Telosys

3. Install node modules used by the generated code (dependencies)

The required modules have been generated by Telosys, they are defined in the file package_gen.json thats is intended to be renamed to package.json

  • In your project's home, rename the file package_gen.json to package.json :

For windows :

rename package_gen.json package.json

For Mac/Linux :

mv package_gen.json package.json

  • Install the dependencies with NPM : npm install

  • The installed modules are now available in the folder node_modules

4. Configure angular-cli and typescript

The last step to be able to run your project is to rename 2 more generated files :

For windows :

rename .angular-cli_gen.json .angular-cli.json rename tsconfig_gen.json tsconfig.json

For Mac/Linux :

mv .angular-cli_gen.json .angular-cli.json mv tsconfig_gen.json tsconfig.json

  • The .angular-cli.json file is used to by Angular CLI to load its configuration.
  • The tsconfig.json file specifies the root files and the compiler options required to compile the project, it indicates that the directory is the root of a TypeScript project.

5. Run the generated application

Everything is now ready to run the application.

  • Start the application by running ng serve

The application will fetch the data from the API 'root URI' you defined earlier in the variables of the tempalte configuration (Section 2).

##List of the dependencies install with npm install

Dependencies Version
Angular CLI
The Angular CLI makes it easy to create an application that already works, right out of the box
Material 2
Official Material Design components built for and with Angular.
Material Design Lite
Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible
Angular2-Notifications
A light and easy to use notifications library for Angular 2. It features both regular page notifications (toasts) and push notifications.
Underscorejs
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.
Clone this wiki locally