AngularJS ng-view với ví dụ

⚡ Tóm tắt thông minh

Trong AngularJS, Views cho phép một trang thay đổi nội dung thay vì chuyển hướng đến trang khác, điều này làm cho ứng dụng một trang (SPA) có cảm giác mượt mà tức thì. Chỉ thị `ng-view` đánh dấu vùng mà mỗi route thay thế bằng template và controller riêng của nó.

🪟 Một vị trí giữ chỗ duy nhất: Một phần tử mang thuộc tính ng-view đánh dấu vị trí mà mọi mẫu định tuyến được chèn vào, và chỉ cho phép một phần tử như vậy trên mỗi trang.
🔗 Ghép tuyến đường: Mỗi tuyến đường chỉ định một templateUrl và một controller, liên kết mã HTML và logic với nhau cho giao diện đó.
📦 Sự phụ thuộc giữa các mô-đun: Các view yêu cầu angular-route.js cộng với một dependency được khai báo vào module ngRoute.
🎯 Chế độ xem mặc định: Mệnh đề "otherwise" sẽ chuyển hướng bất kỳ địa chỉ nào không khớp, đó là lý do tại sao giao diện hiển thị khi tải trang lần đầu.
🌐 Cần máy chủ: Các mẫu được tải về qua giao thức HTTP, vì vậy trang phải được phục vụ trực tiếp chứ không phải mở từ hệ thống tập tin.
⚠️ Trạng thái hỗ trợ: AngularJS đã hết hạn hỗ trợ vào ngày 31 tháng 12 năm 2021 và sẽ không nhận được bất kỳ bản vá bảo mật nào nữa.

Đọc thêm

Các trang web nổi tiếng như Gmail Sử dụng khái niệm Ứng dụng Trang Đơn (Single Page Applications). Khi người dùng yêu cầu một trang khác, ứng dụng không chuyển hướng mà hiển thị giao diện của trang mới bên trong trang hiện có, do đó người dùng có cảm giác như chưa từng rời khỏi trang. Điều tương tự cũng được thực hiện trong AngularJS bằng cách sử dụng các view kết hợp với các route.

⚠️ Thông báo hỗ trợ: AngularJS đã đạt đến Hết hạn sử dụng vào ngày 31 tháng 12 năm 2021. và không nhận được thêm bản vá lỗi hoặc bản sửa lỗi bảo mật nào nữa. Chỉ thị bên dưới vẫn chính xác để duy trì các ứng dụng AngularJS 1.x hiện có; trong phiên bản hiện đại có góc cạnh tương đương với <router-outlet>.

Chế độ xem là gì?

Giao diện (View) là nội dung được hiển thị cho người dùng. Bất cứ điều gì người dùng muốn xem, giao diện tương ứng của ứng dụng sẽ được hiển thị.

Việc kết hợp các khung nhìn và tuyến đường chia ứng dụng thành các khung nhìn logic và liên kết mỗi khung nhìn với một... điều khiểnĐiều này giúp cho việc quản lý ứng dụng trở nên dễ dàng hơn.

Giả sử có một ứng dụng đặt hàng cho phép khách hàng xem các đơn hàng và đặt đơn hàng mới. Sơ đồ bên dưới minh họa cách ứng dụng đó được chuyển đổi thành ứng dụng một trang duy nhất.

Thay vì hai trang web riêng biệt, một trang để "Xem đơn hàng" và một trang để "Đặt đơn hàng mới", AngularJS Sử dụng hai chế độ xem trên cùng một trang, được truy cập thông qua hai liên kết tham chiếu. #show và #new:

Điều hướng đến MyApp/#show Hiển thị trang Xem đơn hàng mà không cần rời khỏi trang. Chỉ phần đó của trang hiện tại được làm mới.
Điều hướng đến MyApp/#new Điều này cũng áp dụng tương tự cho trang Đơn hàng mới.

Việc chia ứng dụng thành các phần hiển thị (view) như vậy giúp dễ quản lý và dễ thay đổi, và mỗi phần hiển thị đều có một bộ điều khiển tương ứng chứa logic nghiệp vụ cho chức năng đó.

ng-view Chỉ thị trong AngularJS

