How to start your Angular 4 project ?

What is Angular 4 ?

- AngularJS came on 2010 and Angular 2 came on mid 2016 with complete rewritten of framework in Typescript.
- Angular 4 is a version match not a upgrade to Angular 2.
- Angular 4 is just called Angular.

Create Angular 4 Project :

Setup :

1) node and npm should be installed. (https://nodejs.org/en/)

- If you already installed node and wants to update please check the following link. (Its for Mac)
http://www.fullstacktechnos.com/2017/09/how-to-update-nodejs-in-mac.html

$ node -v
v6.11.3

2) Install angular CLI

$ npm install -g @angular/cli
...

$ ng -v
….
@angular/cli: 1.4.4
node: 6.11.3
os: darwin x64

Use angular CLI to create a new hello-world project


$ ng new hellow-world
installing ng
  create .editorconfig
 …..
……
  create tslint.json
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'hellow-world' successfully created.


Install Visual Studio Code : (https://code.visualstudio.com/)
Open the editor and type Shift + Command + P (from Mac)

Search for 'Path', and Install

Go inside the project folder and type "code ."
It will open the project folder in VS Code editor or you can open the project folder directly from editor.


Project folder structure will look like the below.





Serve the Angular Code

hellow-world $ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Date: 2017-09-07T15:35:06.229Z                                                          
Hash: c2e3ddcf0d5dd2646b8f
Time: 8944ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.44 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 209 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.27 MB [initial] [rendered]


webpack: Compiled successfully.

visit localhost:4200 in browser







Entry Point:

main.ts -> platformBrowserDynamic().bootstrapModule(AppModule);


Minor Modification :

- Go to app.component.ts and change,

export class AppComponent {
  title = 'My first Angular app';
}


- Check the command prompt : 

web pack which is integrated build tool with angular cli compiled and created few bundle.js files and browser being refreshed automatically with the new content.

Note:
Before you start writing code for your angular project, please get a basic understanding of typescript. If you are already familiar ignore the following article.

http://www.fullstacktechnos.com/2017/09/typescript-fundamentals.html