页面无法正确呈现Angular js

Question

I am new to Angular JS & am learning it for some academic requirements. 我是Angular JS的新手，正在为某些学术要求而学习它。 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. 如果我将此着陆页的整个代码放在“ index.html”中，则页面将完美呈现。有与ul标签关联的li标签，这些标签与li标签上的click事件一起充当子菜单。 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. 将它们放置在index.html中时，它们可以完美地工作，但是使用状态转换将其加载到ui视图中时，它们不能工作。我使用“状态”在各部分之间进行切换。 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 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 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 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>

Answer 1

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. 您可以在ui视图中分隔div并创建一个名为'home.html'或您喜欢的任何名称的新html文件。

home.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: 身体：

<body>
   <div ui-view>
</div>

Then add a new state in your stateProvider having a default state: 然后在您的stateProvider中添加一个具有默认状态的新状态：

$urlRouterProvider.otherwise('/home');

$stateProvider.state('home', {
  url: "/home",
  templateUrl: "app/home/views/home.html",
  controller: "HomeController"
})

Hope this helps. 希望这可以帮助。

页面无法正确呈现Angular js

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-18 11:02:52

页面无法正确呈现Angular js

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-18 11:02:52

解决方案1
0 已采纳 2016-07-18 11:02:52