Angular 4 : Setup and basics

Angular is one of the most popular javascript frameworks for creating single page web apps. Angular 1 was hugely popular and changed the way we think of developing frontend apps. Google released Angular 2 last year with significant changes. Angular 2 is not an update to Angular 1, but a complete rewritten of the framework with significant changes made.

  • Concepts of Angular 1 (things like $scope, controllers etc) are not there to Angular 2.
  • Angular 2 is using Typescript which is super set of JavaScript (You can use other languages like dart, ES6 too, but angular team recommends the use of Typescript).
  • Angular 1.x was not built with mobile support in mind, where Angular 2 is mobile oriented.
  • Angular 2 implements web standards like components, and it provides better performance than Angular 1.
  •  Angular 4 is simply an update of Angular 2,  angular 3 was skipped due to some internal versioning conflicts. Angular 4 and future version will be backward compatible.

Lets build our first angular application using a command line interface tool given by angular team called Angular CLI. The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices. To install angular cli we need to have node and npm. I am using node v7.10 and npm 4.2.0 on an ubuntu machine.

To install angular cli


npm install -g @angular/cli

You may have to use ‘sudo’ for linux/mac. To check if the ng is installed, do an ‘ng help’ at the commnad line. While this was pretty straight forward on linux, it was pretty hard to install on windows 10 machine. I had to restart my PC, after setting up the env variable manually. Whatever error comes, there is plenty of support available online and hopefully something will work for you. Moving on, lets create a new project


ng new my-angular-app

You can see a project folder will be created. Lets go inside and run the application.


cd my-angular-app

ng serve

What ‘ng serve’ did was to build our source code, as angular uses typescript and that needs to be converted into javascript  and it will run s development server running at localhost:4200

Lets open up the generated project and check out what all things are there. I will be using Visual Studio Code as an IDE. You can use Atom, sublime or whatever you like.

As you can see there are many files and folder created. Don’t get intimated by it. We will cover most of this series. For now most of the default configuration is fine. Lets discuss few of the files present at the root which are mostly configuration files. karma.conf.js and protractor.conf.js are the files  used for testing.  There is package.json file which has all of our dependencies and other npm configuration. tslint.json is used by the build process to lint our application. e2e folder will be required to have for end to end testing. the node_modules is a folder where all our npm dependencies resides. The src folder is where our main code resides. It has again many folders and files structured in a way recommended by angular. It has a index.html which is the file that is going to be served. All the files ending with the *.ts are typescript files.

If you go to the app folder and open app.component.ts file, thats where the title ‘app works’ comes from. All the code written up there would be strange in the beginning but don’t worry, we would cover it all. Lets change this title in the app.component.ts file and hit save. you will notice that the application is rebuilt and updated code is pushed to the browser.

Lets go the the app.component.html and change it

<div>
<div><h1> Angular 4 App </h1></div>
<div><input type="text" [(ngModel)]="name"/></div>
<div><p>{{ name }}</p></div>
<div></div>
Lets save
Lets add an function mapped to a button in htm. Changing app.component.html
</div>
<div>
<div>
<div><h1> Angular 4 App </h1></div>
<div><input type="text" [(ngModel)]="name"/></div>
<div><p>{{ name }}</p></div>
<div>Count: {{ count }} -</div>
<div><button (click)="increment()">Increment</button></div>
</div>
</div>
<div>

Adding appropriate function in app.component.ts

<div>
<div>import { Component } from '@angular/core';</div>
<div>@Component({</div>
<div>selector:'app-root',</div>
<div>templateUrl:'./app.component.html',</div>
<div>styleUrls: ['./app.component.css']</div>
<div>})</div>
<div>export class AppComponent {</div>
<div>count = 0;</div>
<div>increment() {</div>
<div>this.count++;</div>
<div>}</div>
<div>}</div>
</div>

Angular 2/4 and TypeScript are bringing true object oriented web development to the mainstream, in a syntax that is strikingly close to Java , .Net etc. TypeScript is an extension of ECMAScript, in fact:

                                                       TypeScript = ES6 + Types + Annotations 

TypeScript is a form of JavaScript which knows types and classes. It is open source. TypeScript includes many aspects of object orientation such as inheritance and interfaces. It also has generics and lambdas. TypeScript has to  be compiled to JavaScript in order to run in the browser, thats why we need the cli. angular cli uses webpack at the backend to do all the bundling and injection into the index.html.

We would be seeing more on how this application gets bootstrapped in the next post.

%d bloggers like this: