Ví dụ về định tuyến AngularJS với các tham số | Các tuyến đường trong Angular – giải thích những gì các tuyến đường góc

Trước khi bắt đầu với định tuyến, chúng ta hãy xem tổng quan nhanh về Ứng dụng một trang. Ứng dụng trang đơn hoặc (SPA) là các ứng dụng web tải một trang HTML duy nhất và cập nhật động

Bạn đang xem: giải thích những gì các tuyến của anglejs

Trước khi chúng ta tìm hiểu cách định tuyến hoạt động trong Angular, chúng ta hãy xem tổng quan nhanh về Ứng dụng một trang.

Ứng dụng một trang là gì?

Ứng dụng trang đơn hoặc (SPA) là các ứng dụng web tải một trang HTML và cập nhật động trang dựa trên tương tác của người dùng với ứng dụng web.

Định tuyến trong AngularJS là gì?

Định tuyến trong AngularJS là một phương pháp cho phép bạn tạo các Ứng dụng Trang Đơn. Nó cho phép bạn tạo các URL khác nhau cho các nội dung khác nhau trong các ứng dụng web của bạn. Định tuyến AngularJS cũng giúp hiển thị nhiều nội dung tùy thuộc vào tuyến đường được chọn. Nó được chỉ định trong URL sau dấu #.

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

Hãy lấy ví dụ về một trang web được lưu trữ qua URL http://example.com/index.html .

Trên trang này, bạn sẽ lưu trữ trang chính của ứng dụng của mình. Giả sử nếu ứng dụng đang tổ chức một Sự kiện và một người muốn xem các sự kiện khác nhau được hiển thị là gì hoặc muốn xem chi tiết của một sự kiện cụ thể hoặc xóa một sự kiện. Trong một ứng dụng Trang đơn, khi định tuyến được bật, tất cả chức năng này sẽ khả dụng qua các liên kết sau

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

Ký hiệu # sẽ được sử dụng cùng với các tuyến khác nhau (ShowEvent, DisplayEvent và DeleteEvent).

  • Vì vậy, nếu người dùng muốn xem tất cả Sự kiện, họ sẽ được chuyển hướng đến liên kết ( http://example.com/index.html#ShowEvent ), nếu không
  • Nếu họ muốn chỉ xem một sự kiện cụ thể, họ sẽ được chuyển hướng lại đến liên kết ( http://example.com/index.html#DisplayEvent ) hoặc
  • Nếu họ muốn xóa một sự kiện, họ sẽ được dẫn đến liên kết http://example.com/index.html#DeleteEvent .

Lưu ý rằng URL chính được giữ nguyên.

Thêm tuyến AngularJS bằng $ routeProvider

Vì vậy, như chúng ta đã thảo luận trước đó, các tuyến trong AngularJS được sử dụng để định tuyến người dùng đến một chế độ xem khác về ứng dụng của bạn. Và quá trình định tuyến này được thực hiện trên cùng một trang HTML để người dùng có trải nghiệm mà họ chưa rời khỏi trang.

Để triển khai định tuyến, các bước chính sau đây phải được triển khai trong ứng dụng của bạn theo bất kỳ thứ tự cụ thể nào.

  1. Tham chiếu tới angle-route.js. Đây là tệp JavaScript do Google phát triển có tất cả các chức năng định tuyến. Điều này cần phải được đặt trong ứng dụng của bạn để nó có thể tham chiếu đến tất cả các mô-đun chính cần thiết để định tuyến.
  2. Bước quan trọng tiếp theo là thêm phần phụ thuộc vào mô-đun ngRoute từ bên trong ứng dụng của bạn. Sự phụ thuộc này là bắt buộc để chức năng định tuyến có thể được sử dụng trong ứng dụng. Nếu phần phụ thuộc này không được thêm vào, thì một người sẽ không thể sử dụng định tuyến trong ứng dụng angle.JS.

Dưới đây là cú pháp chung của câu lệnh này. Đây chỉ là một khai báo bình thường của một mô-đun có bao gồm từ khóa ngRoute.

 var module = angle.module ("sampleApp", ['ngRoute']); 
  1. Bước tiếp theo sẽ là định cấu hình $ routeProvider của bạn. Điều này là bắt buộc để cung cấp các tuyến đường khác nhau trong ứng dụng của bạn. Dưới đây là cú pháp chung của câu lệnh này rất dễ hiểu. Nó chỉ nói rằng khi đường dẫn có liên quan được chọn, hãy sử dụng đường dẫn để hiển thị chế độ xem đã cho cho người dùng.
 when (đường dẫn, tuyến đường) 
  1. Các liên kết đến tuyến đường của bạn từ bên trong trang HTML của bạn. Trong trang HTML của mình, bạn sẽ thêm các liên kết tham chiếu đến các tuyến có sẵn khác nhau trong ứng dụng của mình.
 & lt; a href = "# / route1" & gt; Route 1 & lt; / a & gt; & lt; br / & gt; 
  1. Cuối cùng sẽ là việc bao gồm chỉ thị ng-view, thường sẽ nằm trong thẻ div. Điều này sẽ được sử dụng để đưa nội dung của chế độ xem khi tuyến có liên quan được chọn.

Ví dụ về định tuyến AngularJS

Bây giờ, hãy xem ví dụ về định tuyến bằng các bước được đề cập ở trên.

Trong ví dụ định tuyến AngularJS của chúng tôi với các tham số,

Chúng tôi sẽ giới thiệu 2 liên kết cho người dùng,

  • Một là hiển thị các chủ đề cho khóa học Angular JS và một là hiển thị các chủ đề cho khóa học Node.js .
  • Khi người dùng nhấp vào một trong hai liên kết, các chủ đề cho khóa học đó sẽ được hiển thị.

Bước 1) Bao gồm tệp đường góc làm tham chiếu tập lệnh.

Ví dụ về định tuyến AngularJS

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à chế độ xem. Tệp này có thể được tải xuống từ trang web angle.JS.

Bước 2) Thêm các thẻ href sẽ đại diện cho các liên kết đến “Chủ đề Angular JS” và “Chủ đề Node JS”.

