AngularJS實現(xiàn)路由實例

1、首先我們要引進(jìn)angular.js和angular-route.js文件

目前創(chuàng)新互聯(lián)建站已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、鄢陵網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

復(fù)制代碼代碼如下:

 <script type="text/javascript" src=lib/angular.min.js></script><script type="text/javascript" src=lib/angular-route.js></script>

2、然后我們要在html中創(chuàng)建錨點和容器（ng-view）

<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一頁 </a>
<a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第二頁 </a>
<div ng-view></div>

3、在模塊中注入ngRoute依賴

復(fù)制代碼代碼如下:

angular.module('myApp',['ngRoute'])

4、配置路由

config(['$routeProvider',function ($routeProvider) {
  $routeProvider.when('/first',{
    template : '<h2> first </h2>'
  })
  .when('/second',{
    template : '<h2> second </h2>'
  })
  .otherwise({
    redirectTo : '/first'
  })    
}])

效果展示：

AngularJS實現(xiàn)路由實例

完整代碼：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src=lib/angular.min.js></script>
  <script type="text/javascript" src=lib/angular-route.js></script>
</head>
<body>
  <a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第一頁 </a>
  <a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 第二頁 </a>
  <div ng-view></div>
  <script type="text/javascript">
    angular.module('myApp',['ngRoute'])
      .config(['$routeProvider',function ($routeProvider) {
        $routeProvider.when('/first',{
          template : '<h2> first </h2>'
        })
        .when('/second',{
          template : '<h2> second </h2>'
        })
        .otherwise({
          redirectTo : '/first'
        })
      }])
  </script>
</body>
</html>

接下來我們做一個模擬項目路由

1、首先我們看一下我們所需要的文件

AngularJS實現(xiàn)路由實例

所有文件展示

2、之后我們看一下效果圖

AngularJS實現(xiàn)路由實例

有兩個頁面，first page跟second page，點擊兩個按鈕，切換不同頁面，展示不同樣式

3、好了。我們看一下代碼吧！

index.html

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="lib/angular.min.js" ></script>
  <script type="text/javascript" src="lib/angular-css.js" ></script>
  <script type="text/javascript" src="lib/angular-route.js" ></script>
</head>
<body>  
  <a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >First Page</a>

  <a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Second Page</a>
  <div ng-view></div> 

  <script type="text/javascript" src='app.js'></script>
  <script type="text/javascript" src='js/services.js'></script>
  <script type="text/javascript" src='js/controller.js'></script>
</body>
</html>

代碼解釋：

首先我們要引進(jìn)三個文件

1）angular.min.js----angularJS腳本
2）angular-css.js----用來轉(zhuǎn)化css的腳本
3）angular-route.js----路由腳本

然后我們需要兩個錨點

<a href="#first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >First Page</a>
<a href="#second" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Second Page</a>

最后我們需要一個路由導(dǎo)入的容器

復(fù)制代碼代碼如下:

之后我們將路由的配置、服務(wù)、控制器分別放在app.js、services.js、controller.js文件中，便于代碼的管理、維護(hù)。

4、接下來我們看一下路由的部分

angular.module('myApp',['ngRoute','angularCSS'])
  .config(['$routeProvider',function ($routeProvider) {
    $routeProvider
    .when('/first',{
      templateUrl : './view/first.html',
      controller : 'FirstCtrl as firstCtrl'
    })
    .when('/second',{
      templateUrl : './view/second.html',
      controller : 'SecondCtrl as secondCtrl'
    })
    .otherwise({
      redirectTo : '/first'
    })
  }])

代碼解釋：

1）首先，第一行，在myApp模塊中注入ngRoute跟angularCSS依賴。

2）然后配置路由（config）：

AngularJS 模塊的 config 函數(shù)用于配置路由規(guī)則。通過使用 configAPI，我們請求把$routeProvider注入到我們的配置函數(shù)并且使用$routeProvider.whenAPI來定義我們的路由規(guī)則。

$routeProvider 為我們提供了 when(path,object) & otherwise(object) 函數(shù)按順序定義所有路由，函數(shù)包含兩個參數(shù):

第一個參數(shù)是 URL 或者 URL 正則規(guī)則。第二個參數(shù)是路由配置對象。

3）controller

function、string或數(shù)組類型，在當(dāng)前模板上執(zhí)行的controller函數(shù)，生成新的scope。

4）controllerAs

string類型，為controller指定別名。

5）redirectTo

重定向的地址

6）resolve

指定當(dāng)前controller所依賴的其他模塊。

路由設(shè)置對象總覽：

AngularJS實現(xiàn)路由實例

5、下面我們看一下服務(wù)部分，service.js

angular.module('myApp')
  .factory('FirstService',[function () {
    var list = [
      { name : 'Rose',age : 10 },
      { name : 'Tom',age : 19 }
    ];
    return {
      getList : function () {
        return list;
      }
    }
  }])

注意：angular.module('myApp')不需要注入依賴

6、下面看一下控制器集成，controller.js

angular.module('myApp')
  .controller('FirstCtrl',['$css','FirstService',function ($css,$service) {
    var self = this;
    $css.add('css/first.css');
    self.list = function () {
      return $service.getList();
    }
  }])
  .controller('SecondCtrl',['$css','FirstService',function ($css,$service) {
    var self = this;
    $css.add('css/second.css');
    self.list = function () {
      return $service.getList();
    }
  }])

代碼分析：

1）在控制器中注入服務(wù)依賴以及#css依賴

復(fù)制代碼代碼如下:

controller('FirstCtrl',['$css','FirstService',function ($css,$service)

2）添加css依賴路徑

復(fù)制代碼代碼如下:

$css.add('css/first.css');

注意：angular.module('myApp')不需要注入依賴

7、好了。邏輯的部分已經(jīng)完成了，下面展示一下我們的樣式以及結(jié)構(gòu)部分吧

first.html

<div class='first'>
  <h2> First Page </h2>
  <div ng-repeat="p in firstCtrl.list()"> 
    {{ p.name }} == {{ p.age }} 
  </div>
</div>

second.html

<div class='second'>
  <h2> Second Page </h2>
  <div ng-repeat="p in secondCtrl.list()"> 
    {{ p.name }} == {{ p.age }} 
  </div>
</div>

first.css

.first{
  background-color: yellow;
}
.first *{
  color: red;
}

second.css

.second{
  background-color: skyblue;
}
.second *{
  color: green;
}

本文標(biāo)題：AngularJS實現(xiàn)路由實例
轉(zhuǎn)載來于：http://jinyejixie.com/article24/jjjije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、小程序開發(fā)、ChatGPT、App開發(fā)、軟件開發(fā)、網(wǎng)頁設(shè)計公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

AngularJS實現(xiàn)路由實例