I'm currently diving into the world of learning the mean stack and facing some challenges with Angular and routing. In my JavaScript file below, I have the routing code stored within the app.config module.
var app = angular.module('doorSensorReadings', ['ui.router']);
app.factory('readings', ['$http', function($http){
var o = {
readings: []
};
o.getAll = function() {
alert("test");
};
}])
app.controller('MainCtrl', ['$scope', 'readings', function($scope, readings){
$scope.readings = readings.readings;
$scope.addReading = function(){
$scope.readings.push({id: 2, name:"Door 4", open: true})
}
}]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl',
resolve: {
Promise: ['readings', function(readings){
return readings.getAll();
}]
}
});
$urlRouterProvider.otherwise('home');
}]);
Upon page load, I anticipate the code in the app.factory to trigger and display an alert box containing "test." However, I can't seem to figure out why the code isn't executing, and there are no errors displayed when the page loads. Currently, it just shows a blank page. The "ejs" file is listed below:
<html>
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="javascripts/angularApp.js"></script>
</head>
<body ng-app="doorSensorReadings">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Door Sensor</h1>
<div ng-repeat="reading in readings">
{{reading.id}}, {{reading.name}}, {{reading.open}}
</div>
<button ng-click="addReading()">Post</button>
</div>
</script>
</body>
</html>
If you have any insights or suggestions on why the alert isn't firing upon page load, I would greatly appreciate your input.