CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerionic-framework
redrom
redrom

Reputation: 11642

ionic how to add blank page as home page of the app?

I would like to add new page into default ionic app with tabbed menu and display this page as the default page of the app.

Here is how I tried to do that: I added new state into app.js

.state('home', {
          url: '/home',
          views: {
              'home': {
                  templateUrl: 'templates/home.html',
                  controller: 'HomeCtrl'
              }
          }
    })

and set default router to home page 

 $urlRouterProvider.otherwise('/home');

And template file:

<ion-view title="Home">
    <ion-content class="padding">
        <h1>Home page</h1>
    </ion-content>
</ion-view>

Now, if I am trying to go to http://myapp.loc/index.html#/home I got always black page without content.

What I'm doing wrong?

Thanks for any help.

EDIT: In order to Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined I'm adding related code.

Added controllers:

angular.module('starter.controllers', [])

.controller('HomeCtrl', function($scope, $location) {

})
.controller('DashCtrl', function($scope) {
})

.controller('FriendsCtrl', function($scope, Friends) {
  $scope.friends = Friends.all();
})

.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
  $scope.friend = Friends.get($stateParams.friendId);
});

Order in index.html is following

<script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/controllers/overall_stats.js"></script>
    <script src="js/services.js"></script>

Upvotes: 4

Views: 7788

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

I would say, that solution here should be surprisingly simple:

  • Remove the view name 'home'. In fact change it to '' (empty string)

There is a working plunker with this change?

.state('home', {
      url: '/home',
      views: {
          // instead of this
          // 'home': {

          // use this
          '': {
              templateUrl: 'tpl.home.html',
              controller: 'HomeCtrl',
          }
      }
})

Why? Because most likely the index.html would look like this:

<body ng-app="myApp" >

    ...
    <ion-nav-view></ion-nav-view>

</body>

And that means that the view name is "", almost like <ion-nav-view name=""></ion-nav-view>

Check that in action here

EXTEND based on the question extension

if we use ionic-like approach with separated file and module for controllers:

// inside of the index.html
<script src="js/controllers.js"></script>

// the controller.js
angular.module('starter.controllers', [])

We must be sure, that our app.js does contain that module as well:

angular.module('myApp', [
   'ionic',
   'starter.controllers' // this is a MUST
])

Upvotes: 4

Related Questions