Controllers in Ionic/Angular

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.

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.

转自:http://mcgivery.com/controllers-ionicangular/