2015-09-06 16 views
5

Tôi đã làm việc một chút với Angular và tôi đã cố thực hiện định tuyến đơn giản. Tôi có một HTML cơ bản chứa tham chiếu đến tất cả các tập lệnh được yêu cầu và một thẻ ng-view.ng-view sẽ không hiển thị mẫu

Vì một số lý do, khi trang được tải, mẫu không được hiển thị ở vị trí ng-view. Tại sao nó không được hiển thị và cách khắc phục?

<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script> 
    <script src="routCtrl.js"></script> 
</head> 
<body ng-app='ngRouteTest'> 
    <div ng-view></div> 
</body> 

và các tập tin kịch bản:

var ngRouteTest = angular.module('ngRouteTest',['ngRoute']); 
ngRouteTest.config(function($routeProvider){ 
    $routeProvider 
.when('/', 
    {templateUrl : '/routView1.html'}) 
}); 
+0

không nhà phát triển giao diện điều khiển nói gì? Bất kỳ lỗi/cảnh báo nào? –

+0

Lỗi sau: "Không thể tải mẫu". –

+0

Sau đó, vấn đề là bạn đang cung cấp một đường dẫn sai đến tệp html. routView1.html của bạn ở đâu? Cấu trúc thư mục của bạn trông như thế nào? –

Trả lời

0

Được rồi đầu tiên bạn cần chạy mã của bạn từ máy chủ, do đó, để kiểm tra mã cục bộ, hãy sử dụng http-server thật dễ dàng để chuẩn bị.

Sau đó, bạn sẽ cần phải thay đổi con đường templateUrl của bạn từ:

{templateUrl : '/routView1.html'} 

tới:

{templateUrl : './routView1.html'} 
2

Bạn cần phải chuyển hướng đến trang đó để định tuyến mà sẽ đến để nhận biết trang nào để render bên ng-view chỉ thị.

Có nhiều cách để thực hiện.

  1. Xác định thêm một cách khác để chuyển hướng đến /.

    $routeProvider.otherwise({redirectTo: '/'}) 
    
  2. Thêm neo vào trang sẽ chuyển hướng đến /.

    <body ng-app='ngRouteTest'> 
        <a href="#/">Home Page</a> 
        <div ng-view></div> 
    </body> 
    
  3. Có url mặc định trên trang trong thẻ <head>.

    <base href="/"/> 
    
+0

Cảm ơn câu trả lời, không có tùy chọn nào giúp được. Tôi thấy định tuyến được tạo sẵn sau khi thêm "nếu không" nhưng ng-view không tải mẫu. Đi tới bảng điều khiển như được yêu cầu ở trên tôi thấy lỗi sau: "Không thể tải mẫu". Tôi đoán vấn đề là các tệp được lưu trữ cục bộ và dẫn đến các vấn đề bảo mật - tôi sẽ khởi động máy chủ và xem liệu tôi có nhận được kết quả khác hay không. –

+1

bạn cần lưu trữ mã của bạn trên máy chủ..các mẫu khác sẽ không chạy .. –

0

Sau khi bắt đầu một host nội bộ và làm hỏng mã từ đó nó làm việc hoàn toàn tốt đẹp.

Sự cố xảy ra với bảo mật liên quan đến chrome khi bạn thực hiện cuộc gọi ajax cục bộ.

Vì vậy, một trong những vấn đề này nên thực hiện một trong những điều sau đây:

1.Disable web-security in chrome. 2.Bắt đầu một máy chủ cục bộ để kiểm tra.

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