ANGULAR 4 WITH THE ANGULAR-CLI :A QUICK PRIMER

As most of you already know angular 4 is now out , only 6 months after the release of angular 2. Now if you are like me and had been putting off learning angular 2 because it was so different from the original angularjs then this must have been a heavy blow. Now you have two new frameworks versions to learn (yes , just 2 ,there is now angular 3 ,whew !!!) , and that’s only if they don’t release angular 5 while you still doing it. At first I thought of switch to another (hopefully less shifty) framework , maybe react or ember. Starting on the angular 2/4 journey seemed a bit daunting , I had already learned a bit of typescript but setting up gulp processes for development , using components instead of controllers ,learning rxjs ,modules and bundling — argggghhh ,i got a headache just thinking about it.

After a bit of research , i learned angular 4 is backwards compatible with angular 2 , this just means it was not a complete rewrite like with the second version of angular ,but rather some improvements in performance and functionality. This meant i could forego learning angular 2 ,and just move to the up to date angular 4. Now i could enjoy the a faster performance of angular 4, improved syntax of typescript and do away with the messy nested scopes of angularjs. But wait I still had my originals problems to deal with

:( .

ENTER ANGULAR-CLI

npm install -g @angular/cli

Once this is installed you can easy start a new angular 4 project using the command

ng new PROJECT-NAME

This generates boilerplate code for your new projects and installs all your dependencies. A screenshot of the generated files is shown below

Running the project is as simple as going into the project direcory and running ng serve for a dev server. Navigating to http://localhost:4200/ will open up your angular app in the browser. The app will automatically reload if you change any of the source files. No more running npm start, you will just only have to ng serve.

GENERATING COMPONENTS, DIRECTIVES, PIPES AND SERVICES

USAGE

ng g component my-new-component

Directive :

ng g directive my-new-directive

Service

ng g service my-new-service

Pipe

ng g pipe my-new-pipe

Class

ng g class my-new-class

Guard

ng g guard my-new-guard

Interface

ng g interface my-new-interface

Enum

ng g enum my-new-enum

Module

ng g module my-module

STILL NOT CONVINCED ??

Additionally your app is git initialized by default, the .gitignore file is already setup correctly to ignore all the extra files that you might never edit and work with, but will be required for your application to run.

READY TO LEARN ANGULAR 4

Here is a great YouTube playlist on angular 4 by Awais Mirza.

Read documention at the Angular and Angular-cli Website.

Enjoy !

NOTE: This is a re-post of my original blog post which appeared on My life of code

Human