AngularJS 使用 templateUrl 进行路由

AngularJS是一种流行的JavaScript框架，用于开发Web应用程序。它提供了许多功能，其中之一是路由功能。使用路由功能，可以根据不同的URL路径加载不同的视图，并将其与控制器关联起来。在AngularJS中，可以使用templateUrl属性来指定模板文件的路径，以便在路由时加载和显示相应的视图。

javascript
// 引入ngRoute模块
var app = angular.module('myApp', ['ngRoute']);
// 配置路由
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/home.html', // 指定首页的模板路径
      controller: 'HomeController' // 指定控制器
    })
    .when('/about', {
      templateUrl: 'views/about.html', // 指定关于页面的模板路径
      controller: 'AboutController' // 指定控制器
    })
    .otherwise({
      redirectTo: '/' // 默认路由
    });
});

javascript
// 引入ngRoute模块
var app = angular.module('myApp', ['ngRoute']);
// 配置路由
app.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/home.html', // 指定首页的模板路径
      controller: 'HomeController' // 指定控制器
    })
    .when('/about', {
      templateUrl: 'views/about.html', // 指定关于页面的模板路径
      controller: 'AboutController' // 指定控制器
    })
    .otherwise({
      redirectTo: '/' // 默认路由
    });
});