Angular js routing not loading after using yeoman generator - angularjs

Question

I've used yeoman generator to generat my app and i've decided to copy my app in a clean folder but seams that the rounting is not working as expected, the templates ain't loading at all
My app js
'use strict';
angular
.module('angularJsApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'main',
controllerAs: 'mainController'
})
.when('/users', {
templateUrl: 'views/users.html',
controller: 'main',
controllerAs: 'mainController'
})
.when('/active_users', {
templateUrl: 'views/active_users.html',
controller: 'second',
controllerAs: 'secondController'
})
.otherwise({
redirectTo: '/'
});
});
Controllers
'use strict';
// users factory
angular.module('angularJsApp').factory("myFactory", function() {
var existingEntries = JSON.parse(localStorage.getItem("allEntries"));
var persoane = existingEntries;
var factory = {};
factory.getPersons = function() {
return {
existingEntries: existingEntries,
persoane: persoane
};
}
return factory;
});
// modules
angular.module('angularJsApp').controller('main', function($scope, myFactory) {
var dataMain = this;
$scope.adaugaperson = function() {
var name = $scope.newName;
var lastname = $scope.newLastName;
var tel = $scope.newPhone;
var email = $scope.newEmail;
var age = $scope.newAge;
var gender = $scope.newGender;
var entry = {
"name": name,
"lastname": lastname,
"tel": tel,
"email": email,
"age": age,
"gender": gender,
"isChecked": false
};
// sf not having any entry, crate
if ($scope.existingEntries == null) $scope.existingEntries = [];
localStorage.setItem("entry", JSON.stringify(entry));
// save allEntries back to local storage
$scope.existingEntries.push(entry);
localStorage.setItem("allEntries", JSON.stringify($scope.existingEntries));
// reset the form
$scope.newName = '';
$scope.newLastName = '';
$scope.newPhone = '';
$scope.newEmail = '';
$scope.newAge = '';
$scope.newGender = '';
};
// get persons
initPersons();
function initPersons() {
$scope.persoane = myFactory.getPersons().persoane;
$scope.existingEntries = myFactory.getPersons().existingEntries;
}
// remove person
$scope.remove = function(indexNumber) {
$scope.existingEntries.splice(indexNumber, 1);
localStorage.setItem("allEntries", JSON.stringify($scope.existingEntries));
}
// var for index targeting
var indexValue = undefined;
// populate form
$scope.populate = function(indexNumber) {
indexValue = indexNumber;
$scope.newName = $scope.existingEntries[indexNumber]["name"]
$scope.newLastName = $scope.existingEntries[indexNumber]["lastname"];
$scope.newPhone = $scope.existingEntries[indexNumber]["tel"];
$scope.newEmail = $scope.existingEntries[indexNumber]["email"];
$scope.newAge = $scope.existingEntries[indexNumber]["age"];
$scope.newGender = $scope.existingEntries[indexNumber]["gender"];
}
// save edited user
$scope.editUser = function(indexNumber) {
indexNumber = indexValue;
$scope.existingEntries[indexValue]["name"] = $scope.newName;
$scope.existingEntries[indexValue]["lastname"] = $scope.newLastName;;
$scope.existingEntries[indexValue]["tel"] = $scope.newPhone;
$scope.existingEntries[indexValue]["email"] = $scope.newEmail;
$scope.existingEntries[indexValue]["age"] = $scope.newAge
$scope.existingEntries[indexValue]["gender"] = $scope.newGender;
$scope.newName = "";
$scope.newLastName = "";
$scope.newPhone = "";
$scope.newEmail = "";
$scope.newAge = "";
$scope.newGender = "";
localStorage.setItem("allEntries", JSON.stringify($scope.existingEntries));
}
// active users state
$scope.activeUsers = function(indexNumber) {
indexValue = indexNumber;
$scope.boolVal = $scope.existingEntries[indexNumber]["isChecked"];
if ($scope.boolVal === false) {
$scope.existingEntries[indexNumber]["isChecked"] = true;
} else {
$scope.existingEntries[indexNumber]["isChecked"] = false;
}
localStorage.setItem("allEntries", JSON.stringify($scope.existingEntries));
}
});
// controler for users active
angular.module('angularJsApp').controller('second', function($scope, myFactory) {
init();
function init() {
$scope.persoane = myFactory.getPersons().persoane;
$scope.existingEntries = myFactory.getPersons().existingEntries;
}
});
HTML
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="angularJsApp">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">angularJs</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li><a ng-href="#!/active_users">Active Users</a></li>
<li><a ng-href="#!/users/">Users</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div ng-view>
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="components/jquery/dist/jquery.js"></script>
<script src="components/angular/angular.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>

Answer 1

Remove ng-app directive from your html tag which has no module specified, apparently it isn't allowing your ng-app="angularJsApp" placed on body tag.
From Docs
Only one AngularJS application can be auto-bootstrapped per HTML
document. The first ngApp found in the document will be used to define
the root element to auto-bootstrap as an application.
Also you have to add angular-route.js right after angular.js
<script src="components/angular/angular.js"></script>
<script src="components/angular/angular-route.js"></script>