ui-router nested routes not working

ui-router nested routes not working - javascript

Hello guys i am trying to use angular ui-router for nested routing in my website but i don't know where i am going wrong
this is my code
app.js
var faqApp = angular.module('faqApp', ['ui.router']);
faqApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('home.contactform', {
templateUrl: 'templates/contactform.html',
})
});
home.html
<div class="faq_head clearfix">
<img src="images/backbtn.png">
<h1>Help</h1>
</div>
<div ui-view></div>
<div class="faq_inner">
<h2 class="faq_heading">FAQs</h2>
<ul>
<li ng-repeat="option in faqoptions">
<a href="{{option.url}}" class="clearfix">
<span class="icon">
<img ng-src="{{option.image}}">
</span>
<span class="faq_name">{{option.name}}</span>
<span class="arrow">
<img src="images/right_arrow.png">
</span>
</a>
</li>
</ul>
</div>
<div class="bottom_btn_box">
Terms & Conditions
Credits
</div>
index.html
<!doctype html>
<html>
<head>
<title>Frequently ask questions</title>
<link rel="stylesheet" type="text/css" href="css/libs/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div ng-app="faqApp">
<div ui-view></div>
</div>
<script src="js/libs/jquery-1.12.3.min.js"></script>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/homeCtrl.js"></script>
</body>
</html>
In the above code i am calling 'home.html' in index.html through ui-view and then calling contactform.html in home.html but contactform.html is not loaded.

You need to define the url too,
.state('home.contactform', {
url: "/contactform",
templateUrl: 'templates/contactform.html',
})
DEMO

Related

UI-router not displaying nested views

I am learning how to employ UI-router in AngularJS, but I am not able to display the nested views.
Also, when I install UI-router using Bower, it is not working as it should. What could be the problem as I have to use CDN now.
Here is what I've done so far:
Index.html
<html ng-app="routerApp">
<head>
<title>Learning UI router</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui sref="about">About</a></li>
</ul>
</div>
</nav>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
app.js
angular.module('routerApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.paragraph', {
url: '/paragraph',
template: 'Random Blah Blah Blah.'
})
});
partial-home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">list</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
partial-home-list.html
<ul>
<li ng-repeat="dog in dogs">{{dog}}</li>
</ul>

First the used CDN was dead or not correct, so changed the CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
Secondly, fixed the router states, for example:
.state('list', {
url: '/list',
views: {
'main': {
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
}
}
I put the templateUrl and controller under swappable view called
'main'.
Thirdly, Changed your ui-view section as follows:
<div ui-view = "main"></div>
Please check the fixed code given below:
app.js
angular.module('routerApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/home',
views: {
'main': {
templateUrl: 'partial-home.html'
}
}
})
.state('list', {
url: '/list',
views: {
'main': {
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
}
}
})
.state('paragraph', {
url: '/paragraph',
views: {
'main': {
template: 'Random Blah Blah Blah.'
}
}
});
$urlRouterProvider.otherwise('/home');
});
index.html
<html ng-app="routerApp">
<head>
<title>Learning UI router</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">AngularUI router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</div>
</nav>
<div class="container">
<div ui-view = "main"></div>
</div>
</body>
</html>
partial-home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref="list" class="btn btn-primary">list</a>
<a ui-sref="paragraph" class="btn btn-danger">Paragraph</a>
</div>
partial-home-list.html
<ul>
<li ng-repeat="dog in dogs">{{dog}}</li>
</ul>

How to do routing in angular js?

I am trying to do angular js routing application its works fine but i have facing an error that was i am clicking [View Students List] that is not working and page is not navigating to another page..
below is my code..
main.js
var app = angular.module("mainApp", ['ngRoute']);
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'StudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.hashPrefix('');
$locationProvider.html5Mode({
enabled:true,
requiredBase:false
});
}]);
app.controller('StudentController', function($scope) {
$scope.students = [
{name: 'Mark Waugh', city:'New York'},
{name: 'Steve Jonathan', city:'London'},
{name: 'John Marcus', city:'Paris'}
];
$scope.message = "Click on the hyper link to view the students list.";
});
below is my home.html
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a ng-href="/viewStudents"> View Students List</a>
</div>
below is my viewStudents.html
<div class="container">
<h2> View Students </h2>
Search:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
</ul>
<a ng-href="/home">Back</a>
</div>
below is my index.html code
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<script src="js/angular.min.js"></script>
<script src="js/angular.route.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="mainApp">
<ng-view></ng-view>
</body>
</html>

You need to change the Home.html as,
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a ng-href="#/viewStudents"> View Students List</a>
</div>
DEMO

change
<a ng-href="/viewStudents"> View Students List</a>
to
<a ng-href="#/viewStudents"> View Students List</a>
try it

If you want to enable html5 mode, make sure you include your base tag AFTER your scripts are loaded. Like this
<!DOCTYPE html>
<html>
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular.route.js"></script>
<script src="js/main.js"></script>
<base href="/" />
</head>
<body ng-app="mainApp">
<ng-view></ng-view>
</body>
</html>
And it should work fine.
Take a look at working plunk

Links not working with angular ui-router