Ví dụ về tuyến đường AngularJS

Bước 3) 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 “Chủ đề JS góc cạnh” hoặc “Chủ đề JS nút”.

Ví dụ định tuyến trong AngularJS

Bước 4) Trong thẻ tập lệnh của bạn cho AngularJS, hãy thêm “mô-đun ngRoute” và dịch vụ “$ routeProvider”.

Ví dụ về tuyến đường AngularJS

Giải thích mã:

  1. Bước đầu tiên là đảm bảo bao gồm “mô-đun ngRoute”. Với điều này, Angular sẽ tự động xử lý việc định tuyến trong ứng dụng của bạn. Mô-đun ngRoute do Google phát triển có tất cả các chức năng cho phép khả năng định tuyến. Bằng cách thêm mô-đun này, ứng dụng sẽ tự động hiểu tất cả các lệnh định tuyến.
  2. $ routeprovider là một dịch vụ mà góc sử dụng để lắng nghe trong nền các tuyến đường được gọi. Vì vậy, khi người dùng nhấp vào một liên kết, trình cung cấp dịch vụ định tuyến trong AngularJS sẽ phát hiện ra điều này và sau đó quyết định chọn tuyến đường nào.
  3. Tạo một tuyến đường cho liên kết Angular – Khối này có nghĩa là khi liên kết Angular được nhấp vào, hãy đưa tệp Angular.html vào và cũng sử dụng Controller ‘AngularController’ để xử lý mọi logic nghiệp vụ.
  4. Tạo một tuyến cho liên kết Node – Khối này có nghĩa là khi liên kết Node được nhấp vào, hãy đưa tệp Node.html vào và cũng sử dụng Bộ điều khiển ‘NodeController’ để xử lý mọi logic nghiệp vụ.

Bước 5) Tiếp theo là thêm bộ điều khiển để xử lý logic nghiệp vụ cho cả AngularController và NodeController.

Trong mỗi bộ điều khiển, chúng tôi đang tạo một mảng các cặp khóa-giá trị để lưu trữ tên Chủ đề và mô tả cho mỗi khóa học. Biến mảng ‘hướng dẫn’ được thêm vào đối tượng phạm vi cho mỗi bộ điều khiển.

Ví dụ về định tuyến AngularJS

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
    & lt; meta chrset = "UTF 8" & gt;
& lt; / head & gt;
& lt; body ng-app = "sampleApp" & gt;
& lt; title & gt; Đăng ký Sự kiện & lt; / title & gt;
& lt; script src = "https://code.angularjs.org/1.6.9/angular-route.js" & gt; & lt; / script & gt;
& lt; script src = "https://code.angularjs.org/1.6.9/angular.min.js" & gt; & lt; / script & gt;
& lt; script src = "https://code.angularjs.org/1.6.9/angular.js" & gt; & lt; / script & gt;

& lt; h1 & gt; Sự kiện toàn cầu Guru99 & lt; / h1 & gt;

