Starting out with AngularJS

By Max
February 18, 2014

Coming from jQuery it’s a bit hard to start with AngularJS. Everything seems to be upside-down so my first encounter meant more than 4 hours to do what i could have done in 20 minutes with jQuery.
I wanted to change the interface of my episode downloader to AngularJS + Bootstrap 3. Since the backend is exposed with REST services, no modification on that side should be necessary.

So i have removed everything and started with a small html:

<!doctype html>
<html data-ng-app="jedApp">
	<meta charset="utf-8" />
	<title>jED WebUI</title>
	<link rel="stylesheet" href="//">
	<script src=""></script>
	<script src=""></script>
	<link rel="stylesheet" href="style.css" />
	<script src="script.js"></script>
	<ul class="nav nav-tabs">
		<li class="active"><a href="#/"><i class="glyphicon glyphicon-home"></i> Home</a></li>
		<li class=""><a href="#/addShow"><i class="glyphicon glyphicon-plus"></i> Add Show</a></li>
		<li class=""><a href="#/settings"><i class="glyphicon glyphicon-cog"></i> Settings</a></li>
	<div class="container">
		<div data-ng-view class="row"></div>

Not much to consider here, just make sure that you set data-ng-app attribute to the correct name of the module, and you import the angular-route script if you need routing.

var jedApp = angular.module('jedApp', [ 'ngRoute' ]);
jedApp.config([ '$routeProvider', function($routeProvider) {
	$routeProvider.when('/', {
		templateUrl : 'partials/shows.html',
		controller : 'JedController'
	}).when('/edit/:showId', {
		templateUrl : 'partials/editShow.html',
		controller : 'EditController'
	}).when('/addShow', {
		templateUrl : 'partials/addShow.html',
		controller : 'AddController'
	}).when('/settings', {
		templateUrl : 'partials/settings.html',
		controller : 'SettingsController'
		redirectTo : '/'
} ]);

I’m not gonna post the whole code here, but i’ll show you how i did the addition of shows.
First of all, we need a service to delegate all the work to:

var seriesService = function($http, $timeout) {
	var searchSeries = function(filter) {
		var data = "name="+filter;
		return $http({
		    method: 'POST',
		    url: "series/search",
		    data: data,
		    headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
		}).success(function(result) {
			return result;
	var addSerie = function(serie) {
	return {
		addSerie : addSerie,
		searchSeries: searchSeries
jedApp.service('SeriesService', [ '$http', '$timeout', seriesService ]);

It should have been a little easier to do the searching, but due to the implementation of the backend, i needed to send the search string as a standard form post field, which took a while to implement.
Anyway, let’s see the controller

var addController = function($scope,$location,seriesService) {
	$scope.candidates = [];
	$scope.filter = "";
	$ = function() {
			$scope.candidates =;
	$scope.addShow = function(show) {
		$location.path( "/" );

All we need now is a nice view to see what we did until now.

<h1>Add a new show</h1>
<form name="name" role="form">
		<div class="input-group">
			<input type="text" class="form-control" ng-keyup="$event.keyCode == 13 ? search() : null" ng-model="filter" >
			<span class="input-group-btn">
				<button type="button"  class="btn btn-primary" ng-click="search()">Search</button></span>
<hr />
<div class="row" id="search-series-result">
		<div class="col-xs-12 col-sm-6 col-lg-4 result" ng-repeat="candidate in candidates">
				<div class="input-group">
				<input type="text" class="form-control" disabled ng-model="">
				<span class="input-group-btn">
				<button type="button" class="btn btn-default" ng-click="addShow(candidate)">Add show</button>
				<div class="result-body">
					<img class="img-responsive" src="{{candidate.banner}}" />
					<span class='overview'>{{candidate.overview}}</span>

A image makes more than a thousand words, so let’s see the  end result


Pretty nice eh?

Comments: 0

Leave a Reply

Your email address will not be published. Required fields are marked *