Currently working on a small project to dive into AngularJS, and I'm facing some challenges with getting the routing to function properly. Despite following numerous tutorials, my code doesn't seem to be working as expected. If anyone could lend a hand in pinpointing the issue and helping me resolve it, I would greatly appreciate it.
Below is a snippet from my index file:
<!DOCTYPE html>
<html ng-app="danApp">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/test.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>View 1
<h1>View 1</h1>
<br><br><br><br>
<div>
<input type="text" ng-model="nameText" >
<ul>
<li ng-repeat="things in info | filter: nameText | orderBy:'name'">
Name: {{ things.name }} <br> Age: {{ things.age }} <br>
City: {{ things.city }}
<br>
</li>
</ul>
</div>View 2
<h1>View 2</h1>
<br><br><br><br>
<div>
<input type="text" ng-model="nameText" >
<ul>
<li ng-repeat="stuff in parents | filter: nameText | orderBy:'name'">
Name: {{ stuff.name }} <br> Age: {{ stuff.age }} <br>
City: {{ stuff.city }}
<br>
</li>
</ul>
</div>Lastly, here's my module, controllers, and routing code:
"use strict";
var danApp = angular.module('danApp', []);
danApp.controller("danCtrl", function($scope) {
$scope.info = [
{name: 'Daniel', age: '22', city: 'Clarksville'},
{name: 'Derek', age: '19', city: 'Jacksonville'},
{name: 'Emily', age: '18', city: 'Erin'},
{name: 'Denise', age: '27', city: 'Phoenix'},
];
});
danApp.controller("danCtrl2", function($scope) {
$scope.parents = [
{name: 'Lathan', age: '54', city: 'Stewart'},
{name: 'Candy', age: '54', city: 'Stewart'},
{name: 'Christine', age: '43', city: 'Erin'}
];
});
danApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'danCtrl',
templateUrl: 'views/view1.html'
})
.when('/view2',
{
controller: 'danCtrl2',
templateUrl: 'views/view2.html'
})
.otherwise({redirectTo: '/'});
});