AngularJS thư mục con định tuyến không hoạt động, với <base> thẻ áp dụng

Tôi đã có một mẫu AngularJS cực kỳ đơn giản, tôi đang cố gắng để có được định tuyến để làm việc nhưng khi tôi tải trang tôi chỉ nhìn thấy thẻ H1 từ index.html của tôi.AngularJS thư mục con định tuyến không hoạt động, với <base> thẻ áp dụng

Ứng dụng của tôi nằm trong thư mục con, /angular-route/ và tôi biết rằng partials tồn tại, tôi có thể truy cập /angular-route/partials/interest.html và trang hiển thị tốt.

Tôi đã bỏ lỡ điều gì đó thực sự cơ bản ở đây?

<html> 
<head ng-app="myApp"> 
    <title>AngularJS Routing</title> 
    <base href="/angular-route/" /> 
</head> 
<body> 

<h1>AngularJS Routing</h1> 

<div ng-view></div> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 

<script> 
    'use strict'; 

    var myApp = angular.module('myApp', []). 
     config(['$routeProvider', function($routeProvider) { 
     $routeProvider. 
      when('/interest', { 
       templateUrl: 'partials/interest.html', 
       controller: 'InterestCtrl' 
      }). 
      when('/catalogue', { 
       templateUrl: 'partials/catalogue.html', 
       controller: 'CatalogueCtrl' 
      }). 
      otherwise({redirectTo: '/interest'}); 
    }]); 

    myApp.controller('InterestCtrl', function($scope, $routeParams) { 
     console.log('InterestCtrl'); 
    }); 
    myApp.controller('CatalogueCtrl', function($scope, $routeParams) { 
     console.log('CatalogueCtrl'); 
    }); 
</script>

Nguồn

2013-06-28 Willshaw Media

Xem [Làm thế nào để thiết lập vị trí gốc cho AngularJS Router ?] (http://stackoverflow.com/questions/17319715/how-to-set-root-location-for-angularjs-router/17321184#17321184) – Stewie

Điều đó tạo ra sự khác biệt, nếu tôi thêm '' –

Bên cạnh thẻ cơ sở, mà bạn sẽ nhu cầu, bạn tôi cũng đã đặt các chỉ ng-ứng dụng trên yếu tố sai (head). Trong mã của bạn, Ứng dụng chỉ được khởi tạo bên trong tiêu đề. Phần còn lại của HTML bị bỏ qua bởi Angular.

WORKING PLUNKER

<html ng-app="myApp"> 
<head> 
    <title>AngularJS Routing</title> 
    <script> 
    document.write('<base href="' + document.location + '" />'); 
    </script> 
    <script type="text/ng-template" id="partials/interest.html"> 
    <h2>Inereset</h2> 
    </script> 
    <script type="text/ng-template" id="partials/catalogue.html"> 
    <h2>Catalogue</h2> 
    </script> 
</head> 
<body> 

    <h1>AngularJS Routing</h1> 

    <ul> 
    <li><a href="#/interest">Interest</a></li> 
    <li><a href="#/catalogue">Catalogue</a></li> 
    </ul> 

    <div ng-view></div> 

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> 

    <script> 
     'use strict'; 

     var myApp = angular.module('myApp', []). 
     config(['$routeProvider', function($routeProvider) { 
      $routeProvider. 
      when('/interest', { 
       templateUrl: 'partials/interest.html', 
       controller: 'InterestCtrl' 
      }). 
      when('/catalogue', { 
       templateUrl: 'partials/catalogue.html', 
       controller: 'CatalogueCtrl' 
      }). 
      otherwise({redirectTo: '/interest'}); 
     }]); 

     myApp.controller('InterestCtrl', function($scope, $routeParams) { 
     console.log('InterestCtrl'); 
     }); 
     myApp.controller('CatalogueCtrl', function($scope, $routeParams) { 
     console.log('CatalogueCtrl'); 
     }); 
    </script> 
</body> 
</html

Nguồn

2013-06-29 07:32:05 Stewie

Tuyệt vời! Chỉ cần nhớ bao gồm cả nội dung sử dụng đường dẫn tương đối như 'your_asset_path/asset'. Và trong ngRoutes, bắt đầu trận đấu của bạn với '/', bạn nên biết ngRoute xử lý chuyển url, nếu cơ sở = '/ admin /', sau đó '/index.html' trong tuyến đường sẽ dẫn đến '/admin/index.html' – hao

Tôi thực sự tự hỏi làm thế nào 'document.location' có thể trả về một chuỗi mặc dù ... –

@RomainBruckert tại sao phải không? –

Tiếp theo cấu hình làm việc cho tôi!

Hãy nói rằng chúng ta muốn truy cập vào ứng dụng của chúng tôi sử dụng http://localhost:8000/app/

Sau đó, có thẻ căn cứ của bạn với những điều sau đây nhấn mạnh

Nguồn

2016-07-12 15:32:58

AngularJS thư mục con định tuyến không hoạt động, với <base> thẻ áp dụng

Trả lời

Các vấn đề liên quan