I am currently working on an AngularJs app with index.html as the start-up page. By default, the projects view is displayed, and at the top of the page, there is an icon to show todo items for logged-in users using Bootstrap's data-toggle dropdown. However, I am facing an issue where clicking the todo link does not display the partial view (todo.html). As a newcomer to the world of Angular, I appreciate your patience if there are any rookie mistakes in my code. Here is the relevant code snippet:
Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head></head>
<body>
<a data-toggle="dropdown" class="dropdown-toggle" ui-sref=".todo">
<i class="icon-tasks"></i>
<span class="badge badge-grey">4</span>
</a>
<div ng-view></div>
</body>
app.js
// For any unmatched url, redirect to /projects
$urlRouterProvider.otherwise("/projects");
//
// Now set up the states
$stateProvider
.state('projects', {
url: "/projects",
templateUrl: "/app/views/projects/projects.html",
controller: "projectController"
})
.state('projects.todo', {
url: "/todo",
templateUrl: "/app/views/todo/todo.html"
});