AngularJS Tutorial: Getting Started with AngularJS
Join the DZone community and get the full member experience.
Join For FreeAngularJS 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
<html> <head> <title>Hello AngularJS</title> <meta charset="UTF-8"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-app> <p>Enter Name: <input type="text" ng-model="myname"> </p> <p>Hello {{myname}}!!</p> </body> </html> - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
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.
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>DashBoard</title> <link rel="stylesheet" href="webjars/bootstrap/3.2.0/css/bootstrap.css"/> <link rel="stylesheet" href="webjars/font-awesome/4.1.0/css/font-awesome.css"/> <link rel="stylesheet" href="css/styles.css"/> </head> <body ng-app> <p>Enter Name: <input type="text" ng-model="myname"> </p> <p>Hello {{myname}}!!</p> <script src="webjars/jquery/1.11.1/jquery.js"></script> <script src="webjars/bootstrap/3.2.0/js/bootstrap.js"></script> <script src="webjars/angularjs/1.2.19/angular.js"></script> <script src="webjars/angularjs/1.2.19/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </body> </html> - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
In Application.java file add the following RequestMapping to map context root to index.html.
package com.sivalabs.app; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.EnableAutoConfiguration; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Configuration @ComponentScan @EnableAutoConfiguration public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } @Controller class HomeController { @RequestMapping("/") public String home() { return "index.html"; } } - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpufview rawHelloAngular-Application.java hosted with ❤ by GitHub
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.
package com.sivalabs.app.entities; @Entity public class Todo { @Id @GeneratedValue(strategy=GenerationType.AUTO) private Integer id; private String description; @Temporal(TemporalType.TIMESTAMP) private Date createdOn = new Date(); //setters and getters } package com.sivalabs.app.repos; public interface TodoRepository extends JpaRepository<Todo, Integer>{ } package com.sivalabs.app.controllers; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RestController; import com.sivalabs.app.entities.Todo; import com.sivalabs.app.repos.TodoRepository; @RestController @RequestMapping("/todos") public class TodoController { @Autowired private TodoRepository todoRepository; @RequestMapping(value="", method=RequestMethod.GET) public List<Todo> persons() { return todoRepository.findAll(); } @RequestMapping(value="", method=RequestMethod.POST) public Todo create(@RequestBody Todo todo) { return todoRepository.save(todo); } @RequestMapping(value="/{id}", method=RequestMethod.DELETE) public void delete(@PathVariable("id") Integer id) { todoRepository.delete(id); } } - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
Create DatabasePopulator to setup some initial data.
package com.sivalabs.app; import java.util.Arrays; import java.util.Date; import javax.annotation.PostConstruct; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import com.sivalabs.app.entities.Todo; import com.sivalabs.app.repos.TodoRepository; @Component public class DatabasePopulator { @Autowired private TodoRepository todoRepository; @PostConstruct void init() { try { Todo t1 = new Todo(null, "Task 1", new Date()); Todo t2 = new Todo(null, "Task 2", new Date()); Todo t3 = new Todo(null, "Task 3", new Date()); this.todoRepository.save(Arrays.asList(t1,t2,t3)); } catch (Exception e) { e.printStackTrace(); } } } - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
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.
var myApp = angular.module('myApp',['ngRoute']); myApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) { $routeProvider .when('/home', { templateUrl: 'templates/home.html', controller: 'TodoController' }) .otherwise({ redirectTo: 'home' }); }]); - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
Now update index.html to hookup myApp module at the root of page using and use to load the current route template.
<!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"/> <title>DashBoard</title> <link rel="stylesheet" href="webjars/bootstrap/3.2.0/css/bootstrap.css"/> <link rel="stylesheet" href="webjars/font-awesome/4.1.0/css/font-awesome.css"/> <link rel="stylesheet" href="css/styles.css"/> </head> <body> <div class="container"> <div ng-view></div> </div> <script src="webjars/jquery/1.11.1/jquery.js"></script> <script src="webjars/bootstrap/3.2.0/js/bootstrap.js"></script> <script src="webjars/angularjs/1.2.19/angular.js"></script> <script src="webjars/angularjs/1.2.19/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> <script src="js/services.js"></script> </body> </html> - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
Create home.html template in src/main/resources/public/templates folder.
<div class="col-md-8 col-md-offset-2"> <form class="form-horizontal" role="form"> <div class="form-group form-group-md"> <div class="col-md-10"> <input type="text" class="form-control" ng-model="newTodo.description"> </div> <button class="btn btn-primary" ng-click="addTodo(newTodo)">Add</button> </div> </form> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th width="70%">Item</th> <th>Date</th> <th>Delete</th> </tr> </thead> <tbody> <tr ng-repeat="todo in todos"> <td>{{todo.description}}</td> <td>{{todo.createdOn | date}}</td> <td><button class="btn btn-danger" ng-click="deleteTodo(todo)">Delete</button></td> </tr> </tbody> </table> <br/> </div> - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
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.
angular.module('myApp') .controller('TodoController', [ '$scope', '$http', function ($scope, $http) { $scope.newTodo = {}; $scope.loadTodos = function(){ $http.get('todos') .success(function(data, status, headers, config) { $scope.todos = data; }) .error(function(data, status, headers, config) { alert('Error loading Todos'); }); }; $scope.addTodo = function(){ $http.post('todos',$scope.newTodo) .success(function(data, status, headers, config) { $scope.newTodo = {}; $scope.loadTodos(); }) .error(function(data, status, headers, config) { alert('Error saving Todo'); }); }; $scope.deleteTodo = function(todo){ $http.delete('todos/'+todo.id) .success(function(data, status, headers, config) { $scope.loadTodos(); }) .error(function(data, status, headers, config) { alert('Error deleting Todo'); }); }; $scope.loadTodos(); }]); - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
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 :-) - See more at: http://www.sivalabs.in/2014/09/angularjs-tutorial-getting-started-with.html#sthash.q8epstbb.dpuf
Published at DZone with permission of Siva Prasad Reddy Katamreddy, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments