Friday, 3 February, 2017 UTC
Summary
Angular2 in comparison to Angular (AngularJS) is primarily performance improvements thanks to the redesign of the architecture. UI rendering and application Api are separated into two levels. Thanks to this architecture, layers can be allocated to different CPU and executed parallely (http://mng.bz/K403)
Angular2 make it easy to define and add features without a lot of manually written boilerplate. Fully integrated TypeScript language gives you the benefits of a statically typed language within JavaScript ecosystem.
Assumptions and Benefits our project:
- High performance thanks to the redesign architecture Angular2 (UI rendering and application Api separated into two levels)
- Design and build modular applications based on components
- Compatibility for all browsers thanks to SystemJs and compilation process on fly
- Transpile Typescript into latest Javascript (ES7, ES6, ES5 or lower version)
- Use modern JavaScript tools like npm, Babel, Webpack and another not mentioned in this article
How consolidate Angular2 with Total.js and preserve their directory structures and minimizing integration work to a minimum. Below we present a simple skeleton on the basis of which you can create powerful applications.
Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/totaljs-angular2
Structure of directories is following:
The most important:
In case of catalogs structure:
- /client – Angular2, TypeScript directory
- Remaining directories – Total.js
In case of configuration Total.js:
- You have to define Angular2 directory in config file.
- You have to block total.js process of compiling script – for this process will be responsible Angular2 and SystemJS
- If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/
- Please remember about placing @{layout(”)} in index.html
The last operation it is installation process all necessary modules:
- Install the total.js in project directory or globally with option -g
npm install -g total.js bower typescript - Install the dependencies in /client
npm install - Install bower dependencies in /client (boostrap and jquery lib)
bower install - compile .ts files in Angular. Open another command line and go to the /client folder and run
npm run tsc -w - Start the server from the root directory of project
node server - Visit http://localhost:8000
- That’s all – Now You can create Amazing and Professional SPA applications