Complete Angular 2 Guide : Getting started

Ashish Singh
Dec 25, 2016 · 4 min read

A comprehensive guide to latest Angular framework

Complete Angular 2 Guide series

Reactive Forms in depth Part 1

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

  • 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

ng build // default build

Specifying build targets & environment files.

--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

ng test 

To run Integration Tests use

ng e2e 

Deploying 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

click the image to know more or visit https://aviacommerce.org

If you liked this article, click the 💚 below so that it can reach more devs on medium.

For more musings about programming, follow me here or on twitter so you’ll get notified when I write new posts.

Aviabird

Aviabird Technologies provides enterprise software consulting in Angular, Rails, Elixir, Golang, React, Flutter and other technologies.

Ashish Singh

Written by

Sky is the Limit

Aviabird

Aviabird

Aviabird Technologies provides enterprise software consulting in Angular, Rails, Elixir, Golang, React, Flutter and other technologies.