Below Is the code that Im getting problem with:
//Main Codes for the Diary App
(function () {
//Create a new diary app
var diary = angular.module('diary', ['ngRoute']);
//Define a Router for the App
diary.config(function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/wall.php',
controller: 'DiaryWallController'
}).
when('/images', {
templateUrl: 'partials/images.html',
controller: 'DiaryImagesController'
}).
when('/audio', {
templateUrl: 'partials/audio.html',
controller: 'DiaryAudioController'
}).
otherwise({
redirectTo: '/'
});
});
//Define Controllers
diary.controller('DiaryWallController', function($scope) {
$scope.message = "Lets do this!! Wall of this site";
});
diary.controller('DiaryImagesController', function($scope) {
$scope.message = "Lets do this!! Images of this site";
});
diary.controller('DiaryAudioController', function($scope) {
$scope.message = "Lets do this!! Audio of this site";
});})();
I am getting this Unknown TypeError: Cannot read property '1' of NuLL. It successfully fetch the files specified in the route but it doesn't display in the site.. I have checked the console:
XHR finished loading: GET "http://localhost/mobile%20diary/app/partials/images.html".
But the contents of the loaded page is not displayed in the site. I check in resources and in there the images.html file is loaded and I can see the file preview but it is not shown in the site.
Below is the HTML Shell file:
<!DOCTYPE html>
<html ng-app="diary">
<head lang="en" ng-controller="">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
</head>
<body>
<header>
<nav class="menu-nav">
<ul>
<li class="menu-buttons"><a href="#" id="selected"><i class="fa fa-newspaper-o"></i></a></li>
<li class="menu-buttons"><a href="#images"><i class="fa fa-file-text-o"></i></a></li>
<li class="menu-buttons"><a href="#audio"><i class="fa fa-image"></i></a></li>
<li class="menu-buttons"><a href=""><i class="fa fa-microphone"></i></a></li>
<li class="menu-buttons"><a href="" id="selected"><i class="fa fa-navicon"></i></a></li>
</ul>
</nav>
</header>
<div ng-view>
</div>
<script src="js/angular.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I also had this same error and similar to the comment from @ChanX I had an error in an ng-controller attribute. In my case, I had accidentally added a name of a css class that I had intended to put in the class attribute to the ng-controller attribute by mistake.
My hypothesis is that you might see this error any time there is a problem parsing an ng-controller attribute. Anyway, I sure am glad I found this on SO as it was a real head-scratcher. Would be nice if the error message was more informative.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With