& lt; div class = "container" & gt;
    & lt; ul & gt;
        & lt; li & gt; & lt; a href = "# Angular" & gt; Angular JS Chủ đề & lt; / a & gt; & lt; / li & gt;
        & lt; li & gt; & lt; a href = "# Node.html" & gt; Node JS Chủ đề & lt; / a & gt; & lt; / li & gt;
    & lt; / ul & gt;
    & lt; div ng-view & gt; & lt; / div & gt;
& lt; / div & gt;

& lt; script & gt;
    var sampleApp = angle.module ('sampleApp', ['ngRoute']);
    sampleApp.config (['$ routeProvider',

        hàm ($ routeProvider) {
        $ routeProvider.
        when ('/ Angular', {
            templateUrl: '/Angular.html',
            bộ điều khiển: 'AngularController'
        }).
        when ("/ Node", {
            templateUrl: '/Node.html',
            bộ điều khiển: 'NodeController'
        });
    }]);
    sampleApp.controller ('AngularController', function ($ scope) {

        $ scope.tutorial = [
            {Tên: "Bộ điều khiển", Mô tả: "Bộ điều khiển đang hoạt động"},
            {Tên: "Mô hình", Mô tả: "Mô hình và dữ liệu liên kết"},
            {Tên: "Chỉ thị", Mô tả: "Tính linh hoạt của Chỉ thị"}
        ]
    });

    sampleApp.controller ('NodeController', function ($ scope) {

        $ scope.tutorial = [
            {Name: "Promise", Description: "Power of Promise"},
            {Tên: "Sự kiện", Mô tả: "Sự kiện của Node.js"},
            {Tên: "Mô-đun", Mô tả: "Mô-đun trong Node.js"}
            ]
    });

& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt; 

Bước 6) Tạo các trang có tên Angular.html và Node.html. Đối với mỗi trang, chúng tôi sẽ thực hiện các bước dưới đây.

Xem Thêm  Làm cách nào để lấy ID của nút được nhấp bằng JavaScript / jQuery? - nút bấm javascript theo id

Các bước này sẽ đảm bảo rằng tất cả các cặp khóa-giá trị của mảng được hiển thị trên mỗi trang.

  1. Sử dụng lệnh ng-repeat để xem qua từng cặp khóa-giá trị được xác định trong biến hướng dẫn.
  2. Hiển thị tên và mô tả của từng cặp khóa-giá trị.
  • Angular.html

Ví dụ về định tuyến AngularJS với tham số

 & lt; h2 & gt; Anguler & lt; / h2 & gt;
& lt; ul ng-repeat = "ptutor trong hướng dẫn" & gt;
    & lt; li & gt; Khóa học: {{ptutor.Name}} - {{ptutor.Description}} & lt; / li & gt;
& lt; / ul & gt; 
  • Node.html

AngularJS Routes ($ route) - Học trong 10 phút!

 & lt; h2 & gt; Nút & lt; / h2 & gt;
& lt; ul ng-repeat = "ptutor trong hướng dẫn" & gt;
    & lt; li & gt; Khóa học: {{ptutor.Name}} - {{ptutor.Description}} & lt; / li & gt;
& lt; / ul & gt; 

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:

Ví dụ về quy trình trong Angular

Nếu bạn nhấp vào liên kết AngularJS Topics, kết quả bên dưới sẽ được hiển thị.

Ví dụ về định tuyến theo góc

Kết quả cho thấy rõ ràng rằng,

  • Khi liên kết “Angular JS Topics” được nhấp vào, routeProvider mà chúng tôi đã khai báo trong mã của mình sẽ quyết định rằng mã Angular.html sẽ được đưa vào.
  • Mã này sẽ được đưa vào thẻ “div”, thẻ này chứa chỉ thị ng-view. Ngoài ra, nội dung cho mô tả khóa học đến từ “biến hướng dẫn”, là một phần của đối tượng phạm vi được xác định trong AngularController.
  • Khi một người nhấp vào Chủ đề Node.js , kết quả tương tự sẽ diễn ra và lượt xem các chủ đề Node.js sẽ được hiển thị.
  • Ngoài ra, hãy lưu ý rằng URL của trang vẫn giữ nguyên, nó chỉ là tuyến đường sau thẻ # thay đổi. Và đây là khái niệm về các ứng dụng trang đơn. Thẻ #hash trong URL là một dấu phân cách phân tách tuyến đường (trong trường hợp của chúng tôi là ‘Angular’ như được hiển thị trong hình trên) và trang HTML chính (Sample.html)

Ví dụ về tuyến đường góc

Tạo tuyến đường mặc định trong AngularJS

Định tuyến trong AngularJS cũng cung cấp cơ sở để có một tuyến đường mặc định. Đây là tuyến đường được chọn nếu không có tuyến đường nào phù hợp với tuyến đường hiện tại.

