Angular variable not being displayed in HTML

Question

I am trying to refresh my knowledge of Angular, and I can't seem to understand a few concepts, the "controller as" pattern doesn't seem to be working, for example, even though it seems to be much more simple than $scope.

I can't get a simple variable to show up in my HTML.

Here are two pieces of code in question:

app.js

angular
    .module('routerApp', [''])
    .controller('mainController', function () {
        'use strict';
        var vm = this;
        vm.bigMessage = 'A smooth sea never made a skilled sailor';
    })

index.html (stripped down heavily)

<!DOCTYPE html>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body class="container" ng-app="routerApp" ng-controller="mainController as main">
        <h1>{{ main.bigMesssage }}</h1>
    </body>
</html>

The interesting thing is that the browser doesn't even render "{{ main.bigMessage }}", instead it shows nothing. Yet, in the source code there is the {{ ... }} part.

Pankaj Parkar · Accepted Answer · 2015-06-21 09:11:14Z

3

You had added '' in dependency array bracket which is wrong Angular is going to search for dependency with name '' & obiviously there would not be any dependancy find with that name & that why angular is throwing $injector error in console. , as you don't have any dependency, it should be []

Code

angular
.module('routerApp', []) //<--change here
.controller('mainController', function () {
    'use strict';
    var vm = this;
    vm.bigMessage = 'A smooth sea never made a skilled sailor';
})

Also you have had typo in {{main.bigMesssage}} here bigMesssage should be bigMessage then it would become

{{main.bigMesssage}}

Demo Plunkr

edited Jun 21, 2015 at 9:11

answered Jun 21, 2015 at 9:06

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zcserei Over a year ago

thanks pankajparkar! I've been actually trying to add and remove things there, and finally forgot to remove the quote marks, however, that wasn't the problem as I had tried both ways. I can't even believe, I've been spending the last hour trying to find a... typo. My eyes are probably too tired for this already, thanks for spotting my mistake.

Pankaj Parkar Over a year ago

@zcserei that is the problem..check my updated description..you also had typo on html.. Glad to help you.. Thanks :)

Shubham Nigam · Accepted Answer · 2015-06-21 09:22:24Z

you have written everything is right except your bigmessage variable spell

 <body class="container" ng-app="routerApp" ng-controller="mainController as main">
        <h1>{{ main.bigMessage }}</h1>
    </body>

controller

angular
    .module('routerApp', [])
    .controller('mainController', function () {
        var vm = this;
        this.bigMessage = 'A smooth sea never made a skilled sailor';
    })

check this out fiddle: https://jsfiddle.net/bjwov6f1/1/

It was not finding your variable that why it was not showing anything

for more learning go through this link :https://thinkster.io/egghead/experimental-controller-as-syntax

Collectives™ on Stack Overflow

Angular variable not being displayed in HTML

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related