I am facing an issue where the state is reflected in the URL of the browser but the content of the page does not load when I click on a menu item. After researching, it seems like my states are declared correctly, and there are no errors in my code.
Below is the route.js file:
app.config(function config($stateProvider)
{
$stateProvider.state("index",{
url:"",
controller:"MainCtrl",
templateUrl:"templates/home/home.html"
}),
$stateProvider.state("development",{
controller:"EmployeeCtrl",
templateUrl:"templates/employee/employee.html"
});
})
In the home page, the list of menu items has links with href that specify the states. The index state is working as expected.
<ul class="nav navbar-nav">
<li class="active"><a href="#/development">Development</a></li>
<li><a href="#/design">Design</a></li>
<li><a href="#/exercise">Exercise</a></li>
<li><a href="#/humor">Humor</a></li>
</ul>
Here is the code from the employee.html page which should be displayed when the development state is active:
<div>
<input type="text" ng-model="searchText">
<table>
<tr ng-repeat="emp in employee.data | filter:searchText"></tr>
<td>{{emp.firstname}}</td>
<td>{{emp.lastname}}</td>
</table>
</div>