Controllers in Ionic/Angular

posted in: Uncategorized | 8

As covered in my post Structure of an Ionic App, controllers are the brains behind an Ionic app. They control the flow of logic and data. In this tutorial, we’ll look at the many things a controller can do, how you should use them, and how they fit into the big picture that is your Ionic app.

Purpose of a Controller

A controller does exactly what it sounds like it does: it controls. More specifically it controls the passing of data from the data layer to the view layer via data binding. When you go to a URL in your app, you usually call a controller and a template. The controller will use the template to build your view using data that it will get after it calls a service. This data is stored into the $scope variable. The $scope is an object that contains data defined by the controller used to build the view.

Diagram of logic flow bretween Service, Controller, and View

Building a Basic Controller

So what does a controller look like?

.controller('MainCtrl', function($scope) {

})

This is about as basic as a controller gets. It’s first parameter is the name of the controller followed by the second function parameter that is the body of the controller. Notice the function has a parameter of $scope. Any parameters we put for the function will be injected by Angular’s dependency injection system, assuming they are available by default in Angular or we have imported the module they are in (Read More: Modules in Ionic/Angular).

So, how do we assign something to the scope? Easy. Just assign to it like you would any variable or object.

.controller('MainCtrl', function($scope) {
	$scope.firstName = "Andrew";
	$scope.lastName = "McGivery";
})

Something else we can do is expose functions to our view by assigning a function to the $scope.

.controller('MainCtrl', function($scope) {
	$scope.add = function(a,b){
		return a + b;
	}
	
	//or if you prefer...
	function subtract(c,d){
		return c - d;
	}
	
	$scope.subtract = subtract;
})

Correct Controller Usage

As stated by the Angular Docs, “In general, a Controller shouldn’t try to do too much. It should contain only the business logic needed for a single view.”. You want to keep your controllers as simple as possible and move anything that you possibly can to services, factories, and directives.

Big Picture

So, how does a controller fit in? Let’s look at a very simple example. Given this view…

<ion-view title="About">
  <ion-content>
	My super cool content here! My name is {{user.name}}.
  </ion-content>
</ion-view>

…and this factory…

.factory('userService', function($http) {
	return {
		GetUser: function() {
			  return {name: "Andrew"}
		},
	}
})

… we want to bind the data provided by the service to this view. We want to get our user and display his name. first, we need to provide this factory to our function and let the dependency injection do it’s magic:

.controller('MainCtrl', function($scope,userService) {

})

Now we can call the userService and bind the returned object to the $scope.

.controller('MainCtrl', function($scope,userService) {
	$scope.user = userService.GetUser(); //Returns {name: "Andrew"}
})

And now our view would be bound with the data.

<ion-view title="About">
  <ion-content>
	My super cool content here! My name is Andrew.
  </ion-content>
</ion-view>

Conclusion

In your Ionic App controllers are the mediator between your data layer and your view layer. They should be kept as simple as possible to help you keep your code clean and organised.

Read More

Structure of an Ionic App
Creating Views with Ionic
Ionic: Using Factories and Web Services for Dynamic Data
Modules in Ionic/Angular
Angular Controller Docs

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada.

8 Responses

  1. Thanks for your work. It was hard for me to find good, clear documentation on Ionic until I found your site

    • Thank you so much for your comment Joe. You have no idea how much that means to me to hear that. I’m so glad I could be of help. Feel free to hit me up on twitter if you have any requests for posts. 🙂

  2. Thanks Andrew. This article gave me a clear picture of DI.

  3. Duuude,This article is conncise and straight to the point.It what every newbie should begin with.(Somewhere in Deep dark Africa.)

  4. Am also glad i found your articles. I am entering into Iconic Mobile Apps development and these are the best way to start. Thanks and I hope you have shared some resources for creating dynamic and highly good interface designs.

  5. Pretty cool and awesome

Leave a Reply