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/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.
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./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.
2 Answers
Reset to default 3You 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 bee
{{main.bigMesssage}}
Demo Plunkr
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/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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745457931a4628573.html
评论列表（0条）