Angular 4 Tutorial
learn to build web apps using Angular 4
What is Angular 4
Angular 4 is an open source web development framework written and maintained by angular team at Google .
In order to embrace angular's capabilities better, let's look at some of the important points about angular.
In order to embrace angular's capabilities better, let's look at some of the important points about angular.
- Angular 4 or simply Angular is the next logical version of Angular2 but it has nothing in common with Angular 1 also called AngularJS
- Angular is written in TypeScript and so it comes with all the capabilities that typescript offers
- Angular is also utilized in the cross platform mobile development framework called IONIC and so it's not limited to web apps only
- To keep upgrading Angular , angular community has announced angular releases every 6 months
About Angular 4 Tutorial
In this Angular 4 tutorial , we'll learn Angular 4 in the following ways ::
- by understanding fundamental building blocks of angular including modules , components , services , routing , pipes etc.
- by going through well commented code examples
- and finally we'll also be creating a web application from scrach in Angular
Prerequisites
In order to follow this angular tutorial , you need to setup your local environment which needs the following installed on your machine.
node.js >= 6.9.x
npm >= 3.x.x
ide , you can choose from Sublime Text , Visual Studio Code or Atom
To check the version of node or npm , you can use the following commands in your terminal.
node -v
npm -v
Installing @angular/cli
@angular/cli is an npm package and it's an amazing tool which helps with different repetitive operations when creating and working with Angular apps. You can install @angular/cli by typing the following command in your terminal.
npm install @angular/cli -g
Once @angular/cli is installed , we've setup the environment we need to start creating our Angular app , so now we're all set to create our angular app. In this tutorial , we'll be creating an angular app with the following plot.
What shall we create ?
We're going to create a basic angular app called InventionsHub which simply lists different inventions along with some useful information about those inventions. We'll utilize many angular concepts like
modules , components , services , routing , pipes etc while creating our project. So let's get started.
Create your Angular App
In order to create your app , first switch to the directory where you would like to start your angular project by using cd command
cd ~/angular/projects
now use the @angular/cli tool's ng new to create a new angular app as follows
ng new InventionsHub
Great! , you just created your app. What ng new command did is that it created a bare bones angular app for you creating and placing initial files and folders at right place. Before we dive deeper
into the code structure , first lets see how our creation looks like.
Serve your app
To serve your app , use another command ng serve offered by @angular/cli ,
this command lifts your app on your local machine at
http://localhost:4200
now go to your browser at the above address and you should see your app in action. following is a screenshot of how it looks like.
ng serve
now go to your browser at the above address and you should see your app in action. following is a screenshot of how it looks like.
Summary
In this first part of the angular tutorial , we learned many interesting things about the angular framework like ::
- What is Angular 4
- How to get started with Angular 4
- What is @angular/cli
More from RISHABH.IO
Learn Node.js Essentials
Start Now >>
Start Now >>
Learn GIT and GITHUB
Start Now >>
Start Now >>
Learn Raspberry Pi
Start Now >>
Start Now >>
Learn Internet of Things
Start Now >>
Start Now >>