All Categories

Setup Angular 2 Project using Angular CLI

AngularJS is by far the most popular JavaScript framework available today for creating web applications. And now Angular 2 and TypeScript are bringing true object oriented web development to the mainstream, in a syntax that is strikingly close to Java 8.

One Framework. (Mobile & Desktop)

The slogan for Angular 2 is one framework for mobile and desktop for making any complex application.  It is MVW framework. (model view and whatever).

Command line tools

 

Command line tools are for building angular applications more easily, adding components and test, then instantly deploy.

What is command line tools?

Angular CLI is a command line interface to scaffold and build angular apps using nodejs style (commonJs) modules. Not only it provides you scalable project structure, instead, it handles all common tedious tasks for you out of the box.

Let’s get started

It is very important to step up your angular 2 projects by understanding the project file structure before proceeding forward to make a great complex application. The steps to follow as below and we will discuss each steps in details.

Step 1:

  1. Download node from https://nodejs.org/en/ for  windows or mac

image1
The node comes with npm. NPM stands for node package manager. As soon as we have installed node a npm is also got installed. Angular applications and Angular itself depend upon features and functionality provided by a variety of third-party packages. These packages are maintained and installed with the Node Package Manager (npm).

To check node and npm got installed we have to open our terminal and type as below

For node installed or not type

  1. node  –version

image2
For npm installed or not type

  1. npm  –v

image3
As we see it’s already installed in our system so we get the current version.

Step 2.

Since npm is installed now so, we can install angular – cli and we need to type in our terminal as

npm install -g angular -cli

image2

You will see lots of files will be get downloaded on your machine.

image2

Now command line interface for angular got installed on your machine.

What npm install  – g angular – cli ?

npm is a package manager and we are telling to npm to install the command line interface for angular 2 frameworks. install -g  is a command to install angular CLI in the environment variable globally that means if you want to invoke your angular CLI from any of the folders in our system. Then we wrote angular  – cli which is a package name to be installed.

Note: It is recommended to use -g for installing angular -cli for production purposes.

Step 3:  Create a folder to set your project files.

Command to type in the terminal as follows:

mkdir app

/*Here our folder name we have named as app you can make your folder name anything you want*/

To enter into the directory of our folder created app we need to use this command as follows:

cd  app

Step 4: You need to create application project name now with typing another command (important step )

ng  new starter1

/*Here our application project name we have defined as starter1 which you can give any name you want*/

The Angular2 CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!

image2
When you have written a command ng serve you will see the below image in the terminal and it will start up your server and render your application in a browser.

You can go to your folder directory and view starter1 application got the angular project structure the below image as follows:
image2
Step 5: Since you are in the same directory you have to type in the terminal to run the application  as below:

ng serve
image2
The ng serve command will start the server and render your application in the browser, since you type the command in the terminal the above image will serve the server.

Ng serves easily put your application in production and start the server to render your application in the browser.

Step 6: You can view your application running on your localhost with the port number

image2
The app will automatically reload if you change any of the source files.
You can configure the default HTTP port and the one used by the LiveReload server with two command-line options

Conclusion

This project is very much still a work in progress.  If you wish to collaborate while the project is still young, check out our issue list. Before submitting new issues, have a look at issues marked with the type: faq label.

Keep visiting www.acadgild.com for more updates on the Technical and Certification courses.

Tags

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close