Geek Answers Handbook

AngularJS - application architecture

I am creating my first AngularJS application.

I want to dynamically change the page title when changing the route, so I first tried to structure my application as:

<html ng-app>

I want to have a page level controller, and then have sub-controllers below that.

So, I started with:

var app = angular.module("squareUpYourSavings", ["page1", "page2", "..."]);

app.controller('GlobalController', ['$scope', '$rootScope', function GlobalController($scope, $rootScope) {

    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });

    $rootScope.$on("$locationChangeStart", function (event, nextLocation, currentLocation) {
            console.log('nextLocation :: ' + nextLocation);
            console.log('currentLocation :: ' + currentLocation);
        });

But that does not work. (I don’t know why) I have a navigator that points to directories at the directory level, and the DOG view works, but the <title> does not change. Also, the $ locationChange listener does not fire. As if this top-level controller is not even audible at all.

So, I changed the <html> element to indicate the top level controller:

<html id="ng-app" ng-controller="GlobalController">

Now it works, but the route seems to work twice. The initial page load shows this:

nextLocation :: location.html#/
currentLocation :: location.html#/

, , , :

nextLocation :: location.html#savings-video         // expected
currentLocation :: location.html#/                  // expected
nextLocation :: location.html#/savings-video/       // not expected
currentLocation :: location.html#savings-video      // not expected

? ?

,

+4
1

, , , , : run:

var app = angular.module("squareUpYourSavings", ["page1", "page2", "..."]);
app.run(function($rootScope) {
     $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
         $rootScope.title = current.$$route.title;
     });
});

, , , "":

<html ng-app>
0

More articles:


All Articles