一、為什么單頁應(yīng)用需要路由？

在現(xiàn)代Web開發(fā)中，單頁應(yīng)用(SPA)已成為主流架構(gòu)。與傳統(tǒng)多頁應(yīng)用相比，SPA通過動(dòng)態(tài)重寫當(dāng)前頁面實(shí)現(xiàn)無縫交互，而路由機(jī)制正是實(shí)現(xiàn)這一體驗(yàn)的核心技術(shù)。通過AngularJS的ng-route模塊，開發(fā)者可以：

• 實(shí)現(xiàn)無刷新頁面跳轉(zhuǎn)
• 根據(jù)URL加載不同視圖和控制器
• 管理瀏覽器歷史記錄
• 實(shí)現(xiàn)按需加載資源

二、ng-route核心配置詳解

1. 基礎(chǔ)路由配置

<script>
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'views/home.html',
      controller: 'HomeController'
    })
    .when('/products', {
      templateUrl: 'views/products.html',
      controller: 'ProductsController'
    })
    .otherwise({ redirectTo: '/' });
});
</script>

2. 路由參數(shù)傳遞

.when('/product/:id', {
  templateUrl: 'views/product-detail.html',
  controller: 'ProductDetailController'
})

3. 控制器中獲取參數(shù)

app.controller('ProductDetailController', function($scope, $routeParams) {
  var productId = $routeParams.id;
  // 通過阿里云API獲取產(chǎn)品詳情
});