Complete Angular 2 Guide : Getting started

Ashish Singh

Published in

Aviabird

4 min readDec 25, 2016

A comprehensive guide to latest Angular framework

Complete Angular 2 Guide series

Getting started with angular-cli(This article)
Angular Components in depth
Reactive Forms in depth Part 1
Reactive Forms in depth Part 2(Coming soon)

Reactive Forms in depth Part 1

Google’s latest avatar of Angular is round the corner and there are very few places where developers can go and get started without getting confused. One such resource is angular.io getting started 5 minute guide. However the overwhelming availability of resources can an issue sometime in getting started with latest version of Angular.

In this post we’d see how can we setup angular on our local machines from scratch and in the coming posts I’d cover details of the framework and its internals.

Angular team came up with angular-cli something along the lines of ember-cli and how you’d see in rails with all the fancy commands such as creating different building blocks of an application like the routes, views, components/controllers etc.

Angular cli has become the de facto standard for creating and managing angular application. Although its not a mandatory thing and there are other ways to setup latest angular projects. Feel free to explore as much as you can. Please reach out to me if one is more interested on exploring further.

Let’s get started and see how we can use to setup latest version of angular on our systems.

There are 2 things in particular which need to be setup on our systems before we could go any further.

Once you have installed both these make sure you have their latest or NPM( > 3.x.x) or NODEJS (> 4.x.x) installed.

Use node -v and npm -v on terminal or console to cross check these versions for respective softwares.

Now its time to install angular-cli , fire this command in console

npm install -g angular-cli

-g option installs angular-cli globally and not just for the a particular folder.

Finally lets create a new angular project using angular-cli.

Most of what I am writing here is from the angular-cli README.md. At any point of time while going through this article please feel free to use ng help to crosscheck the commands listed here and command present at the time the reader is referencing is this article.

All the commands for angular cli start with ng

Create a new angular project

ng new <project_name> //where project_name is name of the folder you want to create.cd <project_name> // to go inside the project,ng serve // this starts the live server

After this go to the browser and localhost:4200 address bar you’ll see app works message.

Some basic command used frequently with angular cli

Generate command

This command is used to generate basic components of an angular application such as components, directives, pipes, services, classes, interfaces, enum & modules.
These can be generated with a basic template ng g <what is to be generated> <name>.
eg. ng g <component|directive|pipe|service|class|interface> my-component

Creating a build

Deployment is of great importance and for big products there are generally dedicated deployment teams. For deployment there is a `dist/` directory which is deployed.

ng build // default build

Specifying build targets & environment files.

Specifying a build target use these options

--target=production & --target=development

There is some difference in between production and development environments. In production environments change detection is only run once while in development environment it might run more than once depending on the ngZone.
Specifying and creating new environments like `staging` environment.
Create a new file at src/environments/environment.NAME.ts where NAME can be [stag] for staging environment.
Using this newly created environment

ng build --env=stag

Running Tests with angular-cli

Unit tests can be run using

ng test

To run Integration Tests use

ng e2e

Deploying to Github pages

Use following command to deploy to github pages.

ng github-pages:deploy — message “Optional commit message”

This does the following magic for you.

Creates GitHub repo for the current project if one doesn’t exist
Rebuilds the app in production mode at the current HEAD
Creates a local gh-pages branch if one doesn’t exist
Moves your app to the gh-pages branch and creates a commit
Edit the base tag in index.html to support github pages ( for changing as per the new github repo, this can be only found in the gh-pages branch )
Pushes the gh-pages branch to github
Returns back to the original HEAD

There are some features such as routes which are disabled for now in angular-cli but its because angular-cli is still in active development phase. Having said that I sure it will be coming to cli very soon. I’ll update this article with new and essential features in angular-cli over time.

Please reach out to me @ashishait if you feel there is something I missed and I’d be more than happy to make changes.

I hope you enjoyed reading this article as much as I enjoyed writing it.

AVIACOMMERCE: OPEN SOURCE E-COMMERCE

Aviacommerce is an open source e-commerce framework with an aim to simplify e-commerce ecosystem by creating and unifying smart services and providing consistent, cost-effective solution to sellers helping them sell more. visit aviacommerce.org to know more.