How to setup Angular2 and easy learning

Introduction:

Angular2 is a MV* (Model-View-*) framework which enables to build rich UI applications for the mobile, TV, laptop, tablet etc.

As above you can see MV* , there is ‘C’(Controller) is missing as in Angular2, the controller and many other things which were part of angular 1 have been removed. This framework is highly optimize and very efficient to accomplish many tasks.

Let’s jump into quick start to build an app and quick setup in Angular2

1. Install node(v6.7.0) and npm (3.10.3). Angular2 requires node version 6+ and npm version 3+ to start with. To download the correct version click here.

2. Once you are done with nodejs then verify the version as below command

node -v
npm -v

1 2	node -v npm -v

3. If you are working behind a proxy then need to set the proxy for below else skip this step:

Window Command Prompt

set HTTP_PROXY=https://[username:password]@[proxyserver]:[port]
set HTTPS_PROXY=%HTTP_PROXY%

1 2	set HTTP_PROXY=https://[username:password]@[proxyserver]:[port] set HTTPS_PROXY=%HTTP_PROXY%

NPM

npm config set proxy https://[username:password]@[proxyserver]:[port]

npm config set https_proxy https://[username:password]@[proxyserver]:[port]

npm config set proxy https://[username:password]@[proxyserver]:[port]

npm config set https_proxy https://[username:password]@[proxyserver]:[port]

GIT

git config --global http.proxy https://[username:password]@[proxyserver]:[port]

git config --global https.proxy https://[username:password]@[proxyserver]:[port]

git config --global http.proxy https://[username:password]@[proxyserver]:[port]

git config --global https.proxy https://[username:password]@[proxyserver]:[port]

4. Install angular cli

npm install –g angular-cli@latest

1	npm install –g angular-cli@latest

npm install –g angular-cli

1	npm install –g angular-cli

5. Verify angular-cli installation

ng -v

ng -v

6.Create first project

ng new <projectName>

1	ng new <projectName>

7. Get into <projectName> dir

cd <projectName>

1	cd <projectName>

8. All the required dependencies are included in angular-cli.json file will created in project folder

9. There is a ‘src’ directory which has all files/dirs related to application.

app	this is used to create all + angular2 component
assets
environments	environment specific setting file as prod, dev and test
favicon.ico
index.html	First page to initiate your application with AppComponent
main.ts	To load all angular2 component
polyfills.ts	To load all library to compile the Angular2 component
styles.css
test.ts	To test the angular component
tsconfig.json	Typescript library to load
typings.d.ts	declare system to initialize

10. To start angular2 first app run below command:

ng serve

ng serve

11. The default port to run the angular2 is 4200

Open https://localhost:4200/

12. If you see above message then congrats ☺ you have successfully done with Angular2 first App setup.

13. To do small test, just open <projectName>/src/app/app.component.ts

Add below message to the title

14. Once you save the file then you will immediate see the change without refresh the page.

15. Last and most important step to build your project for production.

ng build -env=prod

1	ng build -env=prod

After running above command, there is a new dir “dist” created and inside this, there are flat html and js file to deploy in production to have complete angular2 app.