AngularJS 教學 #16 - 介面和路由

Try Proseoai — it's free

AI SEO Assistant

SEO Link Building

SEO Writing

Home SEO-TW AngularJS 教學 #16 - 介面和路由

AngularJS 教學 #16 - 介面和路由

⚙️ AngularJS的視圖和路由

AngularJS是一個適用於單頁應用程序的框架，可以輕鬆地管理不同的視圖和導航。在這一部分，我們將探討如何在AngularJS應用程序中創建並管理視圖。我們首先介紹AngularJS的視圖和模板概念，然後學習如何使用路由和導航在不同的視圖之間切換。

😃 第四章: 視圖和模板

4.1 創建視圖文件

在AngularJS中，視圖是由HTML模板組成的。要創建視圖，我們需要創建一個HTML文件並將其存儲在Views文件夾中。每個視圖都對應於應用程序的一個特定頁面或功能。

讓我們假設我們的應用程序有一個主頁面和一個ninjas列表頁面。我們需要創建兩個視圖文件：home.html和directory.html。

<!-- views/home.html -->
<h1>首頁</h1>

<!-- views/directory.html -->
<h1>忍者目錄</h1>

4.2 設置主視圖

在AngularJS中，可以使用特定的指令指定主視圖的位置。我們將使用ng-view指令來確定主視圖在頁面上的位置。

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  ...
</head>
<body>
  <header>
    <!-- 應用程序的標題和導航菜單 -->
  </header>

  <main ng-view></main>

  <footer>
    <!-- 版權信息和其他頁腳內容 -->
  </footer>

  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

現在我們已經在index.html文件中指定了主視圖的位置。當我們啟動應用程序時，AngularJS將自動將相應的視圖插入到ng-view元素中。

😃 第五章: 路由和導航

5.1 設置路由

在AngularJS中，可以使用$routeProvider來設置應用程序的路由。路由定義了不同URL路徑與相應視圖和控制器之間的映射關係。

// app.js
angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'views/home.html'
      })
      .when('/directory', {
        templateUrl: 'views/directory.html',
        controller: 'NinjaController'
      })
      .otherwise({
        redirectTo: '/home'
      });
  });

在上面的範例中，我們使用$routeProvider的when方法來設置不同URL路徑與相應視圖的映射。當URL為"/home"時，將顯示home.html視圖。當URL為"/directory"時，將顯示directory.html視圖並使用NinjaController來控制該視圖。

5.2 導航到不同視圖

現在我們已經設置了路由，我們可以在應用程序的不同視圖之間進行導航。在將URL設置為相應的路徑時，AngularJS將自動切換到相應的視圖。

<!-- header.html -->
<nav>
  <ul>
    <li><a href="#/home">首頁</a></li>
    <li><a href="#/directory">忍者目錄</a></li>
  </ul>
</nav>

在上面的例子中，我們使用哈希符號(#)加上路徑來導航到不同的視圖。當點擊"首頁"或"忍者目錄"時，AngularJS將自動導航到相應的視圖。

5.3 清除URL的哈希

如果你不喜歡URL中出現的哈希符號，可以使用$locationProvider的html5Mode方法來刪除它們。html5Mode方法允許你使用正常的URL路徑，而不使用哈希符號。

// app.js
angular.module('myApp', ['ngRoute'])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/home', {
        templateUrl: 'views/home.html'
      })
      .when('/directory', {
        templateUrl: 'views/directory.html',
        controller: 'NinjaController'
      })
      .otherwise({
        redirectTo: '/home'
      });

    $locationProvider.html5Mode(true);
  });

要使用html5模式，你需要修改index.html文件中的標記。

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <base href="/">
  ...
</head>
<body>
  ...
</body>
</html>

現在，URL將不再包含哈希符號，而是正常的URL路徑。

結論：恭喜！你已經學會了如何在AngularJS應用程序中創建和管理視圖。你學會了如何創建視圖文件並在應用程序中設置主視圖。你還學會了如何設置路由並在不同的視圖之間進行導航。記住使用$routeProvider設置路由並使用$locationProvider的html5Mode方法刪除URL中的哈希符號。祝你在使用AngularJS建立動態和交互式應用程序時順利！

Are you spending too much time on seo writing?

SEO Course: 1M+
SEO Link Building: 5M+
SEO Writing: 800K+

WHY YOU SHOULD CHOOSE Proseoai

Proseoai has the world's largest selection of seo courses for you to learn. Each seo course has tons of seo writing for you to choose from, so you can choose Proseoai for your seo work!

Browse More Content