ngView Chỉ thị bổ sung cho $route dịch vụ bằng cách đưa mẫu đã được hiển thị của tuyến đường hiện tại vào tệp bố cục chính, thông thường index.html.

Mỗi khi tuyến đường hiện tại thay đổi, chế độ xem được hiển thị cũng thay đổi theo. $route cấu hình, mà không cần tải lại trang. tuyến đường được đề cập riêng biệt; trọng tâm ở đây là thêm nhiều góc nhìn khác nhau.

Sơ đồ dưới đây thể hiện toàn bộ quy trình, sau đó ví dụ sẽ hướng dẫn từng bước một.

Cách triển khai ng-view trong AngularJS

Ví dụ này đưa ra hai tùy chọn cho người dùng: hiển thị sự kiện và thêm sự kiện. Nhấp chuột Thêm một sự kiện Hình ảnh này hiển thị giao diện Thêm sự kiện, và điều tương tự cũng áp dụng cho Hiển thị sự kiện.

Bước 1) Thêm tệp angular-route làm tham chiếu script. Tệp này cần thiết để sử dụng nhiều tuyến đường và chế độ xem, và có sẵn trên trang web AngularJS.

Bước 2) Thêm thẻ href và thẻ div.

Thêm thẻ href liên kết đến “Thêm sự kiện mới” và “Hiển thị sự kiện”.
Thêm một thẻ div chứa nội dung sau: ng-view Chỉ thị này dùng để đánh dấu vùng hiển thị. Vùng hiển thị tương ứng sẽ được chèn vào đó mỗi khi một trong hai liên kết được nhấp.

Bước 3) Trong thẻ script của AngularJS, hãy thêm cấu hình định tuyến.

Khi người dùng nhấp vào Sự kiện mới liên kết, AngularJS tải add_event.html, chèn mã đánh dấu của nó vào khung nhìn và sử dụng AddEventController Về mặt logic nghiệp vụ.
Khi người dùng nhấp vào Sự kiện hiển thị liên kết, nó tải show_event.html và sử dụng ShowDisplayController.
otherwise Mệnh đề này thiết lập chế độ xem mặc định hiển thị cho người dùng, ở đây là DisplayEvent.

Bước 4) Thêm các bộ điều khiển để xử lý logic nghiệp vụ cho cả hai hàm. Mỗi bộ điều khiển chỉ đơn giản là thiết lập một thông báo trên đối tượng phạm vi của nó, được hiển thị khi chế độ xem tương ứng được hiển thị.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>
</head>
<body ng-app="sampleApp">

<h1>Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#!/NewEvent">Add New Event</a></li>
        <li><a href="#!/DisplayEvent">Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp', ["ngRoute"]);

    app.config(function($routeProvider) {
        $routeProvider
            .when("/NewEvent", {
                templateUrl: "add_event.html",
                controller: "AddEventController"
            })
            .when("/DisplayEvent", {
                templateUrl: "show_event.html",
                controller: "ShowDisplayController"
            })
            .otherwise({
                redirectTo: '/DisplayEvent'
            });
    });

    app.controller("AddEventController", function($scope) {
        $scope.message = "This is to Add a new Event";
    });

    app.controller("ShowDisplayController", function($scope) {
        $scope.message = "This is to display an Event";
    });
</script>

</body>
</html>

⚠️ Ba điểm cần chỉnh sửa so với thông tin đăng tải ban đầu. Đầu tiên, các liên kết có nội dung như sau: #!NewEvent không có dấu gạch chéo trong khi các tuyến đường được khai báo là /NewEvent, vì vậy không có gì khớp. Từ AngularJS 1.6 trở đi, tiền tố băm mặc định là !, điều này tạo ra địa chỉ chính xác #!/NewEvent — một dấu gạch chéo sau dấu chấm than. Thứ hai, ShowDisplayController Đặt thông báo thành “Đây là hiển thị một Sự kiện”, thiếu từ đến mà đoạn văn xung quanh trích dẫn. Thứ ba, lib/bootstrap.js Đoạn mã này được tải từ một đường dẫn tương đối không dẫn đến đâu và không bao giờ được sử dụng, vì vậy nó đã bị xóa.

