Ngày nay, mọi người đều đã nghe nói về "Ứng dụng Trang Đơn". Nhiều trang web nổi tiếng như Gmail sử dụng khái niệm Ứng dụng trang đơn (SPA's).
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 của 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 anh ta không bao giờ rời khỏi trang ngay từ đầu. Điều tương tự cũng có thể đạt được trong Angular với sự trợ giúp của Views kết hợp với Routes.
Trong hướng dẫn này, bạn sẽ học-
- Chế độ xem là gì?
- Chỉ thị ng-view trong AngularJS
- Ví dụ về ng-view
Chế độ xem là gì?
Chế độ xem là nội dung được hiển thị cho người dùng. Về cơ bản người dùng muốn xem gì, theo đó 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 khung nhìn và Routes giúp người ta phân chia một ứng dụng trong các khung nhìn hợp lý và liên kết các khung nhìn khác nhau với Bộ điều khiển.
Việc chia ứng dụng thành các dạng xem khác nhau và sử dụng Định tuyến để tải các phần khác nhau của ứng dụng giúp phân chia ứng dụng một cách hợp lý và dễ quản lý 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 những đơn hàng mới.
Sơ đồ dưới đây và phần giải thích tiếp theo trình bày cách tạo ứng dụng này như một ứng dụng trang đơn.
Bây giờ, thay vì có hai trang web khác nhau, một trang cho "Xem đơn đặt hàng" và một trang khác cho "Đơn đặt hàng mới", trong AngularJS, thay vào đó, bạn sẽ tạo hai chế độ xem khác nhau được gọi là "Xem đơn đặt hàng" và "Đơn đặt hàng mới" trên cùng một trang.
Chúng tôi cũng sẽ có 2 liên kết tham chiếu trong ứng dụng của chúng tôi được gọi là #show và #new.
- Vì vậy khi ứng dụng vào MyApp / # show, nó sẽ hiện ra chế độ View Order, đồng thời nó sẽ 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 đặt hàng". Tương tự đối với chế độ xem "Đơn đặt hàng mới".
Vì vậy, theo cách này, việc tách ứng dụng thành các dạng xem khác nhau 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 yêu cầu.
Và mỗi khung nhìn sẽ có một bộ điều khiển tương ứng để điều khiển logic nghiệp vụ cho chức năng đó.
Chỉ thị ng-view trong AngularJS
"NgView" là một chỉ thị bổ sung cho dịch vụ $ route bằng cách đưa mẫu được kết xuất 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 được bao gồm sẽ 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ẽ trình bày các lộ trình trong chương sau, hiện tại, chúng tôi sẽ tập trung vào việc thêm nhiều chế độ xem vào ứng dụng của mình.
Dưới đây là toàn bộ sơ đồ về cách thức hoạt động của toàn bộ quy trình. Chúng tôi sẽ trình bày chi tiết từng quy trình trong ví dụ dưới đây.
Ví dụ về ng-view
Hãy xem một ví dụ về cách chúng ta có thể triển khai các khung nhìn.
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ị một "Sự kiện", và hai là thêm một "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à tương tự với "Sự kiện hiển thị".
Vui lòng làm theo các bước bên dưới để có được ví dụ này.
Bước 1) Bao gồm tệp góc đường làm tham chiếu tập lệnh.
Tệp định tuyến này là cần thiết để sử dụng các chức năng của việc có nhiều tuyến đường và khung nhìn. Tệp này có thể được tải xuống từ trang web angleJS.
Bước 2) Trong bước này,
- Thêm các 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ế độ xem tương ứng được đưa vào 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 của bạn cho Angular JS, hãy thêm đoạn mã sau.
Đừng lo lắng về định tuyến, bây giờ, chúng ta sẽ thấy điều này trong chương sau. Bây giờ 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ẽ chuyển đến trang web add_event.html, và sẽ lấy mã từ đó và đưa nó vào chế độ xem. Thứ hai để xử lý logic nghiệp vụ cho chế độ xem này, hãy chuyển đến "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 nó 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) 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 mỗi đố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 thích hợp được hiển thị cho người dùng.
Event Registration Guru99 Global Event
Bước 5) Tạo các trang có tên add_event.html và show_event.html. Giữ các trang đơn giản như hình dưới đây.
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 đề để chứa văn bản "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ị 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 khung nhìn.
Đối với mỗi trang, chúng tôi sẽ thêm biến thông báo, biến này sẽ được đưa vào từ mỗi bộ điều khiển tương ứng.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Nếu mã được thực thi thành công, Đầu ra sau đây sẽ được hiển thị khi bạn chạy mã của mình trong 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ỉ 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à Chế độ xem 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 kết quả bên dưới.
Đầ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 dẫ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à văn bản "Đây là để thêm một sự kiện mới" được hiển thị cho người dùng.