Tuyến mặc định được tạo bằng cách thêm điều kiện sau khi xác định dịch vụ $ routeProvider.

Cú pháp dưới đây chỉ đơn giản có nghĩa là chuyển hướng đến một trang khác nếu bất kỳ tuyến đường hiện có nào không khớp.

 nếu không ({
    redirectTo: 'trang'
}); 

Hãy sử dụng cùng một ví dụ ở trên và thêm một tuyến đường mặc định vào dịch vụ $ routeProvider của chúng tôi.

Tạo tuyến mặc định trong AngularJS
Hàm

 ($ routeProvider) {
$ routeProvider.

when ('/ Angular', {
templateUrl: 'Angular.html',
bộ điều khiển: 'AngularController'
}).

when ("/ Node", {
templateUrl: 'Node.html',
bộ điều khiển: 'NodeController'
}).
nếu không thì({
    redirectTo: '/ Angular'
});
}]); 

Giải thích mã:

  1. Ở đây chúng tôi đang sử dụng mã tương tự như trên với sự khác biệt duy nhất là chúng tôi đang sử dụng câu lệnh else và tùy chọn “redirectTo” để chỉ định chế độ xem nào sẽ được tải nếu không có tuyến đường nào được chỉ định. Trong trường hợp của chúng tôi, chúng tôi muốn hiển thị chế độ xem ‘/ Angular’.

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:

Cách tạo tuyến đường mặc định trong AngularJS

Từ đầu ra,

  • Bạn có thể thấy rõ rằng chế độ xem mặc định được hiển thị là chế độ xem JS góc cạnh.
  • Điều này là do khi tải trang, nó sẽ chuyển đến tùy chọn ‘nếu không’ trong hàm $ routeProvider và tải chế độ xem ‘/ Angular’.

Cách truy cập các thông số từ Tuyến AngularJS

Angular cũng cung cấp chức năng cung cấp các tham số trong quá trình định tuyến. Các tham số được thêm vào cuối tuyến trong URL, ví dụ: http: //guru99/index.html#/Angular/1 . Trong ví dụ định tuyến Angular này,

  1. , http: //guru99/index.html là URL ứng dụng chính của chúng tôi
  2. Ký hiệu # là dấu phân cách giữa URL ứng dụng chính và tuyến đường.
  3. Angular là lộ trình của chúng tôi
  4. Và cuối cùng ‘1’ là tham số được thêm vào tuyến đường của chúng tôi

Cú pháp về giao diện của các tham số trong URL được hiển thị bên dưới:

HTMLPage # / route / parameter

Tại đây, bạn sẽ nhận thấy rằng tham số được chuyển sau tuyến đường trong URL.

Vì vậy, trong ví dụ về các tuyến AngularJS của chúng tôi, ở trên đối với các chủ đề Angular JS, chúng tôi có thể chuyển một tham số như được hiển thị bên dưới

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

Ở đây, các thông số của 1, 2 và 3 có thể thực sự đại diện cho topicid.

Hãy xem xét chi tiết cách chúng tôi có thể triển khai tuyến đường Angular với tham số:

Bước 1) Thêm mã sau vào chế độ xem của bạn

  1. Thêm một bảng để hiển thị tất cả các chủ đề của khóa học Angular JS cho người dùng
  2. Thêm một hàng trong bảng để hiển thị chủ đề “Bộ điều khiển”. Đối với hàng này, hãy thay đổi thẻ href thành “Angular / 1”, nghĩa là khi người dùng nhấp vào chủ đề này, thông số 1 sẽ được chuyển vào URL cùng với tuyến đường.
  3. Thêm một hàng trong bảng để hiển thị chủ đề “Mô hình”. Đối với hàng này, hãy thay đổi thẻ href thành “Angular / 2” có nghĩa là khi người dùng nhấp vào chủ đề này, thông số 2 sẽ được chuyển vào URL cùng với tuyến đường.
  4. Thêm một hàng trong bảng để hiển thị chủ đề “Chỉ thị”. Đối với hàng này, hãy thay đổi thẻ href thành “Angular / 3”, nghĩa là khi người dùng nhấp vào chủ đề này, thông số 3 sẽ được chuyển vào URL cùng với tuyến đường.

Truy cập tham số từ tuyến AngularJS

Bước 2) Thêm id chủ đề trong chức năng dịch vụ Routeprovider
Trong hàm dịch vụ routeprovider, hãy thêm: topicId để biểu thị rằng bất kỳ tham số nào được truyền vào URL sau tuyến đường sẽ được gán cho biến topicId.

Xem Thêm  JSON Literals - đối tượng js từ json

