AngularJS ng-view với ví dụ: Cách triển khai chế độ xem

Ngày nay, chắc hẳn ai cũng đã nghe nói về "Ứng dụng một trang". Nhiều trang web nổi tiếng như... Gmail sử dụng khái niệm Ứng dụng Trang Đơn (SPA).

SPA là khái niệm trong đó khi người dùng yêu cầu một trang khác, ứng dụng sẽ không điều hướng đến trang đó mà thay vào đó hiển thị chế độ xem trang mới trong chính trang hiện có.

Nó mang lại cho người dùng cảm giác rằng họ chưa bao giờ rời khỏi trang ngay từ đầu. Điều tương tự có thể đạt được trong Angular với sự trợ giúp của Chế độ xem kết hợp với Tuyến đường.

Trong hướng dẫn này, bạn sẽ học-

Chế độ xem là gì?
ng-view Chỉ thị trong AngularJS
Cách triển khai ng-view trong AngularJS bằng ví dụ

Chế độ xem là gì?

Chế độ xem là nội dung được hiển thị cho người dùng. Về cơ bản những gì người dùng muốn xem thì chế độ xem đó của ứng dụng sẽ được hiển thị cho người dùng.

Sự kết hợp giữa các chế độ xem và Tuyến đường giúp người ta phân chia ứng dụng theo các chế độ xem logic và liên kết các chế độ xem khác nhau với Bộ điều khiển.

Việc chia ứng dụng thành các chế độ xem khác nhau và sử dụng Định tuyến để tải phần khác nhau của ứng dụng sẽ giúp phân chia ứng dụng một cách hợp lý và giúp quản lý ứng dụng dễ dàng hơn.

Giả sử rằng chúng ta có một ứng dụng đặt hàng, trong đó khách hàng có thể xem các đơn đặt hàng và đặt đơn hàng mới.

Sơ đồ bên dưới và phần giải thích tiếp theo minh họa cách tạo ứng dụng này dưới dạng một ứng dụng một trang.

Giờ đây, thay vì có hai trang web khác nhau, một trang dành cho “Xem đơn hàng” và một trang dành cho “Đơn hàng mới”, trong AngularJS, thay vào đó, bạn sẽ tạo hai chế độ xem khác nhau có tên là “Xem đơn hàng” và “Đơn hàng mới” trong cùng một trang.

Chúng ta cũng sẽ có 2 liên kết tham chiếu trong ứng dụng của mình có tên là #show và #new.

Vì vậy khi ứng dụng vào MyApp/#show sẽ hiển thị view View Order, đồng thời không rời khỏi trang. Nó sẽ chỉ làm mới phần của trang hiện có với thông tin “Xem đơn hàng”. Điều tương tự cũng xảy ra với chế độ xem "Đơn hàng mới".

Vì vậy, bằng cách này, việc tách ứng dụng thành các chế độ xem khác nhau sẽ trở nên đơn giản hơn để dễ quản lý hơn và dễ dàng thực hiện các thay đổi bất cứ khi nào cần.

Và mỗi chế độ xem sẽ có một bộ điều khiển tương ứng để kiểm soát logic nghiệp vụ cho chức năng đó.

ng-view Chỉ thị trong AngularJS

“ngView” là một lệnh bổ sung cho dịch vụ $route bằng cách đưa mẫu được hiển thị của tuyến hiện tại vào tệp bố cục chính (index.html).

Mỗi khi tuyến đường hiện tại thay đổi, chế độ xem sẽ bao gồm các thay đổi theo cấu hình của dịch vụ $route mà không thay đổi chính trang đó.

Chúng tôi sẽ bao gồm tuyến đường trong chương sau, hiện tại, chúng ta sẽ tập trung vào việc thêm nhiều chế độ xem vào ứng dụng.

Dưới đây là toàn bộ sơ đồ về cách thức hoạt động của toàn bộ quá trình. Chúng tôi sẽ xem xét chi tiết từng quy trình trong ví dụ dưới đây.

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

Chúng ta hãy xem một ví dụ về cách chúng ta có thể triển khai ng-view trong AngularJS. Trong ví dụ của chúng tôi, chúng tôi sẽ trình bày hai tùy chọn cho người dùng,

Một là hiển thị “Sự kiện” và hai là thêm “Sự kiện”.
Khi người dùng nhấp vào liên kết Thêm sự kiện, họ sẽ được hiển thị chế độ xem cho “Thêm sự kiện” và điều tương tự cũng xảy ra với “Sự kiện hiển thị”.

Vui lòng làm theo các bước dưới đây để áp dụng ví dụ này.

Bước 1) Bao gồm tệp tuyến đường góc làm tài liệu tham khảo tập lệnh.

Tệp tuyến đường này là cần thiết để sử dụng các chức năng có nhiều tuyến đường và chế độ xem. Tập tin này có thể được tải xuống từ trang web AngularJS.

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

Trong bước này,

