On Thursday, May 21, 2015 at 3:40:30 PM UTC+5:30, Nitin Tomer wrote:
>
> Hi,
>
> I am using ui-router to create multiple views. In my index.html, I list
> some links. On clicking of first link, a page is displayed, which has some
> more links.
>
> On clink of these links, I want to load a page, but it is not happening,
> please help.
>
> Code -
>
>>
>>> index.html
>
> <!DOCTYPE html>
> <html ng-app="ox-admin" xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <script src="Scripts/jquery-1.9.1.js"></script>
> <script src="Scripts/angular.js"></script>
> <script src="Scripts/angular-resource.js"></script>
> <script src="Scripts/angular-route.js"></script>
> <script src="Scripts/angular-ui-router.min.js"></script>
> <script src="js/app.js"></script>
> <script src="js/controllers.js"></script>
> <link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
> <title>OmniExchange - Administrator</title>
> </head>
> <body>
> <div class="container-fluid">
> <div class="row">
> <div class="col-md-2">
> <!--Body content-->
>
> <ul class="phones">
> <li><a ui-sref="regTemplate">Register Template</a></li>
> <li><a ui-sref="regDevice">Register Device</a></li>
> <li><a ui-sref="regService">Register Services</a></li>
> <li><a ui-sref="confAuth">Configure
> Authentication</a></li>
> <li><a ui-sref="confInt">Configure
> Integrations</a></li>
> </ul>
>
> </div>
> <div class="col-md-10" ui-view>
>
> </div>
> </div>
> </div>
> </body>
> </html>
>
> app.js
>
> /* App Module */
>
> var oxadminApp = angular.module('ox-admin', [
> 'ui.router',
> 'oxadminControllers'
> ]);
>
> oxadminApp.config(function($stateProvider, $urlRouterProvider) {
>
> $urlRouterProvider.otherwise('/htmls');
>
> $stateProvider
>
> .state('regTemplate', {
> url: '/regTemplate',
> templateUrl: '/htmls/regTemplate.html'
> })
>
> .state('regDevice', {
> url: '/regDevice',
> templateUrl: '/htmls/regDevice.html'
> })
>
> .state('regService', {
> url: '/regService',
> templateUrl: '/htmls/regService.html'
> })
>
> .state('confAuth', {
> url: '/confAuth',
> templateUrl: '/htmls/confAuth.html'
> })
>
> .state('confInt', {
> url: '/confInt',
> templateUrl: '/htmls/confInt.html'
> })
>
> .state('regTemplate.rtGenInfo', {
> url: '/rtGenInfo',
> templateUrl: '/htmls/rtGenInfo.html'
> })
>
> .state('regTemplate.rtDataDef', {
> url: '/rtDataDef',
> templateUrl: '/htmls/rtDataDef.html'
> })
>
> .state('regTemplate.rtDocDef', {
> url: '/rtDocDef',
> templateUrl: '/htmls/rtDocDef.html'
> })
>
> .state('regTemplate.rtAddTask', {
> url: '/rtAddTask',
> templateUrl: '/htmls/rtAddTask.html'
> });
> });
>
> regTemplate.html
>
> Detailed view for registering templates.
>
> <div ng-controller="ctrl-regTemplate">
> <ul class="phones">
> <li><a ui-sref=".rtGenInfo">General Info</a></li>
> <li><a ui-sref=".rtDataDef">Define Data-fields</a></li>
> <li><a ui-sref=".rtDocDef">Define Doctypes</a></li>
> <li><a ui-sref=".rtAddTask">Add Tasks</a></li>
> </ul>
> </div>
>
> <div ui-view></div>
>
> Ideally it should show rtGenInfo.html next to the Register Template menu,
> but it's not doing that.
>
> Thanks
>
> Nitin
>
Please try below code.its working
*Index.html*
<!DOCTYPE html>
<html data-ng-app="ox-admin">
<head>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Body content-->
<ul class="phones">
<li><a data-ui-sref="regTemplate">Register
Template</a></li>
<li><a data-ui-sref="regDevice">Register Device</a></li>
<li><a data-ui-sref="regService">Register
Services</a></li>
<li><a data-ui-sref="confAuth">Configure
Authentication</a></li>
<li><a data-ui-sref="confInt">Configure
Integrations</a></li>
</ul>
</div>
</div>
</div>
<div data-ui-view/>
</body>
</html>
*App.js*
var oxadminApp = angular.module('ox-admin', ['ui.router']);
oxadminApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/Default');
$stateProvider
.state('regTemplate', {
url: '/regTemplate',
templateUrl: 'htmls/regTemplate.html'
})
.state('regDevice', {
url: '/regDevice',
templateUrl: 'htmls/regDevice.html'
})
.state('regService', {
url: '/regService',
templateUrl: 'htmls/regService.html'
})
.state('confAuth', {
url: '/confAuth',
templateUrl: 'htmls/confAuth.html'
})
.state('confInt', {
url: '/confInt',
templateUrl: '/htmls/confInt.html'
})
.state('regTemplate.rtGenInfo', {
url: '/rtGenInfo',
templateUrl: 'htmls/rtGenInfo.html'
})
.state('regTemplate.rtDataDef', {
url: '/rtDataDef',
templateUrl: 'htmls/rtDataDef.html'
})
.state('regTemplate.rtDocDef', {
url: '/rtDocDef',
templateUrl: 'htmls/rtDocDef.html'
})
.state('regTemplate.rtAddTask', {
url: '/rtAddTask',
templateUrl: 'htmls/rtAddTask.html'
})
.state('Default', {
url: '',
templateUrl: 'htmls/Default.html'
});
});
*regTemplate.html*
<h2>RegTemplate</h2>
<ul class="phones">
<li><a data-ui-sref="regTemplate.rtGenInfo">General Info</a></li>
<li><a data-ui-sref="regTemplate.rtDataDef">Define
Data-fields</a></li>
<li><a data-ui-sref="regTemplate.rtDocDef">Define Doctypes</a></li>
<li><a data-ui-sref="regTemplate.rtAddTask">Add Tasks</a></li>
</ul>
<div data-ui-view></div>
*Default.html -*<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<title></title>
</head>
<body>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
