After countless hours of searching, the app's page still loads blank. The issue remains elusive despite using Angular 1.3.5 and Angular-route v1.2.28.
Below is the code snippet from index.html:
<html ng-app="myApp">
<head>
<script src="js/angulark.min.js"></script>
<script src="js/angular-routek.js"></script>
<script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'MainController',
templateUrl: 'views/nameView.html';
})
.when('/cityView',
{
controller: 'MainController',
templateUrl: 'views/cityView.html';
})
.otherwise({ redirectTo: '/' });
});
myApp.controller('MainController', ['$scope', function($scope) {
$scope.customers = [
{ name: 'Andre Queiroz', city: 'Rio de Janeiro' },
{ name: 'Fulano', city: 'Sao Paulo'},
{ name: 'Beltrano', city: 'Curitiba' }
];
$scope.addCustomer() = function () {
$scope.customers.push(
{ name: $scope.newCustomer.name, city: $scope.newCustomer.city }
);
};
}]);
</script>
<title>Meu Aplicativo</title>
</head>
<body>
<div>
<!-- Placeholder for views -->
<div ng-view> </div>
</div>
</body>
</html>This snippet represents nameView.html
<div class="container">
<div ng-controller="MainController">
<div>
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name"/>
</div>
<br />
<ul>
<li ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div
<div>
<p>Customer name:</p>
<input type="text" ng-model="newCustomer.name" />
<p>Customer city:</p>
<input type="text" ng-model="newCustomer.city" />
<button ng-click="addCustomer()">Add customer </button>
<a href="#/view2">View 2</a>
</div>
</div>
</div>The cityView.html mirrors the structure of nameView.html but excludes the addCustomer functionality. Initially structured into separate module files, the code has been consolidated into one file to troubleshoot.