我是Angular JS＆amp; amp;的新手我正在学习一些学术要求。问题是我有一个登录页面，通过该页面可以登录三种类型的用户。登录后，它会根据条件正确重定向，但登陆页面未正确呈现。如果我将此着陆页的整个代码放在“index.html”中，页面将完美呈现。有与ul标签关联的li标签，在li项目上点击事件时充当子菜单。这些在放入index.html时工作得很好，但在使用状态转换在ui-view内部加载时无效。我使用“state”来更改各个部分。没有记录错误，我找不到原因。我希望我已经包含了必要的代码。如果问题不明确，我可以提供整个代码。
请帮助。
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>
答案 0 :(得分：0)
您可以在您的ui视图中分隔div并创建一个名为'home.html'的新html文件或您喜欢的任何名称。
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>
<div ui-view>
</div>
然后在stateProvider中添加一个具有默认状态的新状态：
$urlRouterProvider.otherwise('/home');
$stateProvider.state('home', {
url: "/home",
templateUrl: "app/home/views/home.html",
controller: "HomeController"
})
希望这有帮助。