I'm trying to brush up on my Angular skills, but I'm having trouble grasping certain concepts. The "controller as" pattern is giving me trouble - it's supposed to be simpler than using $scope, but it's not working for me.
Specifically, I can't seem to get a basic variable to display in my HTML.
Let's take a look at the 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 (simplified version)
<!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>
Interestingly enough, when I check the browser source code, it doesn't render "{{ main.bigMessage }}" - it just shows nothing. But the {{ ... }} part is definitely in the code.