Cách truy cập tham số từ tuyến AngularJS

Bước 3) Thêm mã cần thiết vào bộ điều khiển

  1. Trước tiên, hãy nhớ thêm “$ routeParams” làm tham số khi xác định chức năng bộ điều khiển. Tham số này sẽ có quyền truy cập vào tất cả các tham số tuyến đường được truyền trong URL.
  2. Tham số “routeParams” có tham chiếu đến đối tượng topicId, được truyền dưới dạng tham số tuyến. Ở đây chúng tôi đang đính kèm biến ‘$ routeParams.topicId’ vào đối tượng phạm vi của chúng tôi dưới dạng biến ‘$ scope.tutotialid’. Điều này đang được thực hiện để nó có thể được tham chiếu trong chế độ xem của chúng tôi thông qua biến hướng dẫn.

Các bước để truy cập thông số từ tuyến AngularJS

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;

    & lt; meta chrset = "UTF 8" & gt;
    & lt; title & gt; Đăng ký Sự kiện & lt; / title & gt;
& lt; / head & gt;
& lt; body ng-app = "sampleApp" & gt;

& lt; script src = "https://code.angularjs.org/1.6.9/angular-route.js" & gt; & lt; / script & gt;
& lt; script src = "https://code.angularjs.org/1.6.9/angular.min.js" & gt; & lt; / script & gt;
& lt; script src = "lib / bootstrap.js" & gt; & lt; / script & gt;
& lt; script src = "lib / bootstrap.css" & gt; & lt; / script & gt;

& lt; h1 & gt; Sự kiện toàn cầu Guru99 & lt; / h1 & gt;
& lt; table class = "table table-sọc" & gt;
    & lt; thead & gt;
    & lt; tr & gt; & lt; th & gt; # & lt; / th & gt; & lt; th & gt; Chủ đề Angular JS & lt; / th & gt; & lt; th & gt; Mô tả & lt; / th & gt; & lt; th & gt; & lt; / th & gt; & lt; / tr & gt; & lt; / thead & gt;
    & lt; tbody & gt;
    & lt; tr & gt;
        & lt; td & gt; l & lt; / td & gt; & lt; td & gt; l & lt; / td & gt; & lt; td & gt; Bộ điều khiển & lt; / td & gt;
        & lt; td & gt; & lt; a href = "# Angular / l" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; tr & gt;
        & lt; td & gt; 2 & lt; / td & gt; & lt; td & gt; 2 & lt; / td & gt; & lt; td & gt; Mô hình & lt; / td & gt;
        & lt; td & gt; & lt; a href = "# Angular / 2" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; tr & gt;
        & lt; td & gt; 3 & lt; / td & gt; & lt; td & gt; 3 & lt; / td & gt; & lt; td & gt; Chỉ thị & lt; / td & gt;
        & lt; td & gt; & lt; a href = "# Angular / 3" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / tbody & gt;
& lt; / table & gt;

& lt; script & gt;
    var sampleApp = angle.module ('sampleApp', ['ngRoute']);

    sampleApp.config (
        hàm ($ routeProvider) {
            $ routeProvider.
            when ('/ Angular /: topicId', {
                templateUrl: 'Angular.html',
                bộ điều khiển: 'AngularController'
            })
        });

    sampleApp.controller ('AngularController', function ($ scope, $ routeParams) {

        $ scope.tutorialid = $ routeParams.topicId

    });
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Bước 4) Thêm biểu thức vào biến hiển thị
Thêm biểu thức để hiển thị biến hướng dẫn trong trang Angular.html.

Quy trình truy cập tham số từ tuyến AngularJS

 & lt; h2 & gt; Anguler & lt; / h2 & gt;

& lt; br & gt; & lt; br & gt; {{tutorialid}}

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:

Truy cập tham số từ tuyến AngularJS

Trong màn hình xuất,

  • Nếu bạn nhấp vào liên kết Chi tiết chủ đề cho chủ đề đầu tiên, số 1 sẽ được thêm vào URL.
  • Sau đó, số này sẽ được dịch vụ routeparam của Angular.JS lấy làm đối số “routeparam” và sau đó bộ điều khiển của chúng tôi có thể truy cập vào.

Cách sử dụng Dịch vụ Angular $ route

