AngularJS Tutorial: Getting Started with AngularJS

AngularJS is a popular JavaScript framework for building Single Page Applications (SPAs).
AngularJS provides the following features which makes developing web apps easy:
1. Two way data binding
2. Dependency Injection
3. Custom HTML Directives
4. Easy integration with REST webservices using $http, $resource, Restangular etc
5. Support for Testing
and many more...

Though there are lot more features than the above mentioned list, these are the very commonly used features.

I am not going to explain what 2-way data binding is, how $scope works here because there are tons of material already on web.

As a Java developer, I will be using SpringBoot based RESTful back-end services. If you want you can use JavaEE/JAX-RS to build REST back-end services. Also you might like using NetBeans as it has wonderful AngularJS auto-completion support out of the box.

So lets get start coding AngularJS HelloWorld application.

Create index.html with the following content and start your server and point your browser to http://localhost:8080/hello-angularjs/index.html



Now start typing in input text and your Hello {{myname}} would immediately reflect the value you are entering in input text field.

Ok, we are done with "HelloWorld" ceremony and warm up :-).

We have used AngularJS CDN URL for loading AngularJS library. We can download AngularJS from https://angularjs.org/ add the angular.min.js script.

But we will be using WebJars (http://www.webjars.org/) which provides the popular javascript libraries as maven jar modules along with transitive dependencies. If we want to use Twitter Bootstrap we should include jQuery also. But using WebJars I need to configure only bootstrap jar dependency and it will pull jquery dependency for me.

Let us create a SpringBoot project by selecting File -> New -> Spring Starter Project, select "Web" and "Data JPA" modules and Finish.

If you are not using STS then you can create this starter template from http://start.spring.io/ and download it as zip.

We will be using Bootstrap and font-awesome javascript libraries to build our Web UI.
Lets configure H2 database, AngularJS, Bootstrap and font-awesome libraries as WebJar maven dependencies in pom.xml.

As it is a SpringBoot jar type application we will put all our html pages in src/main/resources/public folder and all our javascripts, css, images in src/main/resources/static folder.

• Now modify the AngularJS CDN reference to <script src="webjars/angularjs/1.2.19/angular.js"></script>.
• Lets include the bootstrap and font-awesome css/js in our index.html. Also we will be using angular-route module for page navigation and hence we need to include angular-route.js as well.
• Lets create app.js file which contains our main angularjs module configuration in src/main/resources/static/js folder.
• Also create controllers.js, services.js, filters.js, directives.js in the same folder and include them in index.html.

SpringBoot will serve the static content from src/main/resources/static folder.



In Application.java file add the following RequestMapping to map context root to index.html.


Now run this Application.java as stand-alone class and go to http://localhost:8080/. It should work same as earlier.

Now we have basic setup ready. Lets build a very simple Todo application.

Create a JPA entity Todo.java, its Spring Data JPA repository interface and TodoController to perform Read/Create/Delete operations.



Create DatabasePopulator to setup some initial data.



Now our back-end RESTful web services ready at the following URLs.
GET - http://localhost:8080/todos for getting list of Todos
POST - http://localhost:8080/todos for creating new Todo
DELETE - http://localhost:8080/todos/1 to delete Todo(id:1)

Lets create our main angularjs module 'myApp' and configure our application routes in app.js file.



Now update index.html to hookup myApp module at the root of page using and use

to load the current route template.



Create home.html template in src/main/resources/public/templates folder.



It is a very simple html page with some bootstrap styles and we are using some angularjs features.
We are using ng-repeat directive to iterate through array of Todo JSON objects, ng-click directive to bind a callback function to button click.

To invoke REST services we will use angularjs built-in $http service. $http service resides in angular-route.js, don't forget to include it in index.html.

$http.verb('URI')
.success(success_callback_function(data, status, headers, config){
//use data
 })
.error(error_callback_function(data, status, headers, config) {
 alert('Error loading data');
});

For example: to make GET /todos REST call

$http.get('todos')
.success(function(data, status, headers, config) {
//use data
 })
.error(function(data, status, headers, config) {
 alert('Error loading data');
});

Create TodoController in controllers.js file. In TodoController we will create functions to load/create/delete Todos.



Now point your browser to http://localhost:8080/. You should see list of Todos and New Todo Entry form and Delete option for each Todo item.

By now we get some hands-on with AngularJS basic features.
In next post I will explain using multiple routes, multiple controllers and services. Stay tuned :-)