How to create your first angular app
learn to build your first angular app in 5 minutes
Angular 4 is a front-end web-application framework by Google It's the next version to Angular 2 but it's completely different from Angular-1 also called as AngularJS that's
the reason JS has been dropped. Angular 4 is the future and if you're planning to develop your next web project using Angular technology , Angular 4 is the way to go. In this tutorial , we're going to learn how to create your first Angular
4 app. So without wasting any time , let's dive straight into the Angular pool.
If you want to follow this tutorial , please make sure you have the following installed on your system ::
- Nodejs --latest version , at least 6.9.x
- NPM --latest version , at least 3.x.x
- IDE , we're using Visual Studio Code
Install Angular Cli
@angular/cli serves as a great tool when working with Angular 4 apps , it helps with creating new apps , components , services and other useful operations. In order to install @angular/cli , execute the
following command in your terminal.
npm install -g @angular/cli
Once @angular/cli installed , it exposes a command line tool
ng which can be used to perform different operations as we're about to see.
Create an Angular app
In order to create a new angular app project , spin up a terminal and change your directory to a location where you would like to create your project and then execute the following command.
Oh well great , you've done it! your first angular app is ready. Just change your directory to my-first-app to see how it looks , your project should match the one shown in the following screenshot.
What exactly did the ng new command did ?
ng new created a new angular 4 bare bones app for you placing the right files at right place so you can invest all of your energy in the real work , i.e. your app functionality.
Serve your app
In order to serve your app , run the following command in your terminal.
Upon execution , ng serve compiles [ comiple here means getting the app to work in browser ] the app and starts the server on your local machine at port 4200
See your app in Action
Just go to your browser and point it to the url http://localhost:4200 and that's it , you have your angular 4 app running.
In this tutorial , we learned how to create our first Angular 4 app , serve it on our local machine and in doing so we utilized the tool called @angular/cli.
Hope you enjoyed creating your first Angular 4 app in just few minutes.
In case you got into any errors during the process , please feel free to comment or tweet to us @rishabhio.