RSS

Angular Intro

08 Sep

Episode 34

Talk is cheap. Show me the code.

– Linus Torvalds

          I’ve talked about recruitment and clean code recently, but I haven’t shown you any (or almost any) actual code for some time. Time to fix this. In November 2014 I’ve written articles about GWT and Vaadin. Now I’d like to present you something similar on AngularJS, which seems to be the most popular JavaScript framework nowadays. And despite being JavaScript, it’s actually pretty good. Let’s take a look.

Overview

AngularJS-huge

          Angular is a JavaScript open source front-end, single page, web application framework maintained by Google.

          It provides a standard structure for front-end project part, like GWT, much as Spring provide standard structure for back-end part. Its simplification, because you can do the front-end in Spring too via Spring MVC, and the structure for entire project is also partly defined by Maven or other convention over configuration type build tool, but it’s an idea to start with.

          It is single page framework, also like GWT, meaning the front-end loads greedily, and later only contacts back-end to get necessary dynamic data, not to render entire html page as in server-side web frameworks like JSP or Vaadin. This makes web page more responsive and user friendly.

Under the Hood

          The idea behind Angular is to provide a standard project structure, so you know where to expect things when you approach a new project (Principle of Least Astonishment), and do as much dirty work for the developer as possible. The classic dirty work was tons of boilerplate JavaScript and jQuery code required to manipulate DOM, listen to events, update stuff etc. Angular decouples DOM manipulation from application logic and gives you two-way data binding for free. You will see that in the example soon. Also, Angular follows declarative approach, and provides you with plenty of small components you can easily configure and use on your page to do all the work for you.

          From the technical point of view – Angular is a script that interprets html page with Angular directives, performs dependency injection and gets the magic going, so that you don’t have to get your hands dirty.

Hello World

          Let’s look at the actual example. I’ve created a simple project, available on my GitHub. Feel free to fork it, clone it and play with it (and give it a star if you like it :). It uses Maven for build and Spring Boot for back-end. Easiest way to run it in Eclipse:

  • Clone the repository to your machine
  • Import -> Existing Maven Project
  • Project -> Run as -> Maven Install
  • AngularIntroApplication.java -> Run as -> Java Application
  • Check out at http://localhost:8080/AngularIntro/start

          It’s that simple. No installing and configuration of external servers, no deployment, just one Fat Jar from Spring Boot. You have all Eclipse and non-Eclipse settings you need to work with the project out of the box, namely:

  • Java compiler settings
  • Deployment assembly
  • Project facets
  • Conversion to AngularJS project
  • Spring application.properties

It is recommended to install AngularJS plugin for Eclipse for directives syntax highlighting.

          Similar to GWT and Vaadin articles, we are going to display customized Hello world message travelling all the way from front-end to back-end and back again. Let’s take a look at what makes the Angular magic work.

Module.js

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

Definition of main application module and its dependencies. For now, there are none, so we pass an empty array.

Service.js


angularIntro.factory('service', function($http) {
  var service = this;
  return {
    getGreetings : function(name) {
      return $http.get('/AngularIntro/getGreetings/'+name);
    }
  }
});

Basically a single method that performs http get request with single string as a name parameter, and returns a response object to grab onto.

Controller.js

angularIntro.controller('controller', function($scope, service) {
  $scope.greetings="loading..."
  service.getGreetings('world').then(function(result) {
    $scope.greetings = result.data.text;
  });
});

Controller uses Service to asynchronously fetch data from server and bind it to the $scope, so that View can display the result. At the beginning the greeting variable displays loading message, but after the call returns, the function executes, binding returned data to the variable. Since server is lazy, it will sleep for one second before responding to the request so we can observe the changing value on the View.

View.html

<!DOCTYPE html>
<html ng-app="angularIntro">
<head>
<meta charset="ISO-8859-1">
<title>Angular Intro</title>
				<link rel="icon" type="image/png" href="favicon.png">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="Module.js"></script>
<script src="Controller.js"></script>
<script src="Service.js"></script>
</head>
<body ng-controller='controller'>
<table style="border: none; width:400px">
<tr>
<td>
<div style="font-size: 30px;">Angular Intro</div>
by <a href="https://howtotrainyourjee.com/author/">Gvaireth</a>

<hr>

<b>Asynchronous data fetch from server</b>
Wait for it: {{greetings}}

<hr>

<b>Two way data binding</b>
Type your name:
<input type="text" ng-model="yourName" placeholder="Enter a name here">
Hello {{yourName}}!

<hr>

Check out my <a href="https://howtotrainyourjee.com/2016/09/08/angular-intro/">Angular Intro</a> article for details.</td>
</tr>
</table>
</body>
</html>

Several things are going on here, let’s review all of them:

  • There is an ng-app directive that tells Angular that it should wake up, parse the page and perform all its mysterious shenanigans.
  • There is a
 
7 Comments

Posted by on September 8, 2016 in News, Spring, Technology

 

Tags: , ,

7 responses to “Angular Intro

  1. Pingback: Angular Intro

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: