Question

我一直在努力让angular-ui-router为我工作一段时间。我的观点在正确的目录中。我很确定我的代码是正确的，但由于某种原因，当我加载index.html文件时它不会加载home.html中的内容，它只是加载index.html而忽略了我的ui-view div标签。

此外，控制台不会在Chrome上注册任何错误。我确实收到一些关于Firefox上的Bootstrap的警告。我知道我的后备状态适用于Here这是我的app.js文件。

'use strict';

angular.module('catlogApp', ['ui.router', 'ngCart'])

//Application Routes

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  //$locationProvider.html5Mode(true);
  $stateProvider

// route for the home page
.state('app', {
  url: '/',
  views: {
    'content': {
      templateUrl: 'views/home.html',
    }
  }
})

// route for the Quote page
.state('app.summary', {
  url: '/summary',
  views: {
    'content@': {
      templateUrl: 'views/cart.html',
      controller: 'CartController'
    }
  }
})


// route for the Anchoring page
.state('app.anchoring', {
  url: '/anchoring',
  views: {
    'content@': {
      templateUrl: 'views/anchoring.html',
      controller: 'anchoringController'
    }
  }
})

// route for the Boat Hardware page
.state('app.boathardware', {
  url: '/boathardware',
  views: {
    'content@': {
      templateUrl: 'views/boat_hardware.html',
      controller: 'boathardwareController'
    }
  }
})

// route for the Boats & Motors page
.state('app.boatsandmotors', {
  url: '/boatsandmotors',
  views: {
    'content@': {
      templateUrl: 'views/boats_and_motors.html',
      controller: 'boatsandmotorsController'
    }
  }
})

// route for the Clothing page
.state('app.clothing', {
  url: '/clothing',
  views: {
    'content@': {
      templateUrl: 'views/clothing.html',
      controller: 'clothingController'
    }
  }
})

// route for the Diving page
.state('app.divebuddy', {
  url: '/divebuddy',
  views: {
    'content@': {
      templateUrl: 'views/divebuddy.html',
      controller: 'divingController'
    }
  }
})

// route for the Electrical page
.state('app.electrical', {
  url: '/electrical',
  views: {
    'content@': {
      templateUrl: 'views/electrical.html',
      controller: 'electricalController'
    }
  }
})

// route for the Electronic page
.state('app.electronic', {
  url: '/electronic',
  views: {
    'content@': {
      templateUrl: 'views/electronic.html',
      controller: 'electronicController'
    }
  }
})

// route for the Fishing page
.state('app.fishing', {
  url: '/fishing',
  views: {
    'content@': {
      templateUrl: 'views/fishing.html',
      controller: 'fishingController'
    }
  }
})

// route for the Guides page
.state('app.guides', {
  url: '/guides',
  views: {
    'content@': {
      templateUrl: 'views/guides.html',
      controller: 'guidesController'
    }
  }
})

// route for the Interior page
.state('app.interior', {
  url: '/interior',
  views: {
    'content@': {
      templateUrl: 'views/interior.html',
      controller: 'interiorController'
    }
  }
})

// route for the Maintenance page
.state('app.maintenance', {
  url: '/maintenance',
  views: {
    'content@': {
      templateUrl: 'views/maintenance.html',
      controller: 'maintenanceController'
    }
  }
})

// route for the Plumbing page
.state('app.plumbing', {
  url: '/plumbing',
  views: {
    'content@': {
      templateUrl: 'views/plumbing.html',
      controller: 'plumbingController'
    }
  }
})

// route for the Rigging page
.state('app.rigging', {
  url: '/rigging',
  views: {
    'content@': {
      templateUrl: 'views/rigging.html',
      controller: 'riggingController'
    }
  }
})

// route for the Safety page
.state('app.safety', {
  url: '/safety',
  views: {
    'content@': {
      templateUrl: 'views/safety.html',
      controller: 'safetyController'
    }
  }
});

// if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('views/home.html');

});

ow是我的index.html文件：

<!DOCTYPE html>
<html lang="en" ng-app="catlogApp">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Cat-Log</title>
    <!--<base href="/">-->
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">

    <!-- Custom CSS -->
    <link href="css/shop-homepage.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->



</head>

<body>


  <!--Angular JS-->
  <script src="../bower_components/angular/angular.min.js"></script>
  <script src="../bower_components/angular-resource/angular-resource.js"></script>
  <!--<script src="../bower_components/angular-route/angular-route.js"></script>-->
  <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>

  <!-- jQuery -->
  <script src="js/jquery.js"></script>

//Render View=========================================
<div ui-view="content"></div>

  <!--MVC Logic-->
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>


  <!--ngCart Script-->
  <script src="../bower_components/ngCart/dist/ngCart.js"></script>


</body>

</html>

EDITED

This is a screeenshot of what my browser loads

Answer 1

请你删除空控制器，然后试试。

#!/bin/bash
yesno="null" #any different value for initialization is valid
shopt -s nocasematch
while [[ ! ${yesno} =~ ^[yn]$|^yes$|^no$|^$ ]]; do
    read -r yesno
done

请在汇总前在网址中使用'/'。

ui-view无法加载内容

1 个答案: