页面未正确呈现角度 JS
page not rendering properly angular js
本文关键字：JS 更新时间：2023-09-26
我是Angular JS的新手，正在学习它以满足一些学术要求。问题是我有一个登录页面，三种类型的用户可以通过该页面登录。登录后，它会根据条件正确重定向，但登录页面未正确呈现。如果我将此登录页面的整个代码放在"index.html"中，则该页面将完美呈现。有与 ul 标签关联的 li 标签，这些标签在 li 项目的点击事件时充当子菜单。当放置在 index.html 中时，它们可以完美地工作，但在使用状态转换加载到 ui-view 中时则不起作用。我正在使用"状态"在部分之间切换。没有记录任何错误，我找不到原因。我希望我已经包含了必要的代码。如果问题不清楚，我可以提供整个代码。
请帮忙。
应用.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'
}
}
})
}])
索引.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>
您可以在 ui-view 中分离div，并使用名称"home.html"或任何您喜欢的名称创建一个新的 html 文件。
首页.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>
<div ui-view>
</div>
然后在您的状态提供程序中添加一个新状态，该提供程序具有默认状态：
$urlRouterProvider.otherwise('/home');
$stateProvider.state('home', {
url: "/home",
templateUrl: "app/home/views/home.html",
controller: "HomeController"
})
希望这有帮助。
相关文章：
- 没有找到相关文章
