CODEWITHSUNDEEP
angularjs
user2917629
user2917629

Reputation: 942

angular: updating a view without page reload

I have a rootScope json array that's viewed is several controllers, and gets updated in yet another controller. The json array contains urls that get updated. The view controllers show updated urls about half the time, but if I reload the page, I do get updated views 100% of the time. I have tried using $scope.$apply() and $timeout, but they made no difference.
Could someone please tell me what angular tools are out there for this? I'm hoping there is a simple approach to it.

Upvotes: 0

Views: 1005

Answers (1)

Dominic Aquilina
Dominic Aquilina

Reputation: 617

Going off of my earlier comment:

Index

<!doctype html>
<html ng-app="myapp">
  <head>
    <!--Head stuff-->
  </head>

  <body>
    <div ng-view=""></div>

    <!-- Scripts, other stuff -->
  </body>
</html>

Main Script

'use strict';

angular
.module('myapp', [
    //...
    'ngRoute',
    //...
  ])
.config(function (..., $routeProvider, ...) {
  $routeProvider
    .when('/404', {
      templateurl: '404.html',
      controller: 'ErrorCtrl',
      controllerAs: 'errorCtrl',
      title: 'You are lost'
    })
    .when('/', {
      templateUrl: 'views/home.html',
      controller: 'HomeCtrl',
      controllerAs: 'homeCtrl',
      title: 'Home'
    })
    .when('/contact', {
      templateUrl: 'views/contact.html',
      controller: 'ContactCtrl',
      controllerAs: 'contactCtrl',
      title: 'Contact Us'
    })
    .otherwise({
      redirectTo: '/404'
    });

  //...
})
.run (function (...) {
  //...
});

Usage

<a href="/contact">Contact Us</a>

You'd be taking all of the base template code that's common to your pages and be including that on index. Basically, the stuff that doesn't change will always be there. Otherwise, take it off of the main page and put it into a template file with its own controller. Alternatively, have some shared controllers and just use the views as templates, then shovel all of the functionality into directives. I actually prefer the latter method, but the former is shown above.

What's noteworthy about this solution is that the page is only actually loaded once. Since you stay on the index whenever you navigate to a different view, you only need to grab the HTML for the new template from your server and inject it into the view (which ngRoute takes care of). I believe that by default you'll have a # in your URL, so you'll probably want to enable HTML5 mode.$locationProvider into your config function and then add this line:

$locationProvider.html5Mode ({ enabled: true });

You also need to add a base to the head element of your index file:

<base href="/" />

Homework: Routes tutorial, HTML5 mode

If you use Grunt, you might also want to look into ngTemplates. It can really boost performance.

Upvotes: 1

Related Questions