AngularJS app not loading
I am trying to start an angularjs project, but for some reason I cannot figure out that it started correctly. This is probably some kind of mistake that I am blind to see. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebUX</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body ng-app="webux">
<section class="sidebar">
<nav class="page-nav">
<ul>
<li><a href="#/home" class="home"></a></li>
<li><a href="#/about" class="about"></a></li>
<li><a href="#/contact" class="contact"></a></li>
</ul>
</nav>
</section>
<section class="content">
<div class="slide" ng-view></div>
</section>
<script type="application/javascript" src="js/lib/angular.min.js"></script>
<script type="application/javascript" src="js/lib/angular-route.js"></script>
<script type="application/javascript" src="js/main.js"></script>
</body>
</html>
And the javascript:
var app = angular.module('webux', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
}]);
app.controller('HomeCtrl', function($scope) {
console.log($scope);
});
Also the console log in HomeCtrl does not start.
Update
Just add information:
- Console is empty
- All script files are correct
+3
source to share
1 answer
Ok, thank you for helping me, however I found a solution. As you can see in my example code, I am using <div class="slide" ng-view></div>
to specify where the views should be displayed. After checking the element several times, I found that chrome had stripped this empty property.
<div class="slide" data-ng-view
works (note the "data -").
+2
source to share