Code organization

ionic-v1
1

Hello all,

I’m trying to use this code organization 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 :smile:

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 :slight_smile:

Many thanks in advance

2

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');

});
3

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
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 ^^

4

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 ! :smile:

5

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 :slight_smile: