AngularJS |路由

当用户想要导航到应用程序中的不同页面但仍希望它是一个单页面应用程序时，将使用AngularJS中的路由。 AngularJS路由使用户可以为应用程序中的不同内容创建不同的URL。 ngRoute模块有助于访问应用程序的不同页面，而无需重新加载整个应用程序。

重要的：

• $ routeProvider用于配置路由。它有助于定义用户单击链接时要显示的页面。它接受when()或else()方法。
• 必须将ngRoute作为依赖项添加到应用程序模块中：

  //const app = angular.module("myApp", ["ngRoute"]);

示例1：仅使用“何时”方法

   

   


   
Courses@geeksforgeeks

Internships@geeksforgeeks

   

const app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        template : `<h1>Welcome to GeeksForGeeks</h1>
                       <p>
                       Click on the links to change this content
                       </p>`
    })
    .when("/courses", {
        template : `<h1>Courses Offered</h1>
                       <p>
                         <ul>
                           <li>Machine Learning Foundation</li>
                           <li>Geeks Classes</li>
                           <li>System Design</li>
                         </ul>
                       </p>`
    })
    .when("/internships", {
        template : `<h1>Hire With Us</h1>
                       <p>
                         <ul>
                           <li>Software Developer</li>
                           <li>Technical Content Writer</li>
                           <li>Technical Content Engineer</li>
                         </ul>
                       </p>`
    });
});

   

输出 ：
点击之前

点击Courses @ GeeksForGeeks之后

点击实习后@GeeksForGeeks

示例2：“其他”方法也与“何时”一起使用

  

  

  
Courses@geeksforgeeks

Internships@geeksforgeeks

  

const app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
    $routeProvider
    .when("/courses", {
        template : `<h1>Courses Offered</h1>
                              <p>
                                <ul>
                                  <li>Machine Learning Foundation</li>
                                  <li>Geeks Classes</li>
                                  <li>System Design</li>
                                </ul>
                              </p>`
    })
    .when("/internships", {
        template : `<h1>Hire With Us</h1>
                              <p>
                                <ul>
                                  <li>Software Developer</li>
                                  <li>Technical Content Writer</li>
                                  <li>Technical Content Engineer</li>
                                </ul>
                              </p>`
    })
    .otherwise({
        template : `<h1>Please Select Something!</h1>
                              <p>
                              Nothing has been selected yet
                              </p>`
    });
});

  

                    

输出 ：
点击之前

点击Courses @ GeeksForGeeks之后

点击实习后@GeeksForGeeks