So I've set up ui-router and I had it working a few minutes ago, sort of, it would display the template with content loaded from another html file, but none of the links would work. Now nothing is working: the template shows up but the content is not pulled in and none of the links work.
Ctrl.js
var site = angular.module('site', ['ui.router']);
site.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page', {
url: '/page',
templateUrl: 'page.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
});
$urlRouterProvider.otherwise('/page');
})
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="scripts/ctrl.js"></script>
<link rel="stylesheet" href="style/main.css">
</head>
<body ng-app="site">
<nav class="navbar navbar-default navbar-fixed-top" id="navigate">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navSmall">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navSmall">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center container-fluid">
<div ui-view></div>
</div>
<footer class="footer">
<div id="note" class="container">
<div class="row">
<div class="col-sm-8">
-----Footer Content-----
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</footer>
</body>
</html>
About.html (should be loaded but it's not)
<div ui-view="about">
<div class="container-fluid bg-about">
<div class="container-content">
<div class="row">
</div>
</div>
</div>
</div>
Wow you all are fast! Thanks for the suggestions. So update: changing it to ahref="#/about" helped in that I can now go to the link but still no content displays. There is a console error:
Error: Access to restricted URI denied
fg/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:103:167
n#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:98:460
m/g<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:95:489
e/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:130:409
uf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$digest#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:142:165
uf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:399
Ac/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:115
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:374
Ac/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:36
Ac#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:332
fe#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:20:156
#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:315:135
g/</j#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29566
g/</k<#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882
angular.min.js:117:399

Your state URL is /about, not /about.html.
In any case, use the ui-sref directive, that's what it's for
<a ui-sref="about">about</a>
You simply pass in the state name (and any params, see the documentation) and it will create the right URL for you taking into account any $locationProvider.html5mode configuration.
If you are loading the app via file:///some/path/to/index.html, the AJAX requests to your templates (ie about.html) might not work. You should be using an HTTP server for your local development.
Have a look at (or even just clone as a base) the angular-seed project. It provides an excellent starting point for first-time Angular development.

You are mistake the state URL
your code <li>about</li>
You can access the state by URL from browser, but referencing other section of the app is a bad practice though it still works
<li>about</li>
Do this
<li><a ui-sref="about">about</a></li>

your state URL is mistake, is /about not /about.html
Try this
<li><a ui-sref="about">about</a></li>

For link to work you need to use
about
instead of
about.
Also for content to pull in like data binding you need to use controller.

Try this, just make sure test.html be there.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
controller: 'myCtrl',
templateUrl: 'test.html'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("MainController", function($scope) {
});
module.controller("myCtrl", function($scope) {
$scope.my = 10;
ab = function() {
alert($scope.my);
}
});
</script>
</head>
<body ng-app="sampleApp">
<div ng-controller="MainController">
Route
<ng-view>
</ng-view>
</div>
</body>
</html>

Routing ng-view with $location.path(..)

I'm trying to implement an answer on another StackOverflow question, using a link in the header to redirect Index.html's ng-view.
When loading pages directly via: http://server/#/page the app works without issue (no console errors, page renders correctly, angular/js logic runs correctly). My routing logic returns 'undefined' when I step through the logic (into the angular library), delivering me to http://server/# which is a great page of nothingness, except the header and footer render correctly.
I'm not sure what I'm doing incorrectly.
I'm going to be selective as to what I include code wise (just to keep this at a reasonable length) but if I left something important out, don't hesitate to request it.
Index.html:
<!DOCTYPE html>
<html ng-app="passwordResetApp">
<head>
<title>COP Azure B2B Password Reset</title>
<meta charset="utf-8"/>
<!--Lib-->
<!--ng base-->
<script src="app/lib.bower/angular/angular.js"></script>
<script src="app/lib.bower/angular-route/angular-route.js"></script>
<!--ui grid-->
<script src="app/lib.bower/angular-ui-grid/ui-grid.min.js"></script>
<link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
<!--Misc-->
<link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css" />
<!--Custom-->
<script src="app/app.js"></script>
<!--Custom - Services-->
<script src="app/services/resetRequestService.js"></script>
<script src="app/services/adValidationService.js"></script>
<!--Custom - Controllers-->
<script src="app/controllers/HeaderController.js"></script>
<script src="app/controllers/PasswordResetRequestController.js"></script>
<!--Custom modules-->
<script src="app/modules/header.js"></script>
<!--Custom - Other-->
<link rel="stylesheet" href="app/css/passwordReset.css"/>
</head>
<body ng-app>
<div class="container">
<!--<div ng-include="'app/views/_header.html'"></div>-->
<div header></div>
<div class="viewWrapper">
<div ng-view></div>
</div>
<div class="push"></div>
</div>
<div ng-include="'app/views/_footer.html'"></div>
</body>
</html>
app.js:
(function() {
'use strict';
var app = angular.module('passwordResetApp', ['ngRoute']);
app
.config(
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/passwordReset.html',
controller: 'ResetRequestController as vm',
caseInsensitiveMatch: true
}).when('userSearch', {
templateUrl: 'app/views/userSearch.html',
controller: 'ResetRequestController as vm',
caseInsensitiveMatch: true
}).otherwise({ redirectTo: '/' });
}
);
app.directive('header',
function() {
return {
restrict: 'A',
//This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
replace: true,
templateUrl: 'app/views/_header.html',
controller: 'HeaderController as vm',
caseInsensitiveMatch: true
}
});
app.run([
'$route', '$http', '$rootScope',
function ($route, $http, $rootScope) {
$http.defaults.withCredentials = true;
$rootScope.getUrlPath = function (url) {
return baseUrl + url;
};
}
]);
}());
_header.html:
<header id="pageHeader">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-2 cop-logo-container">
<img id="cop-logo" src="app/img/ConocoPhillips_Logo.png" />
</div>
<div class="col-sm-4 col-md-6 col-lg-8">
<h2>Azure B2B Password Reset</h2>
{{vm.currentUser.name}}
</div>
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="pull-right" style="padding: 20px">
<div ng-if="vm.currentUser" id="headerUser">
<p>Welcome, <span class="username">{{vm.currentUser.name}}</span></p>
</div>
<div ng-if="!vm.currentUser">
<div class="btn btn-primary">Login</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<ul ng-if="vm.currentUser" class="nav navbar-nav">
<li>Home</li>
<li>Search Users</li>
<li>Logout</li>
</ul>
<ul ng-if="!vm.currentUser" class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
</header>
HeaderController.js:
(function() {
'use strict';
var app = angular.module('passwordResetApp');
var headerController = function ($scope, $location) {
var vm = this;
vm.currentUser = {};
vm.currentUser.name = 'caninc';
vm.changeView = function(view) {
$location.path(view);
}
};
app.controller('HeaderController', headerController);
}());

