Let’s get started with Angular 2. Have fun.
Before diving into the coding part, there are a few things to be taken care for setting up the application.
- Nodejs (>= 4.x.x)
- Npm (>= 3.x.x This comes along with nodejs – so nothing extra)
You can check their versions by doing node -v and npm -v for nodejs and npm respectively in the terminal.
In this tutorial, we ‘ll create Angular2 applications using angular-cli unlike the outdated SystemJs procedure.
angular-cli is recommended by Google’s team for Angular2 application as it compiles easier and has better features.
Technologies we ‘ll use:
- Webpack (For bundling, compiling and executing)
Let the coding begin!
Firstly, navigate yourself to a folder for this application.
Use terminal as it becomes handy and easier.
Let’s first go ahead and install ‘cli’.
npm install @angular/cli -g
This installs angular-cli globally and this can be accessed across your system. To check if it has got installed correctly, just type
ng in the terminal.
Let’s create a new project for you to work on.
ng new hello-world
This creates a new folder named hello-world and it also takes a little more time as the necessary dependency gets installed.
Go into that folder by doing,
Now, this ng serve command compiles, launches and watches your files for changes.
It rebuilds every time you make some changes in the files.
Navigate to browser and hit http://localhost:4200 to see the basic app in action.
It took us just a few minutes to see our first application up and running.
Pretty awesome!, ain’t it?
Let’s get our hands dirty by changing things according to our needs.
See you in the next lesson.