Menu
I am using Angular UI Router. Please find the code below.
index.html
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="../../Scripts/AngularControllers/LoginHomeControllers/RouteMainController.js"></script>
<script src="../../Scripts/AngularControllers/LoginHomeControllers/LoginController.js"></script>
</head>
<body>
<div ui-view="mainview"></div>
</body>
</html>
RouteMainController.js
var app = angular.module("appHome", ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('introduction', {
url: '/',
views: {
'mainview':
{
templateUrl: 'Login.html',
controller: 'ctrlLogin'
}
}
})
.state('login', {
url: '/login',
views: {
'mainview':
{
templateUrl: 'Login.html',
controller: 'ctrlLogin'
}
}
})
.state('home', {
url: '/home',
views: {
'mainview':
{
templateUrl: 'Home.html',
}
}
})
.state('home.requestsummary', {
url: '/requestsummary',
views: {
'homedetailview':
{
templateUrl: 'Test1.html',
}
}
})
.state('home.requestsummary.requestdetail', {
url: '/requestdetail',
views: {
'homedetailview':
{
template: "'<h3>Foo</h3>'"
}
}
})
});
Login.html
<div>
<button id="btnAdd" type="submit" ng-click="Login()">Login</button>
</div>
LoginController.js
var myApp = angular.module('appHome');
myApp.controller("ctrlLogin", ['$scope', '$location', function ($scope, $location) {
$scope.Login = function () {
window.location.href = '#!home/requestsummary';
}
}]);
Home.html
<!--Sample Code for displaying Menu Tab and corresponding link-->
<li>
<a href="#">Employees <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu">
<li><a ui-sref=".employeeadd">Add Employee Record</a></li>
</ul>
</li>
<div ui-view="homedetailview"></div>
Test1.html
<a ui-sref=".requestdetail">Hello World</a>
I am able to Login successfully and getting the menu tab with "Hello World" Link. I want to display Menu Tab always and change the below text dynamically.
My problem is that whenever I clicked on "Hello World" Link , I am expecting Foo to appear in place of "Hello World" Link but it is not working. Even it is changing states(url) but it is not loading the actual view.
Please help me on this.
737
There is a structural problem with your code. The state requestdetail is a child state of home.requestsummary, and thus, it requires a ui-view in the template of home.requestsummary state, to which it can bind the HTML.
As per your code, there is no ui-view in the Test1.html. So, just to be sure that there is no other problem, you can try adding a ui-view in Test1.html, and change the state config as follows:
<!-- Test.html -->
<a ui-sref=".requestdetail">Hello World</a>
<div ui-view></div>
// RouteMainController.js
...
.state('home.requestsummary.requestdetail', {
url: '/requestdetail',
template: "'<h3>Foo</h3>'
})
After this change, just check if the heading Foo appears in the view. If it appears, then everything is fine with your code. Now, the second part is to load the heading Foo at the same place where the link of Hello world is shown.
To do that, you need to change the view target, because homedetailview exists in Home.html, which is the parent state of home.requestsummary. So, you need to change the state configuration for home.requestsummary.requestdetail as follows:
// RouteMainController.js
...
.state('home.requestsummary.requestdetail', {
url: '/requestdetail',
views: {
'homedetailview@home': {
template: "'<h3>Foo</h3>'
}
}
})
This will absolutely target the homedetailview in the state home, and your template for home.requestsummary.requestdetail will be shown there.
200
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