Issue is with <li>Home</li>
# so when clicked http://server/# not http://server/#/page

AngularJS - On click not reaching controller method

I am learning Angularjs and Nodejs by developing a project.
I have followed this tutorial and organised my folder structure and route configurations.
Problem:
I have added a method called isActive to update ng-class based on tab click. But when I click the tab it is not calling the isActive method.
My guess is, I have done something wrong in appRoutes.js but not sure how to fix this. I am able to reach the MainController but not the methods in it.
I have another question, I need to make the Home tab active when I enter the application or when I clicked on home tab or when I click on application header too.
Below is the html and the js codes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>ets</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/ets.css">
</head>
<body ng-app="etsApp">
<div id="mainDiv">
<div>
<section id="header_section" class="main-title"></section>
<section id="nav_section"></section>
</div>
<section id="body_section">
<div ng-view="ng-view"></div>
</section>
<section id="footer_section" class="footer-style"></section>
</div>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#header_section').load('views/partials/header.html');
$('#nav_section').load('views/partials/navigation_main.html');
$('#footer_section').load('views/partials/footer.html');
});
</script>
</body>
</html>
navigation_main.html
<div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li ng-class="{active : isActive('/home')}" id="nav_home">
Home
</li>
<li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
Expense Reporting
</li>
<li ng-class="{active : isActive('/remainders')}">
Todo Remainder's
</li>
<li ng-class="{active : isActive('/pdfoperations')}">
PDF Operation's
</li>
<li ng-class="{active : isActive('/imageoperations')}">
Image Operation's
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login/Register</li>
</ul>
</nav>
</div>
header.html
<div>
<header id="header" style="margin-left: 50px;">
<a href="/" style="text-decoration: none; color: black;">
<strong>eTools Store</strong>
</a>
</header>
</div>
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
});
$locationProvider.html5Mode(true);
}]);
app.js
angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.isActive = function(destination) {
console.log($location.path());
return destination === $location.path();
}
});

Your navigation_main.html is outside of controller scope. That's the main reason. Try to create separate controller for you navigation like this
.controller('NavCtrl', function($scope) {
isActive = function(destination) { /*...*/ }
}
Put it into file js/nav.js and add to your html
<script type="text/javascript" src="js/nav.js"></script>
And then add this controller to your navigation_main.html code
<div ng-controller="NavCtrl">

About problem not reaching isActive method:
Try to reorganize:
<script type="text/javascript" src="js/controllers/MainCtrl.js"> </script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
into:
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>

May be you forget to add .otherwise
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
Update :
Try this -
In navigation_main.html
<li ng-class="{'active' : path}" >
Image Operation's
</li>
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.itemClicked= function(destination) {
$scope.path = destination;
}
});

You can try angular ui-router for your routing and for adding an active class when a state is active. You only need to add ui-sref-active="YourActiveClassHere". Angular UI-Router
Try to change the order of this,
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
To this,
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>

Try to add ng-click=isActive('/home'), in your a tag.
<li ng-class="{active : activeClass == 'home'}" id="nav_home">
<a href="/home" ng-click=isActive('/home')>Home</a>
</li>
In your MainCtrl add this line,
$scope.activeClass = '';
$scope.isActive = function(destination) {
$scope.activeClass = destination;
}

We Keep Coding

JavaScript is the programming language of the Web.

ui-router nested routes not working - javascript

You need to define the url too, .state('home.contactform', { url: "/contactform", templateUrl: 'templates/contactform.html', }) DEMO

Related

UI-router not displaying nested views

How to do routing in angular js?

Links not working with angular ui-router

Routing ng-view with $location.path(..)

AngularJS - On click not reaching controller method

Categories

Resources