JavaScript

Starting out with AngularJS

By Max
February 18, 2014
0

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">
<head>
	<meta charset="utf-8" />
	<title>jED WebUI</title>
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"></script>
	<link rel="stylesheet" href="style.css" />
	<script src="script.js"></script>
</head>
<body>
	<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>
	</ul>
	<div class="container">
		<div data-ng-view class="row"></div>
	</div>
</body>
</html>

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'
	}).otherwise({
		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) {
		$http.post("series/add",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 = "";
	$scope.search = function() {
		seriesService.searchSeries($scope.filter).then(function(result){
			$scope.candidates = result.data;
		});
	};
	$scope.addShow = function(show) {
		seriesService.addSerie(show);
		$location.path( "/" );
	};
};
jedApp.controller('AddController',['$scope','$location','SeriesService',addController]);

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>
		</div>
	</form>
</div>
</div>
<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="candidate.name">
				<span class="input-group-btn">
				<button type="button" class="btn btn-default" ng-click="addShow(candidate)">Add show</button>
				</span>
				</div>
				<div class="result-body">
					<img class="img-responsive" src="http://www.thetvdb.com/banners/{{candidate.banner}}" />
					<span class='overview'>{{candidate.overview}}</span>
				</div>
		</div>
</div>

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

 

Pretty nice eh?

Comments: 0

Leave a Reply

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