Dịch vụ $ route cho phép bạn truy cập các thuộc tính của tuyến đường. Dịch vụ $ route có sẵn dưới dạng một tham số khi hàm được xác định trong bộ điều khiển. Cú pháp chung về cách tham số $ route có sẵn từ bộ điều khiển được hiển thị bên dưới;

 myApp.controller ('MyController', hàm ($ scope, $ route) 
  1. myApp là mô-đun góc cạnh.JS được xác định cho các ứng dụng của bạn
  2. MyController là tên của bộ điều khiển được xác định cho ứng dụng của bạn
  3. Giống như biến $ scope được tạo sẵn cho ứng dụng của bạn, được sử dụng để chuyển thông tin từ bộ điều khiển đến chế độ xem. Tham số $ route được sử dụng để truy cập các thuộc tính của route.

Hãy xem cách chúng tôi có thể sử dụng dịch vụ $ route.

Trong ví dụ này,

  • Chúng tôi sẽ tạo một biến tùy chỉnh đơn giản có tên là “mytext”, biến này sẽ chứa chuỗi “Đây là một góc.”
  • Chúng tôi sẽ đính kèm biến này vào tuyến đường của chúng tôi. Và sau đó, chúng tôi sẽ truy cập chuỗi này từ bộ điều khiển của chúng tôi bằng cách sử dụng dịch vụ $ route và sau đó sử dụng đối tượng phạm vi để hiển thị điều đó trong chế độ xem của chúng tôi.

Vì vậy, hãy xem các bước chúng ta cần thực hiện để đạt được điều này.

Bước 1) Thêm cặp khóa-giá trị tùy chỉnh vào tuyến đường. Ở đây, chúng tôi đang thêm một khóa có tên là ‘mytext’ và gán cho nó một giá trị là “Đây là một góc.”

Cách sử dụng Dịch vụ Angular $ route

Bước 2) Thêm mã có liên quan vào bộ điều khiển

  1. Thêm tham số $ route vào chức năng bộ điều khiển. Tham số $ route là một tham số chính được xác định ở dạng góc, cho phép một người truy cập vào các thuộc tính của đường.
  2. Có thể truy cập biến “mytext” đã được xác định trong tuyến thông qua tham chiếu $ route.current. Sau đó, điều này được gán cho biến ‘văn bản’ của đối tượng phạm vi. Sau đó, biến văn bản có thể được truy cập từ chế độ xem tương ứng.

Sử dụng Dịch vụ Angular $ route

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;

    & lt; meta chrset = "UTF 8" & gt;
    & lt; title & gt; Đăng ký Sự kiện & lt; / title & gt;
& lt; / head & gt;
& lt; body ng-app = "sampleApp" & gt;

& lt; script src = "https://code.angularjs.org/1.6.9/angular-route.js" & gt; & lt; / script & gt;
& lt; script src = "https://code.angularjs.org/1.6.9/angular.min.js" & gt; & lt; / script & gt;
& lt; script src = "lib / bootstrap.js" & gt; & lt; / script & gt;
& lt; script src = "lib / bootstrap.css" & gt; & lt; / script & gt;

& lt; h1 & gt; Sự kiện toàn cầu Guru99 & lt; / h1 & gt;
& lt; table class = "table table-sọc" & gt;
    & lt; thead & gt;
    & lt; tr & gt; & lt; th & gt; # & lt; / th & gt; & lt; th & gt; Chủ đề Angular JS & lt; / th & gt; & lt; th & gt; Mô tả & lt; / th & gt; & lt; th & gt; & lt; / th & gt; & lt; / tr & gt; & lt; / thead & gt;
    & lt; tbody & gt;
    & lt; tr & gt;
        & lt; td & gt; l & lt; / td & gt; & lt; td & gt; l & lt; / td & gt; & lt; td & gt; Bộ điều khiển & lt; / td & gt;
        & lt; td & gt; & lt; a href = "# Angular / l" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; tr & gt;
        & lt; td & gt; 2 & lt; / td & gt; & lt; td & gt; 2 & lt; / td & gt; & lt; td & gt; Mô hình & lt; / td & gt;
        & lt; td & gt; & lt; a href = "# Angular / 2" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; tr & gt;
        & lt; td & gt; 3 & lt; / td & gt; & lt; td & gt; 3 & lt; / td & gt; & lt; td & gt; Chỉ thị & lt; / td & gt;
        & lt; td & gt; & lt; a href = "# Angular / 3" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / tbody & gt;
& lt; / table & gt;

& lt; script & gt;
    var sampleApp = angle.module ('sampleApp', ['ngRoute']);

    sampleApp.config (['$ routeProvider',
        hàm ($ routeProvider) {
            $ routeProvider.
            when ('/ Angular /: topicId', {
                mytext: "Đây là góc cạnh",
                templateUrl: 'Angular.html',
                bộ điều khiển: 'AngularController'
            })
        }]);

    sampleApp.controller ('AngularController', hàm ($ scope, $ routeParams, $ route) {

        $ scope.tutorialid = $ routeParams.topicId;
        $ scope.text = $ route.current.mytext;

    });
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Bước 3) Thêm tham chiếu đến biến văn bản từ đối tượng phạm vi dưới dạng một biểu thức. Điều này sẽ được thêm vào trang Angular.html của chúng tôi như được hiển thị bên dưới.

