page not rendering properly angular js
Question
I am new to Angular JS & am learning it for some academic requirements. The issue is that I have a login page, through which three types of users can sign in. Upon signing in, it is redirected correctly as per conditions, but the landing page is not being rendered properly. If i place the whole code of this landing page in "index.html", the page gets rendered perfectly.There are li tags associated with ul tags which act as a sub menu upon click event on li items. These work perfectly when placed in index.html, but not working when loaded inside the ui-view using state transitions.I am using "state" to change between sections. No errors are being logged and I can't find out why. I hope I have included the necessary code.If the question is not clear, I can provide the entire code.
Please Help.
app.js
'use strict';
angular.module('Authentication', []);
//angular.module('Home', []);
angular.module('Registration', []);
angular.module('Dental', ['ui.router','Authentication','Registration'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$stateProvider
// State - User Login
.state('login', {
url: "/login",
templateUrl: "app/authentication/views/login.html",
controller: "AuthenticationController"
})
// State - Admin Landing Page
.state('admin', {
//abstract: true,
url: "/admin",
templateUrl: "app/admin/home/views/admin_main.html",
controller: "RegistrationController"
})
// State - Admin Sub Pages - Registration Page
.state('register', {
parent: 'admin',
url:'/register',
views: {
'admin@admin' : {
templateUrl: "app/admin/settings/views/clinicDetail.html",
}
},
controller: "RegistrationController"
})
// State - Admin Sub Pages - Personal Details Page
.state('register.personal', {
parent: 'register',
url:'/personal-details',
views : {
'registration' : {
templateUrl : 'app/admin/registration/views/personalDetails.html'
}
}
})
}])
index.html
<html ng-app="Dental">
<head>
<!--- Style Sheets --->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" type="text/css"/>
<link rel="stylesheet" href="app/css/custom.css" type="text/css"/>
<link rel="stylesheet" href="app/css/animate.css" type="text/css"/>
<link rel="stylesheet" href="app/css/waves.css" type="text/css"/>
<link rel="stylesheet" href="app/css/layout.css" type="text/css"/>
<link rel="stylesheet" href="app/css/component.css" type="text/css"/>
<link rel="stylesheet" href="app/css/plugins.css" type="text/css"/>
<link rel="stylesheet" href="app/css/common-styles.css" type="text/css"/>
<link rel="stylesheet" href="app/css/pages.css" type="text/css"/>
<link rel="stylesheet" href="app/css/responsive.css" type="text/css"/>
<link rel="stylesheet" href="app/css/matmix-iconfont.css" type="text/css"/>
<link rel="stylesheet" href="app/font-awesome/css/font-awesome.css" type="text/css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,500italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet" type="text/css">
<script src="node_modules/angular/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<div ui-view>
<div class="jumbotron">
<div class="container">
<div class="col-xs-offset-2 col-xs-8">
<h3> Clinic Management System </h3>
<a ui-sref="login"> <button class="btn btn-success"> Start </button> </a>
</div>
</div>
</div>
</div>
<script src="app/js/jquery.js"></script>
<script src="app/js/bootstrap.js"></script>
<script src="app/js/jquery-migrate.min.js"></script>
<script src="app/js/jRespond.min.js"></script>
<script src="app/js/nav-accordion.js"></script>
<script src="app/js/hoverintent.js"></script>
<script src="app/js/waves.js"></script>
<script src="app/js/switchery.js"></script>
<script src="app/js/jquery.loadmask.js"></script>
<script src="app/js/icheck.js"></script>
<script src="app/js/select2.js"></script>
<script src="app/js/bootbox.js"></script>
<script src="app/js/animation.js"></script>
<script src="app/js/colorpicker.js"></script>
<script src="app/js/sweetalert.js"></script>
<script src="app/js/moment.js"></script>
<script src="app/js/fullcalender.js"></script>
<script src="app/js/layout.init.js"></script>
<script src="app/js/matmix.init.js"></script>
<!--- Controllers --->
<script src="app/authentication/authenticationController.js"></script>
<script src="app/authentication/service.js"> </script>
<script src="app/admin/registration/registrationController.js"></script>
admin_main.html
<div class="left-navigation">
<ul class="list-accordion">
<li><a href="#" class="waves-effect"><span class="nav-icon"><i class="fa fa-home"></i></span>
<span class="nav-label">Home</span> </a>
</li>
<li><a class="waves-effect"><span class="nav-icon"><i class="fa fa-align-justify"></i></span><span class="nav-label">Registration</span></a>
<ul>
<li><a ui-sref="register">Add New Patient</a>
</li>
<li><a href="#">Show Patients</a>
</li>
</ul>
</li>
<li><a href="#"><span class="nav-icon"><i class="fa fa-table"></i></span><span class="nav-label">Appointment</span></a>
<ul>
<li><a href="#">Fix Appointment</a>
</li>
<li><a href="#">View Appointment</a>
</li>
<li><a href="#">Day Sheet</a>
</li>
<!--<li><a href="stack-tables.html">Stack Tables</a> -->
</li>
</ul>
</li>
<li><a href="#"><span class="nav-icon"><i class="ico-hammer-wrench"></i></span><span class="nav-label">Employee Registration</span></a>
<ul>
<li><a href="#">Employee Category</a>
</li>
<li><a href="#">Add New Employee</a>
</li>
<li><a href="#">View Employees</a>
</li>
<li><a href="#">Reports</a>
<ul>
<li><a href="#">Employee Details</a>
</li>
</ul>
</li>
<!--<li><a href="#">Bootstrap Elements</a>
</li> -->
</ul>
</li>
</ul>
</div>
1 answers
solution1
0 ACCPTED 2016-07-18 11:02:52
You can separate the div inside your ui-view and create a new html file with the name 'home.html' or any name you like.
home.html:
<div class="jumbotron">
<div class="container">
<div class="col-xs-offset-2 col-xs-8">
<h3> Clinic Management System </h3>
<a ui-sref="login"> <button class="btn btn-success">Start</button></a>
</div>
</div>
body:
<body>
<div ui-view>
</div>
Then add a new state in your stateProvider having a default state:
$urlRouterProvider.otherwise('/home');
$stateProvider.state('home', {
url: "/home",
templateUrl: "app/home/views/home.html",
controller: "HomeController"
})
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Charts not rendering properly in Angular
Angular JS page not loading properly in beginning
Angular 4 not rendering properly on IE 11
Angular app is not rendering properly on the browser
Angular Js elements not rendering
Angular JS not rendering HTML
HTML Page with AngularJS not rendering properly
preventing page from creating additional dialogs not binding the angular js properly
Angular JS from tutorial not rendering
ng-class not rendering properly on Angular Condition
Related Tags