Managing the view with an Ionic 'blank' app


#1

I have just whipped up a quick app using the ‘blank’ template, as I only wanted a single screen with a few icons on it to perform certain tasks.

All seems to be working well - I attached the controller directly to the <body> of the main HTML of the app.

The only issue I am having is managing the view. I need to detect when the user switches back to the app, and also when they close it down. I have set up:

$scope.$on('$ionicView.enter', function() { ... });

and

$scope.$on('$destroy', function() { ... });

but then both seem to be ignored when the app is selected or closed down. Am I missing something here?

Do I NEED to have an <ion-view> directive in my HTML ?


#2

You can use some thing like this in your index.html file

<body ng-app="myapp">
  <ion-nav-view></ion-nav-view>
</body>

And managing the view and routes is similar to below

$stateProvider
  .state('page1', {
    url: '/page1',
    templateUrl: 'templates/page1.html',
    controller: 'Page1Ctrl'
  })
  .state('page2', {
    url: '/page2',
    templateUrl: 'templates/page2.html',
    controller: 'Page2Ctrl'
  })

And in each controller you can have

$scope.$on('$ionicView.enter', function() { ... });

to check whether that particular page entered or not. And in ionic, the views will not be refreshed for the second time. If you want to refresh the view, you can use some thing like

$state.go($state.current, {}, {reload: true});

And also use cache : false in the app.js file like

$stateProvider
  .state('page1', {
    url: '/page1',
    cache: false,
    controller: 'Page1Ctrl',
    templateUrl: 'templates/page1.html'
})

Is this you are expecting or some thing else?


#3

Hi Rajeshwar, and thanks for your detailed reply.

Yes, this is the right track. I didn’t have an <ion-nav-view> directive in my code, just an <ion-view> section.

I was wondering if I would have had to set up a $stateProvider to handle the view events etc.?! The blank template does not scaffold any of that code like the tab or sidebar templates, so I was assuming we wouldn’t need it if only using a single view for my app.

I had set up ng-controller="MyController" in the <body> tag, which nicely linked the view to my controller. Displayed $scope variables etc behave as they should.

However, it looks like view event handling MAY indeed require $stateProvider set up? Though I cannot see the logic behind it?


#4

Even if it is a single page app, i suggest you to use the $stateProvider, which helps you configure the routes, controllers, templates and the caching mechanism.