How rearrange the code

hi can someone give the right step to rearrange the code??? i need to put every controller in a view because now i have only the controller in app.js and in controller.js for all the views and it is a mess

Hust some advice, some trick to do it in the right way. Thanks


Create a folder with name ‘controllers’ and in this folder put all your controller files

1 Like

Sometimes, when you are still in the learning-zone, it is better to just start out clean.

Read up on your knowledge of AngularJS, UIRouter and decide first on how you’re gonna structure your project.
Then start a new ionic project and try again…

ok…i can’t start it again…but…i’ll try to create a folder, after in index i set all the js like this?ù

and in app.js in the .config i put a controller for every state…it is right?

and all the controllers start in this way?
//file module.js
var starter = angular.module(‘starter’, [‘ionic’]);

//file controller/some.js

//file controller/another.js

yeah that’s the idea … for style guide programming AngularJS you could begin with this as reference


In your index.html you can setup links to your .js files like so:
<script src="js/controllers.js"></script>

Then, in controllers.js, set it up something like this:
angular.module('starter.controllers', []) .controller('pageOneCtrl', function($scope,$ionicPlatform, $state, ...whatever) { your controller code... }) .controller('pageTwoCtrl', function($scope,$ionicPlatform, $state, ...whatever) { your controller code... })

Now you can access it through your stateProvider in app.js like so:
.state('app', { url: "/app", abstract: true, templateUrl: "templates/app.html" }) .state('app.pageOne', { url: '/pageOne', views: { 'page-one':{ templateUrl: 'templates/pageOne.html', controller: 'pageOneCtrl' } } }) .state('app.pageTwo', { url: '/pageTwo', views: { 'page-two':{ templateUrl: 'templates/pageTwo.html', controller: 'pageTwoCtrl' } } });

1 Like

thanks so much to everybody, i’ll try you advice

sorry, but
angular.module(‘starter.controllers’, [])
.controller(‘pageOneCtrl’, function($scope,$ionicPlatform, $state, …whatever) {
your controller code…
.controller(‘pageTwoCtrl’, function($scope,$ionicPlatform, $state, …whatever) {
your controller code…

is in the same file js?..i want to split controller in single controller file

As @coreelements also poined out, I recomend strongly to read up on AngularJS an UI-routing since this is pretty basic stuff you should get familiar with first.

1 Like

you can either have multiple controller files and point to each of them from your index.html,
or have just one controllers.js file and contain all controllers in there. It’s just how you like to structure it.

yeah … i split all my controllers in seperate files … after that I have a gulp task to join them to 1 file.

I used

for my workflow

Ok i’ll do it thank to all…but i need your help again…
i have the login controller in the controller.js it’s call 'AppCtrl’
in another controller ‘odlCtrl’ i have 2 http.get and two query to populate tables and show data in views,
i need to do this get at the login how can i pass function (and data…$rootScope?) between controller???

Will better if you move http.get to service

For passing data between controller use events

This is a small example of how they work

// firing an event upwards
$scope.$emit(‘myCustomEvent’, ‘Data to send’);

// firing an event downwards
$scope.$broadcast(‘myCustomEvent’, {
someProp: ‘Sending you an Object!’ // send whatever you want

// listen for the event in the relevant $scope
$scope.$on(‘myCustomEvent’, function (event, data) {
console.log(data); // ‘Data to send’

1 Like

thanks, but for create service is the same that create controller?? another js file ?? i can have more service?
because i have this one for the auth
angular.module(‘’, [‘ngCookies’])
.factory(‘Auth’, function ($cookieStore) {
var _user = $cookieStore.get(‘starter.user’);
var setUser = function (user) {
_user = user;
$cookieStore.put(‘starter.user’, _user);

return {
setUser: setUser,
isLoggedIn: function () {
return _user ? true : false;
getUser: function () {
return _user;
logout: function () {
_user = null;

You can have unlimited number of services

ooook… just declare in index and inject in the controller???

Continuing the discussion from How rearrange the code:


oh … never knew about $emit …

nice to learn new things :slight_smile:

Or, you can try out this template I made to make it easy to develop in AngularJS. The structure and coding standards borrow heavily from John Papa.

Do note the template is not in Ionic thus will not have hot reload (didn’t had the time to add it in yet) but it have a server built in.


  • Must have npm installed
  • Must have gulp installed globally (npm install -g gulp)

To get started:

  1. git clone the project
  2. run npm install (this will install all npm & bower modules)
  3. Once done, you can run “npm start” to start a simple HTTP server.

In www/main-view has a pregenerated view. Don’t touch this first.

To get started immediately, checkout www/modules/sample. Notice the module is “Sample” in “sample.js”

Add “Sample” in www/modules/app.js under “Directives” (as shown below).


Run “gulp dev” on your command line. Then, refresh your page. You will see sample.html is loaded as the first page.

Any question you can ask me here :smile:

1 Like

Thank you so much…for the next project i’ll use this schema…but for now i need to change a controller into a service, because i make an http get an now the app doesn’t wait for data, because i don’t know jow to use promise, deferred, q… So i need to make this change. I’m in huge trubles!!!