This post I’ll introduce you to Angular CLI (command line interface) and how you can use it to get started quickly with building your Angular app.

The roadmap for this blog series:

  • Introduction to Angular CLI and using it to create a new Angular app
  • Using Angular CLI for creating components, routes, services and more
  • Adding in Bootstrap to update the look and feel of your Angular app
  • Finally I’ll take a look at deploying and running your Angular apps on Azure

Installation

Both the Angular CLI and its generated projects have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.

npm install -g @angular/cli

image

After installation you can access help by running the following command:

ng help

 

Creating a New Angular App

To generate a new Angular app, just run the following command where “angular-cli-app” is the name of your app:

ng new angular-cli-app

image

Generating and Serving your App

Once your project is scaffold, navigate to your project folder and then run the following command to serve your project via a local development server:

cd angular-cli-app
ng serve

 

image

 

Once your app is up and running, navigate to http://localhost:4200/ to see it. Once the app is running, any changes you make will automatically apply and your app will reload.

image

As you can see it’s fairly straight forward to get started with an Angular app. The Angular CLI really takes care of everything for you compared to the days where you have to manually copy and paste the references and create each file necessary to get your app started.

In the next post I’ll dig deeper into using Angular-CLI to create components, routes, services and other stuff.

Source for this sample can be found here.

Enjoy!

References

Angular
Angular CLI

Posted by Callon Campbell

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s