Multiple Controllers per view? Global app controller? wtf is a controller?

ionic-v1
1

I’m use to working with ruby on rails when it comes to controllers. Allowing you to use a global app controller and individual page controllers that contain multiple functions within so to speak.

However with ionic/angular I’m having trouble grasping the concept of extending a controller to do more than one thing. (or how do I tell a view to use more than one controller?)

I have a controller I’d like to use globally for switching languages and a modal controller for popping up a modal. How do i get these to jive together?

Take for instance the pets sample, it has a controller for “petindex” and “petdetail” - but the way my brain works currently is that there should be a single “pets” controller that then contains an “index” and “detail” directive inside of it.

2

A “controller that does more than one thing” is antithetical to the ideals of Angular - each controller should ideally do one and only one thing. Like Unix commands, think of Angular controllers as each having a particular job to do.

Having said that, there are leaky abstractions when you need to pass data back and forth between different controllers, so there’s a $rootScope that tends to get overloaded in most projects I’ve seen (Ionic included) but what are you gonna do.

It’s helpful to have an AppController on the body view that can handle device-specific setup and other global scaffolding and housekeeping.

Rather than having a modal controller, maybe think of it in terms of having a controller that does a certain thing - what’s in the modal? Think of controllers as nouns that do things to your views. So if your modal has a contact form, that would be your ContactFormController that has a scope method that launches a modal, etc.

Angular is nice in that you can use as much or as little of it as you need, too, and it plays well with other libraries (although I didn’t really get Angular until I tried to use it without jQuery which forced me to do everything the Angular way).

Like Rails, Angular is very opinionated, and its opinion differs from the Rails MVC concepts somewhat (although they’re more alike than not, really, except that Angular has a weak model layer).

1 Like
3

So essentially you can only do one thing per page/view/state? If i have a page/view/state (whatever you want to call it), named index; that index page can only have one controller assigned to it that does one specific thing?

The ionic example for popping up a modal uses a controller (so why would i not do the same). If i wanted to have a modal on index, I couldn’t also have a controller for switching the language (as it also uses a controller).

Sounds to me like controllers are useless in the sense of creating a mobile/web app that does more than one thing on a view; as the way you’re describing controllers is how I would expect the services to act.

Hate to say it but its starting to sound like I should abandon ionic/angular in favour of something better… I mean how complicated can it be to have a single page do 2 things?

4

You CAN have a ‘master’ controller for an app or a single view and then controllers for specific parts of a view. Whether or not it is best practice is debatable.

For example, I frequently use a “main” controller for the entire app. Then, on each view within the app, I have a view specific controller.

It really is up to you. You just can’t assign more than one controller to the same thing. Controllers must be nested:

Example :

<html ng-app="MyApp">
	<body ng-controller="MainController">

		<div ng-controller="Controller1">
		</div>

		<div ng-controller="Controller2">
		</div>

	</body>
</htm>

The MainController can handle generic functionality. Controller1 and Controller2 manage functionality specific to that div.

3 Likes
5

@Calendee perfect, this is exactly what I needed to get moving.

6

Can you give example how to write multiple controller in js file