28 March 2018

How to start writing web application in AngularJS and Angular. Which version should you choose?

Introduction

When you are planning to create single-page web application, you should choose the right technology and tools to prepare it.

One of the basic elements is selection of the MVC JavaScript framework. MVC (Model-View-Controller) is an architectural pattern which divides an application into three parts. Model represents application logic, View describes how to display part of the model as a part of the user interface, Controller gets data from user, updates data in model and refreshes views. JavaScript framework can save a lot of your time, because you don’t have to implement many necessary functions from scratch.

One of the most popular MVC JavaScript frameworks is AngularJS (or just Angular). This framework was created in 2009 by Google.

Versions of Angular framework

When you decide to use AngularJS in your project, you must choose the version you want to use. We can divide Angular versions into two groups: AngularJS 1.X and Angular 2+.

Actually, versions 1.X are called AngularJS and the next versions (2+) are just Angular. I will use these names later in this article.

Which version should you choose? What are the differences between them?

There are lots of differences between AngularJS and Angular. Let’s see how to create the basic structure of the application in both versions, to know the differences between them.

Basic project in AngularJS

First of all, we need to create index.html file and load angular.js library. It’s easy, just paste this script before body closing tag:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

Then we have to specify limits of the application by ng-app directive. This shows the parts of the page that the framework should manage. We can add module name to ng-app directive. Module is a container for the different parts of our app (like controllers, services, filters, directives, etc.). If you want to manage all DOM elements on the page, you can put ng-app to html tag. Also create an app.js file that we will use for create an application logic.

<html ng-app=”creativeApp”>
  <head>...</head>
  <body>
  ...
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src=”app.js”></script>
  </body>
</html>

Then we have to create angular module which name we have in ng-app directive. Add the following code to the app.js file:

var myAppModule = angular.module('creativeApp', []);

Now we need a controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor. It controls data of AngularJS applications. AngularJS will invoke the controller with a $scope object. In AngularJS, $scope is the application object (the owner of application variables and functions). So add the following code in app.js file below the existing code:

myAppModule.controller('creativeCtrl', function($scope) {});

In index.html file we have to create a container and define our creativeCtrl:

<body>
  ...
  <div ng-controller=”creativeCtrl”>
    ...
  </div>
  ...
</body>

We will be able to use variables and functions from creativeCtrl only inside this div.

So now we can add new property to our controller. We will create a property ‘greeting’ with text that will be displayed on the screen.

myAppModule.controller('creativeCtrl', function($scope) {
  $scope.greeting = { text: “Greetings from 180 Creative team!” };
});

So let’s show greetings in browser:

<div ng-controller=”creativeCtrl”>
  <h1>{{greetings.text}}</h1>
</div>

Greetings will appear inside h1 tag.

Now let’s see how functions work in AngularJS. In index.html file add new button below <h1>.

<button ng-click=”changeText()”>Change greetings text</button>

And in app.js file add following code inside controller:

$scope.changeText = function() {
  $scope.greeting.text = "New greetings!";
}

The ng-click directive will call changeText() function when you click the button.

We have just created a very simple application in AngularJS. Now let’s see how will looks like the same application in Angular.

Basic project in Angular

First of all, you should install Node.js® and npm if they are not already on your device. Then install the AngularCLI globally. Run following command in terminal:

npm install -g @angular/cli

AngularCLI is a tool that helps you generate files and folders in a right structure.

Now we can generate a new project and skeleton application:

ng new cretive-app

Our project is created, so let’s see what the basic structure of the Angular application looks like.

One of the most important difference between AngularJS and Angular is that AngularJS uses JavaScript to build the application while Angular uses TypeScript. TypeScript is a programming language developed by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. TypeScript introduces class-based Object Oriented Programming.

Go to your project directory to creative-app/src/app and open app.module.ts file. This file defines AppModule, the root module that tells Angular how to assemble the application (like our myAppModule from AngularJS example).

Then open app.component.ts file. This file defines the AppComponent along with an HTML template (app.component.html), CSS stylesheet (app.component.css), and a unit test (app.comopnent.spec.ts). It is the root component of what will become a tree of nested components as the application evolves.

So let’s create our own component. Run following command in terminal:

ng generate component Creative

You can see created component in creative-app/src/app/creative.

Now, open creative.component.ts file. Add following code inside CreativeComponent class, before constructor:

public greeting = {
  text: ''
}

Then inside the constructor add:

this.greeting.text = "Greetings from 180 Creative team!";

In creative.component.html file add following line:

<h1>{{ greeting.text }}</h1>

We have just created greeting text inside CreativeComponent, but we want to display it on the page. How we can do it? Look at your creative.component.ts file. Inside @Component decorator you can see line “selector: ‘app-creative’”. This means you can use <app-creative> selector in other .html files, to display content of our CreativeComponent. So add

<app-creative></app-creative>

at the beginning of app.component.html file. To run the application type

ng serve --open

in terminal. The page will appear on your browser. You can see greetings text on your page!

Now let’s see how functions work in Angular.

Let’s start by adding a button in the creative.component.html file, just like in the previous example.

<button (click)="changeText()">Change greetings</button>

Next we have to create our function in creative.component.ts:

changeText() {
  this.greeting.text = "New greetings!";
}

Now you can click on button and see results. That is all about creating simple application in angular.

Summary – so which version should you choose?

You have just saw how to create a very simple application in AngularJS and Angular. You saw there are so many differences between them.

I recommend to use Angular instead of AngularJS. This is a popular solution. The latest version is Angular 5 and every six months it will be published another version. We can assume that, Angular is developing very quickly. Creating apps in Angular is easier and the code is more readable. You have AngularCLI, so you can generate basic project by running simple command.

Blog