Home
Tools
Workshops
Technologies
Pricing
Contact Us



How to create your first angular app

learn to build your first angular app in 5 minutes

getting started with angular
Introduction
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.
Pre-requisites
If you want to follow this tutorial , please make sure you have the following installed on your system ::
  1. Nodejs --latest version , at least 6.9.x
  2. NPM --latest version , at least 3.x.x
  3. 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.

                    ng new my-first-app 
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.
getting started with meteor
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.

                    ng serve 
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.
getting started with meteor
Summary
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.

More from RISHABH.IO


developed & nourished with by rishabh.io