Thêm thẻ href sẽ đại diện cho các liên kết đến “Thêm sự kiện mới” và “Hiển thị sự kiện”.
Ngoài ra, hãy thêm thẻ div với lệnh ng-view sẽ đại diện cho chế độ xem. Điều này sẽ cho phép chèn chế độ xem tương ứng bất cứ khi nào người dùng nhấp vào “liên kết Thêm sự kiện mới” hoặc “liên kết Sự kiện hiển thị”.

Bước 3) Trong thẻ script cho Angular JS, hãy thêm đoạn mã sau.

Chúng ta không cần lo lắng về định tuyến, bây giờ chúng ta sẽ xem xét điều này trong chương sau. Chúng ta hãy chỉ xem mã cho các chế độ xem.

Phần mã này có nghĩa là khi người dùng nhấp vào thẻ href “NewEvent” đã được xác định trong thẻ div trước đó. Nó sẽ đi đến trang web add_event.html và sẽ lấy mã từ đó rồi đưa mã vào chế độ xem. Thứ hai, để xử lý logic nghiệp vụ cho chế độ xem này, hãy truy cập vào “AddEventController”.
Phần mã này có nghĩa là khi người dùng nhấp vào thẻ href “DisplayEvent” đã được xác định trong thẻ div trước đó. Nó sẽ đi đến trang web show_event.html, lấy mã từ đó và đưa mã vào chế độ xem. Thứ hai, để xử lý logic nghiệp vụ cho chế độ xem này, hãy chuyển đến “ShowDisplayController”.
Phần mã này có nghĩa là chế độ xem mặc định được hiển thị cho người dùng là chế độ xem DisplayEvent

Bước 4) Thêm bộ điều khiển để xử lý logic nghiệp vụ.

Tiếp theo là thêm bộ điều khiển để xử lý logic nghiệp vụ cho cả chức năng “DisplayEvent” và “Thêm sự kiện mới”.

Chúng tôi chỉ đơn giản là thêm một biến thông báo vào từng đối tượng phạm vi cho mỗi bộ điều khiển. Thông báo này sẽ được hiển thị khi chế độ xem phù hợp được hiển thị cho người dùng.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.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 display an Event";

    });
</script>
</body>
</html>

Bước 5) Tạo các trang có tên add_event.html và show_event.html

Tiếp theo, Tạo các trang có tên add_event.html và show_event.html. Giữ các trang đơn giản, như được hiển thị bên dưới.

Trong trường hợp của chúng tôi, trang add_event.html sẽ có thẻ tiêu đề cùng với văn bản “Thêm sự kiện mới” và có biểu thức để hiển thị thông báo “Đây là để thêm sự kiện mới”.

Tương tự, trang show_event.html cũng sẽ có thẻ tiêu đề để giữ dòng chữ “Hiển thị sự kiện” và cũng có biểu thức thông báo để hiển thị thông báo “Đây là để hiển thị một Sự kiện”.

Giá trị của biến thông báo sẽ được đưa vào dựa trên bộ điều khiển được gắn vào dạng xem.

Đối với mỗi trang, chúng ta sẽ thêm biến thông báo sẽ được đưa vào từ mỗi bộ điều khiển tương ứng.

add_event.html

<h2>Add New Event</h2>

{{message}}

show_event.html

<h2>Show Event</h2>
	
{{message}}

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

Đầu ra:

Từ đầu ra, chúng ta có thể nhận thấy 2 điều

Thanh địa chỉ sẽ phản ánh chế độ xem hiện tại đang được hiển thị. Vì vậy, vì chế độ xem mặc định là hiển thị màn hình Hiển thị sự kiện nên thanh địa chỉ sẽ hiển thị địa chỉ cho “DisplayEvent”.
Phần này là Chế độ xem, được tạo nhanh chóng. Vì chế độ xem mặc định là Hiển thị sự kiện nên đây là chế độ xem được hiển thị cho người dùng.

Bây giờ hãy nhấp vào liên kết Thêm sự kiện mới trong trang được hiển thị. Bây giờ bạn sẽ nhận được đầu ra dưới đây.

Đầu ra:

Thanh địa chỉ bây giờ sẽ phản ánh rằng chế độ xem hiện tại bây giờ là chế độ xem “Thêm sự kiện mới”. Lưu ý rằng bạn vẫn sẽ ở trên cùng một trang ứng dụng. Bạn sẽ không được chuyển đến một trang ứng dụng mới.
Phần này là Chế độ xem và bây giờ nó sẽ thay đổi để hiển thị HTML cho chức năng “Thêm sự kiện mới”. Vì vậy, bây giờ trong phần này, thẻ tiêu đề “Thêm sự kiện mới” và dòng chữ “Đây là để thêm sự kiện mới” được hiển thị cho người dùng.

AngularJS ng-view với ví dụ: Cách triển khai chế độ xem

Chế độ xem là gì?

ng-view Chỉ thị trong AngularJS

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

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

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

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