As you can see this repo is following The Angular 2 Heroes tutorial with my ideal folder structure. I don't know if it's the best folder structure, but I like it the most. Specially because I need to change the structure when using server-side rendering with Angular 2.
This repo is divided in several branches, each branch represent a step of the Angular 2 Heroes tutorial:
- step0 - Angular docs: Configuration & "Hello World".
- step1 - Angular docs: The Hero Editor.
- step2 - Angular docs: Hero list and details.
- step3 - Angular docs: Refactoring components.
- step4 - Angular docs: Services.
- step5 - Angular docs: Routing.
- step6 - Angular docs: Server-Side Rendering (Webpack).
- step7 - Angular docs: Web Workers.
- step8 - Angular docs: Rx.Observable (Typing on input of "hero-details").
I would recommend:
- To Start with step0:
git clone https://github.com/jesussobrino/angular2-heroes.git && cd angular2-heroes && git checkout step0 - Or to follow step by step the Angular 2 tutorial.
As you can see the step6 branch is using server-side rendering. Unfortunately I didn't know how to apply server-side rendering with lite-server. So I decided to change the package dependencies for using webpack, because I think it's easier to understand.
In this example, you can take a look to the "Network tab" in the Chrome Dev Tools, and see how fast is loaded the initial template in comparison with previous steps.
For more Sever-Side Rendering information, please take a look to Angular Universal.
- Download and install Node.js.
- Install the tool dependencies (
npm install).
The application needs some dependencies, such as Bower, Angular files, etc. You can install these by running:
npm install --global typescript typings
npm install
Or directly:
npm start
- Run
npm start - Navigate your browser to http://localhost:3000/ to see the app running.