Xem Thêm  Tham chiếu HTML ISO-8859-1 - iso 8859 1 bộ ký tự

Điều này sẽ làm cho văn bản “Đây là góc cạnh” được đưa vào chế độ xem. Biểu thức {{tutorialid}} giống như biểu thức đã thấy trong chủ đề trước và biểu thức này sẽ hiển thị số ‘1’.

Các bước sử dụng Dịch vụ Angular $ route

 & lt; h2 & gt; Anguler & lt; / h2 & gt;

& lt; br & gt; & lt; br & gt; {{text}}

& lt; br & gt; & lt; br & gt;

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:

Cách sử dụng Dịch vụ Angular $ route

Từ đầu ra,

  • Chúng ta có thể thấy rằng văn bản “Đây là góc cạnh” cũng được hiển thị khi chúng ta nhấp vào bất kỳ liên kết nào trong bảng. Id chủ đề cũng được hiển thị cùng lúc với văn bản.

Bật định tuyến HTML5

Định tuyến HTML5 về cơ bản được sử dụng để tạo URL sạch. Nó có nghĩa là xóa thẻ bắt đầu bằng # khỏi URL. Vì vậy, các URL định tuyến, khi định tuyến HTML5 được sử dụng, sẽ xuất hiện như hình dưới đây

Sample.html / Angular / 1

Sample.html / Angular / 2

Sample.html / Angular / 3

Khái niệm này thường được gọi là hiển thị URL đẹp cho người dùng.

Có 2 bước chính cần được thực hiện để định tuyến HTML5.

  1. Định cấu hình $ locationProvider
  2. Đặt cơ sở của chúng tôi cho các liên kết tương đối

Hãy xem xét chi tiết cách thực hiện các bước nêu trên trong ví dụ của chúng tôi ở trên

Bước 1) Thêm mã có liên quan vào mô-đun góc cạnh

  1. Thêm hằng số baseURL vào ứng dụng – Điều này là bắt buộc đối với định tuyến HTML5 để ứng dụng biết vị trí cơ sở của ứng dụng là gì.
  2. Thêm các dịch vụ $ locationProvider. Dịch vụ này cho phép bạn xác định mã html5Mode.
  3. Đặt html5Mode của dịch vụ $ locationProvider thành true.

Bật định tuyến HTML5

Bước 2) Xóa tất cả các thẻ # cho các liên kết (‘Angular / 1’, ‘Angular / 2’, ‘Angular / 3’) để tạo URL dễ đọc.

Cách bật Định tuyến HTML5

 & lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;

    & lt; meta chrset = "UTF 8" & gt;
    & lt; title & gt; Đăng ký Sự kiện & lt; / title & gt;
& lt; / head & gt;
& lt; body ng-app = "sampleApp" & gt;

& lt; script src = "https://code.angularjs.org/1.6.9/angular-route.js" & gt; & lt; / script & gt;
& lt; script src = "https://code.angularjs.org/1.6.9/angular.min.js" & gt; & lt; / script & gt;
& lt; script src = "lib / bootstrap.js" & gt; & lt; / script & gt;
& lt; script src = "lib / bootstrap.css" & gt; & lt; / script & gt;

& lt; h1 & gt; Sự kiện toàn cầu Guru99 & lt; / h1 & gt;
& lt; table class = "table table-sọc" & gt;
    & lt; thead & gt;
    & lt; tr & gt; & lt; th & gt; # & lt; / th & gt; & lt; th & gt; Chủ đề Angular JS & lt; / th & gt; & lt; th & gt; Mô tả & lt; / th & gt; & lt; th & gt; & lt; / th & gt; & lt; / tr & gt; & lt; / thead & gt;
    & lt; tbody & gt;
    & lt; tr & gt;
        & lt; td & gt; l & lt; / td & gt; & lt; td & gt; l & lt; / td & gt; & lt; td & gt; Bộ điều khiển & lt; / td & gt;
        & lt; td & gt; & lt; a href = "Angular / l" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; tr & gt;
        & lt; td & gt; 2 & lt; / td & gt; & lt; td & gt; 2 & lt; / td & gt; & lt; td & gt; Mô hình & lt; / td & gt;
        & lt; td & gt; & lt; a href = "Angular / 2" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; tr & gt;
        & lt; td & gt; 3 & lt; / td & gt; & lt; td & gt; 3 & lt; / td & gt; & lt; td & gt; Chỉ thị & lt; / td & gt;
        & lt; td & gt; & lt; a href = "Angular / 3" & gt; Chi tiết chủ đề & lt; / a & gt; & lt; / td & gt;
    & lt; / tr & gt;
    & lt; / tbody & gt;