Bước 5) Tạo các trang add_event.html và show_event.htmlMỗi phần tử đều chứa một tiêu đề và một biểu thức hiển thị thông báo được bộ điều khiển của nó chèn vào.

add_event.html

<h2>Add New Event</h2>

{{message}}

show_event.html

<h2>Show Event</h2>

{{message}}

Nếu đoạn mã được thực thi thành công, kết quả sau sẽ hiển thị trên trình duyệt.

Đầu ra:

Các lỗi thường gặp khi sử dụng ng-view và cách khắc phục chúng.

Hầu hết các lỗi của ng-view đều xuất phát từ việc kết nối module, định dạng địa chỉ hoặc cách trang được phục vụ, chứ không phải từ chính chỉ thị đó.

Vùng hiển thị vẫn trống: các ngRoute Mô-đun không được liệt kê là một phần phụ thuộc, hoặc angular-route.js chưa được tải. Cả hai đều cần thiết, và tập lệnh phải được đặt sau angular.min.js.
Các liên kết thay đổi địa chỉ nhưng nội dung không được hiển thị: Thuộc tính href không khớp với đường dẫn. Từ AngularJS 1.6 trở đi, địa chỉ cần... #!/Route; mã cũ được viết cho phiên bản 1.5 đã được sử dụng. #/Route.
Các mẫu không tải được do lỗi CORS: Trang này được mở trực tiếp từ ổ đĩa. Hãy phục vụ nó qua HTTP, bởi vì templateUrl Dữ liệu được tải về bằng yêu cầu AJAX, nhưng giao thức tập tin lại bị chặn.
Chỉ có khung cảnh cuối cùng được hiển thị: Nhiều hơn một phần tử mang thuộc tính ng-view. AngularJS chỉ hỗ trợ một vùng hiển thị duy nhất trên mỗi trang.
Không có gì hiển thị khi tải lần đầu: Không otherwise Điều khoản được cấu hình sao cho địa chỉ trống không khớp với bất kỳ tuyến đường nào.

Câu Hỏi Thường Gặp

Không. ngRoute chỉ hỗ trợ một vùng hiển thị duy nhất trên mỗi trang. Để có nhiều vùng hiển thị được đặt tên cùng lúc, hãy sử dụng thư viện ui-router, thư viện này cung cấp ui-view và hỗ trợ các vùng hiển thị lồng nhau và ngang hàng.

Bật chế độ HTML5 bằng $locationProvider.html5Mode(true) và thêm thẻ cơ sở. Sau đó, máy chủ phải viết lại các đường dẫn không xác định thành index.html, nếu không việc làm mới sẽ trả về lỗi 404.

Phần lớn là vậy. AI Các công cụ này chuyển đổi bảng định tuyến thành mảng Angular Routes và thay thế ng-view bằng router-outlet. Các controller vẫn phải được viết lại thành các component bằng tay.

Các trợ lý AI nhanh chóng kiểm tra ba nguyên nhân thường gặp: thiếu phụ thuộc ngRoute, tiền tố băm không khớp với tuyến đường và đường dẫn mẫu mà trình duyệt không thể tải.

Vâng. Thêm vào resolve Chặn đường đi. AngularJS chờ các promise đó được xử lý xong trước khi khởi tạo controller, điều này tránh được tình trạng màn hình trống nhấp nháy trong khi chờ dữ liệu đến.

AngularJS ng-view với ví dụ

Chế độ xem là gì?

ng-view Chỉ thị trong AngularJS

Cách triển khai ng-view trong AngularJS

Các lỗi thường gặp khi sử dụng ng-view và cách khắc phục chúng.

Câu Hỏi Thường Gặp

Tóm tắt bài viết này với:

Đăng kí để nhận thư mới

Chế độ xem là gì?

ng-view Chỉ thị trong AngularJS

Cách triển khai ng-view trong AngularJS

NHỮNG BÀI VIẾT LIÊN QUAN

Các lỗi thường gặp khi sử dụng ng-view và cách khắc phục chúng.

Câu Hỏi Thường Gặp

Tóm tắt bài viết này với:

Đăng kí để nhận thư mới