Question

我正在尝试使用MEAN堆栈构建我的第一个Web应用程序，并且我正面临Angular路由的问题。

    <!-- public/index.html -->
    <!DOCTYPE HTML>
    <html lang="en" content-type="text/css">
    <head name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <base href="/">

        <title>Trova colori in tinta</title>

        <!-- CSS -->
        <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
         <link rel="stylesheet" href="normalize.css"> <!-- custom styles -->

        <!-- JS -->
        <script type="text/javascript" src="libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>

        <!-- ANGULAR CUSTOM -->

        <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
        <script type="text/javascript" src="js/controllers/NerdCtrl.js"></script>
        <script type="text/javascript" src="js/services/NerdService.js"></script>


        <script type="text/javascript" src="js/appRoutes.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

    </head>
    <body >
    <div class="container" ng-app="sampleApp" ng-controller="NerdController">

        <!-- HEADER -->
        <nav class="navbar navbar-default" >
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Colori</a>
            </div>

            <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
            <ul class="nav navbar-nav">
                <li><a href="/nerd">Nerds</a></li>
                <li><a href="/lacci">lacci</a></li>
            </ul>
        </nav>
    <div class="container-fullwidth"></div>
        <!-- ANGULAR DYNAMIC CONTENT -->
        <div ng-view></div>

    </div>
    </body>
    </html>

当我点击＆＃34; Nerds＆＃34;或者＆＃34; lacci＆＃34;链接它不显示那些页面。

这里是appRoute.js文件

    angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
            templateUrl: '/public/views/home.html',
            controller: 'MainController'
        }) // nerds page that will use the NerdController
      .when('/nerds', {
            templateUrl: '/public/views/nerd.html',
            controller: 'NerdController'
        }).when('/lacci', {
            templateUrl: '/public/views/lacci.html',

        }).otherwise({ redirectTo: "/home" });

    $locationProvider.html5Mode(true);}]);

这两个文件位于不同的文件夹中。我哪里错了？

Answer 1

我想你忘了注入'ngRoute'

angular.module('appRoutes', ['ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
            templateUrl: '/public/views/home.html',
            controller: 'MainController'
        }) // nerds page that will use the NerdController
      .when('/nerds', {
            templateUrl: '/public/views/nerd.html',
            controller: 'NerdController'
        }).when('/lacci', {
            templateUrl: '/public/views/lacci.html',

        }).otherwise({ redirectTo: "/home" });

    $locationProvider.html5Mode(true);}]);

Answer 2

在上面的代码中，您没有提到“ngRoute”依赖项。您需要将其添加到角度模块的空白数组中。

请使用本地服务器运行您的应用程序。不需要任何Tomcat服务器。您可以轻松下载Google Chrome插件“适用于Chrome的网络服务器”。这里 - https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

您也可以在此处参考此示例：https://plnkr.co/xRLK9DvPqSHOEtDuEbtZ`

<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

  <script>
    var app = angular.module("myApp", ["ngRoute"]);

    app.controller()

    app.config(function($routeProvider) {

      $routeProvider
        .when('/abc', {
          'template': "This is the ABC page"
        })

      .when('/Home', {
        'template': "This is the home page"
      })

      .when('/About', {
        'template': "This is the About page"
      })

      .when('/Contact', {
        'template': "This is the Contact page"
      })

      .when('/Service', {
        'template': "This is the Service page"
      })

    })
  </script>

</head>

<body>
  <div class="container-fluid">
    <div class="row">

      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Routing App</a>
          </div>
          <ul class="nav navbar-nav">
            <li><a href="#abc">Abc</a></li>
            <li><a href="#About">About us</a></li>
            <li><a href="#Service">Services</a></li>
            <li><a href="#Contact">Contact</a></li>
            <li><a href="#Contact">Contact</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div ng-view></div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="script.js"></script>



</html>

`

角度路由不工作

2 个答案: