# Code organization

**URL:** <https://forum.ionicframework.com/t/code-organization/6060>\
**Category:** ionic-v1\
**Created:** [June 25, 2014, 8:37am UTC](https://forum.ionicframework.com/t/code-organization/6060 "2014-06-25T08:37:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kai23](https://avatars.discourse-cdn.com/v4/letter/k/c89c15/32.png) [@kai23](https://forum.ionicframework.com/u/kai23)\
**Post date:** [June 25, 2014, 8:37am UTC](https://forum.ionicframework.com/t/code-organization/6060/1 "2014-06-25T08:37:09Z")

</div>

Hello all,

I’m trying to use this code organization [AngularJS Code Organization](http://calendee.com/2013/12/29/angularjs-code-organization/)  
But I fail. I’m pretty new to angularJS and ionic, but I want something neat from the beginning, and not an only controller file with all my controllers in.

Actually, I have this file structure :

which is the way I’m trying to go to.

I have a very simple html file :

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->

    <!-- GRUNTSTART -->

    <script src="/js/controllers/MainController.js"></script>
    <script src="/js/controllers/AuthController.js"></script>
    <script src="/js/controllers/TimelineController.js"></script>

    <script src="/js/app.js"></script>

    <!-- GRUNTEND -->

  </head>
  <body ng-app="kms">
        <ion-nav-bar class="bar-positive nav-title-slide-ios7">
            <ion-nav-back-button class="button-icon ion-arrow-left-c">
            </ion-nav-back-button>
        </ion-nav-bar>
             
        <ion-nav-view animation="slide-left-right"></ion-nav-view>
  </body>
</html>

```

Just a simple nav bar and a nav-view.

As I read in the documentation :

> Then on app start, $stateProvider will look at the url, see it matches the index state, and then try to load home.html into the `<ion-nav-view>`

So here we go, here is my app.js file :

```
// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'

var kms = angular.module('kms', ['ionic', 'app.controllers']);

kms.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

/**
 * Define application-routes using ui-router module
 */
kms.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/layout/tabs.html'
  })

  .state('app.home', {
    url: '/app/home',
    templateUrl: 'templates/user/timeline.html',
    controller: 'TimelineController'
  })

  ;

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/home');

});

```

Then on app start, `$stateProvider` will look at the url, see it matches the `app.home` , and then try to load `templates/layout/tabs.html` and then `templates/user/timeline.html` into the `<ion-nav-view>`

my tabs.html file :

```
<ion-tabs class="tabs-icon-top">

  <!-- Pets Tab -->
  <ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  <!-- Adopt Tab -->
  <ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends">
    <ion-nav-view name="tab-friends"></ion-nav-view>
  </ion-tab>

  <!-- About Tab -->
  <ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>

```

(nothing really new) and my timeline file :

```
<ion-view title="{{title}}">
	<ion-content>
	  Hello Timeline !
	</ion-content>
</ion-view>

```

As you can see, I’m trying to use a very simple exemple 😄

For the controllers file, here is my `MainController.js`

```
angular.module('app.controllers',[]);

```

And the `TimelineController.js`

```
angular.module('app.controllers')
	.controller('TimelineController', function($scope) {
		$scope.title = "Timeline"
	})

```

But I have a blank page. Just a blank page.  
So my question is : where is my mistake ? No error is showing up in the Chrome Developper Tool, my previous error was that « TimelineController » wasn’t loaded, and now it’s all quiet.

If you have a github repository or anything that could help me to go further, would be very very nice 🙂

Many thanks in advance

---

<div class="post-metadata">

**Author:** ![Bonda](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bonda/32/7841_2.png) [@Bonda](https://forum.ionicframework.com/u/Bonda)\
**Post date:** [June 25, 2014, 8:47am UTC](https://forum.ionicframework.com/t/code-organization/6060/2 "2014-06-25T08:47:04Z")

</div>

Try some `console.log()` on your `MainController.js` by declaring a controller like you’ve done in `TimelineController.js`.

Also, the routes are missing on your app.js? You should have a code like this example:

```
.config(function($stateProvider, $urlRouterProvider) {

// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider

	.state('home', {
	  url: '/home',
	  templateUrl: 'templates/home.html',
	  controller: 'MainCtrl' //(<-- this is the controller name in MainController.js)
	})

	.state('about', {
	  url: '/about',
	  templateUrl: 'templates/about.html',
	  controller: 'TimelineController'
	});

// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');

});
```

---

<div class="post-metadata">

**Author:** ![kai23](https://avatars.discourse-cdn.com/v4/letter/k/c89c15/32.png) [@kai23](https://forum.ionicframework.com/u/kai23)\
**Post date:** [June 25, 2014, 9:16am UTC](https://forum.ionicframework.com/t/code-organization/6060/3 "2014-06-25T09:16:44Z")

</div>

Hello !

I’m afraid I don’t really understand what you mean…

In my MainController.js, I only have this

```
angular.module('app.controllers',[]);

```

just like mentioned if you follow the link above, and also here : [http://stackoverflow.com/questions/24087129/angular-module-organization-architecture](http://stackoverflow.com/questions/24087129/angular-module-organization-architecture)  
If I understand, tell me if I’m wrong, it’s like registering a new module named « app.controllers », and then if I write :

```
angular.module('app.controllers')
	.controller('TimelineController', function($scope) {
		$scope.title = "Timeline"
	})

```

It’s like saying : in the module app.controllers, I have a controller named “TimelineController”.

At last, writing :

```
var kms = angular.module('kms', ['ionic', 'app.controllers']);

```

Is saying « I need to use the module « app.controllers ».

That’s why I wrote this in the index.html :

```
<script src="/js/controllers/MainController.js"></script>
<script src="/js/controllers/AuthController.js"></script>
<script src="/js/controllers/TimelineController.js"></script>

<script src="/js/app.js"></script>

```

I’m really new to AngularJS, so I don’t know if everithing is clear ^^

---

<div class="post-metadata">

**Author:** ![kai23](https://avatars.discourse-cdn.com/v4/letter/k/c89c15/32.png) [@kai23](https://forum.ionicframework.com/u/kai23)\
**Post date:** [June 25, 2014, 9:33am UTC](https://forum.ionicframework.com/t/code-organization/6060/4 "2014-06-25T09:33:09Z")

</div>

Alright, I found a way to my answer !

My error was in the route,

```
.state('app.home', {
  url: '/app/home',
  templateUrl: 'templates/user/timeline.html',
  controller: 'TimelineController'
})

```

is wrong, as I saw in the tabs exemple. The good way is like this :

```
.state('app.home', {
  url: '/home', <-- HERE
  templateUrl: 'templates/user/timeline.html',
  controller: 'TimelineController'
})

```

Now, I have the tabs, but still no nav bar nor Timeline view. Still investigate ! 😄

---

<div class="post-metadata">

**Author:** ![kai23](https://avatars.discourse-cdn.com/v4/letter/k/c89c15/32.png) [@kai23](https://forum.ionicframework.com/u/kai23)\
**Post date:** [June 25, 2014, 9:42am UTC](https://forum.ionicframework.com/t/code-organization/6060/5 "2014-06-25T09:42:54Z")

</div>

Found it !

Still in this route :

```
.state('app.home', {
  url: '/home',
  views: {
    'tab-home': {
      templateUrl: 'templates/user/timeline.html',
       controller: 'TimelineController'
    }
  }

```

And here we are ! I feel like I can start playing with ionic / angular now 🙂