My first foray into the MEAN world. I used yo angular to generate a bootstrapped angular application. Next I replaced the default content of the auto generated about.html with
<div ng-controller="AboutCtrl">
<ul>
<li ng-repeat="thing in awesomeThings">
{{ thing }}
</li>
</ul>
</div>
An except of the about.js controller is:
'use strict';
/**
* @ngdoc function
* @name clientApp.controller:AboutCtrl
* @description
* # AboutCtrl
* Controller of the clientApp
*/
angular.module('clientApp')
.controller('AboutCtrl', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
Related content from the index.html file are:
<body ng-app="clientApp">
.
.
.
<div class="container">
<div ng-view=""></div>
</div>
As I said, the only change I made to the entire application is to change the content of the about.html file.
I then use grunt serve to run the program which opens the application in a browser. When I visit the about page, there is nothing, blank. I have read a bit about angular but so far nothing I have read is giving me any ideas as to what I could be doing wrong.
When yo angular was doing its stuff, I noticed a red text that complained about package.json already existing, later on the process seemed to hang till I pressed I hit Enter, then it continued to overwrite the package.json file and proceeded to the end with the comment that everything completed without errors.
I sure will appreciate every help.
this in
angular.module('clientApp')
.controller('AboutCtrl', function () {
this.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
implies that you have to use controllerAs syntax:
<div ng-controller="AboutCtrl as about">
<ul>
<li ng-repeat="thing in about.awesomeThings">
{{ thing }}
</li>
</ul>
</div>