& lt; / table & gt;

& lt; script & gt;
    var sampleApp = angle.module ('sampleApp', ['ngRoute']);
    sampleApp.constant ("baseUrl", "http: // localhost: 63342 / unsitled / Sample.html / Angular");

    sampleApp.config (
        hàm ($ routeProvider, $ locationProvider) {
            $ routeProvider.
            when ('/ Angular /: topicId', {
                templateUrl: 'Angular.html',
                bộ điều khiển: 'AngularController'
            })
        });

    sampleApp.controller ('AngularController', hàm ($ scope, $ routeParams, $ route) {

        $ scope.tutorialid = $ routeParams.topicId

    });
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

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:

Các bước để bật Định tuyến HTML5

Từ đầu ra,

  • Bạn có thể thấy rằng thẻ # không có ở đó khi truy cập ứng dụng.

Tóm tắt

  • Định tuyến được sử dụng để trình bày các chế độ xem khác nhau cho người dùng trên cùng một trang web. Về cơ bản, đây là khái niệm được sử dụng trong các ứng dụng Trang đơn được triển khai cho hầu hết các ứng dụng web hiện đại
  • Một tuyến đường mặc định có thể được thiết lập để định tuyến theo góc.JS. Nó được sử dụng để xác định đâu sẽ là chế độ xem mặc định được hiển thị cho người dùng
  • Các tham số có thể được chuyển tới tuyến đường qua URL dưới dạng tham số tuyến đường. Các tham số này sau đó được truy cập bằng cách sử dụng tham số $ routeParams trong bộ điều khiển
  • Dịch vụ $ route có thể được sử dụng để xác định các cặp khóa-giá trị tùy chỉnh trong tuyến mà sau đó có thể được truy cập từ bên trong chế độ xem
  • Định tuyến HTML5 được sử dụng để xóa #tag khỏi URL định tuyến ở dạng góc cạnh để tạo thành một URL đẹp


Xem thêm những thông tin liên quan đến chủ đề giải thích những gì các tuyến đường góc

Thuyết minh giáo lý – MỘT KIẾP LÀM NGƯỜI – TTV: Đạt Thật (15-06-Nhâm Dần) – 13-07-2022

alt

  • Tác giả: Cơ Quan Phổ Thông Giáo Lý Đại Đạo
  • Ngày đăng: 2022-07-12
  • Đánh giá: 4 ⭐ ( 7403 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Đường kinh tuyến gốc và vĩ tuyến gốc được ghi số bao nhiêu?

  • Tác giả: hoc247.net
  • Đánh giá: 3 ⭐ ( 3929 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Viết phương trình tiếp tuyến của đường tròn khi biết hệ số góc k – Hình học 10

  • Tác giả: khoia.vn
  • Đánh giá: 5 ⭐ ( 7695 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khối A (KhoiA) sẽ giới thiệu với các em cách viết viết phương trình tiếp tuyến của đường tròn khi biết hệ số góc k qua bài này một cách ngắn gọn,…

Xác định đường kinh tuyến gốc và vĩ tuyến gốc

  • Tác giả: doctailieu.com
  • Đánh giá: 3 ⭐ ( 4667 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trả lời câu hỏi: Xác định đường kinh tuyến gốc và vĩ tuyến gốc. Cho biết thế nào là kinh tuyến tây, kinh tuyến đông, vĩ tuyến bắc, vĩ tuyến nam.

Cát tuyến là gì? Tính chất và cách vẽ cát tuyến như thế nào?

  • Tác giả: muahangdambao.com
  • Đánh giá: 3 ⭐ ( 5003 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cát tuyến là một phần kiến thức quan trọng mà các bạn học sinh sẽ được làm quen trong chương trình toán lớp 9. Vậy cát tuyến là gì?

Lý thuyết cung chứa góc – Cách giải các dạng bài tập thường gặp

  • Tác giả: toppy.vn
  • Đánh giá: 3 ⭐ ( 6924 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cung chứa góc là gì? Cách vẽ và giải bài tập có cung chứa góc thế nào? Đây là thắc mắc của nhiều bạn học sinh hiện nay. Cùng tìm hiểu nhé

Kinh tuyến là gì? Vĩ tuyến là gì?

  • Tác giả: kthn.edu.vn
  • Đánh giá: 3 ⭐ ( 9025 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình