1

I'm trying to set the page title dynamically on page load. Here is my code:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta http-equiv="content-type" charset="utf-8" />
    <title ng-bind="title"></title>
    <style type="text/css">
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
    </style>
</head>
<body style="font-family:sans-serif" ng-controller="clicks">

    <h1>Hello <span ng-cloak class="ng-cloak">{{ user.name }}</span></h1>
    <input type="text" ng-model="user.name" placeholder="Enter a name here" >

    <h2>Clicked {{ counter.clicks }} times</h2>
    <button ng-click="count()" >Click</button>

    <script src="vendor/angular/angular.js"></script>
    <script>
        angular.module("myApp", ["myApp.controllers"]);

        angular.module("myApp")
            .run(function($rootScope) {
                $rootScope.title = "Angular Learning 1";
            });

        angular.module("myApp", [])
            .controller("clicks", function($scope) {
                $scope.user = {
                    name: "Sithu"
                }
                $scope.counter = { clicks: 0 };
                $scope.count = function() {
                    $scope.counter.clicks += 1;
                }
            });
    </script>
</body>
</html>

I suppose that setting $rootScope.title in run() could update the title in page load, but it doesn't.

Sithu
  • 4,752
  • 9
  • 64
  • 110
  • Will you be setting the `title` property in each controller? – Christian Phillips Apr 12 '15 at 17:27
  • 2
    Did you see [this question](http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view)? – Martin Apr 12 '15 at 17:29
  • @Martin Oh, yes. I just found it. But it is not as simple as what I want to do as a Angular beginner. I have not studied yet about routing. This is my first coding of AngularJS. As @dfsq 's answer, moving `[]` to the correct `angular.module` call solved the problem. It is more clear to me. – Sithu Apr 13 '15 at 06:31

1 Answers1

1

It doesn't work for you because you overwrite entire myApp module when you declare a controller with angular.module("myApp", []). This is setter syntax, however you need getter to retrieve already created module.

Correct code is:

angular.module("myApp")
// Note no [] here --^
    .controller("clicks", function($scope) {
        $scope.user = {
            name: "Sithu"
        }
        $scope.counter = {
            clicks: 0
        };
        $scope.count = function() {
            $scope.counter.clicks += 1;
        }
    });

Another thing you can improve. You don't need ngBind for title, no need of one more binding. Just set document.title:

.run(function() {
    document.title = "Angular Learning 1";
});
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • Thank you. I removed `[]` from the third `angular.module`, added `[]` to the second `angular.module` and deleted the first `angular.module` line. It solved the problem. +1 for `document.title`. – Sithu Apr 13 '15 at 06:33
  • However, I still need to understand about `[]` overwriting entire `myApp` module. – Sithu Apr 13 '15 at 06:36
  • 1
    When you use `angular.module('app', [])` with two parameters it creates *new* module. So if you previously had module with the same name it will be overwritten with all its `.config`, `.run`, `.controller`, etc. blocks. – dfsq Apr 13 '15 at 06:41