AngularJS实现路由实例_网络技术_宿州市腾雀网络科技有限公司

AngularJS实现路由实例

发布时间 - 2026-01-10 23:00:13 点击率：次

1、首先我们要引进angular.js和angular-route.js文件

复制代码代码如下: <script type="text/javascript" src=lib/angular.min.js></script><script type="text/javascript" src=lib/angular-route.js></script>

2、然后我们要在html中创建锚点和容器（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依赖

复制代码代码如下: angular.module('myApp',['ngRoute'])

4、配置路由

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

效果展示：

完整代码：

<!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 : '<h1> first </h1>'
        })
        .when('/second',{
          template : '<h1> second </h1>'
        })
        .otherwise({
          redirectTo : '/first'
        })
      }])
  </script>
</body>
</html>

接下来我们做一个模拟项目路由

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

所有文件展示

2、之后我们看一下效果图

有两个页面，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>

代码解释：

首先我们要引进三个文件

1）angular.min.js----angularJS脚本
2）angular-css.js----用来转化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>

最后我们需要一个路由导入的容器

复制代码代码如下: <div ng-view></div>

之后我们将路由的配置、服务、控制器分别放在app.js、services.js、controller.js文件中，便于代码的管理、维护。

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 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:

第一个参数是 URL 或者 URL 正则规则。第二个参数是路由配置对象。

3）controller

function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。

4）controllerAs

string类型，为controller指定别名。

5）redirectTo

重定向的地址

6）resolve

指定当前controller所依赖的其他模块。

路由设置对象总览：

5、下面我们看一下服务部分，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）在控制器中注入服务依赖以及#css依赖

复制代码代码如下: controller('FirstCtrl',['$css','FirstService',function ($css,$service)

2）添加css依赖路径

复制代码代码如下: $css.add('css/first.css');

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

7、好了。逻辑的部分已经完成了，下面展示一下我们的样式以及结构部分吧

first.html

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

second.html

<div class='second'>
  <h1> Second Page </h1>
  <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;
}

# angularjs # 路由实例 # angularjs小项目实例 # 项目实例 # Angularjs制作简单的路由功能demo # 使用AngularJS对路由进行安全性处理的方法 # AngularJS 路由详解和简单实例 # AngularJS 路由和模板实例及路由地址简化方法(必看) # AngularJS监听路由的变化示例代码 # 简单讲解AngularJS的Routing路由的定义与使用 # AngularJS通过ng-route实现基本的路由功能实例详解 # AngularJs ng-route路由详解及实例代码 # 看一下 # 好了 # 不需要 # 第一页 # 放在 # 第一个 # 要在 # 第二个 # 做一个 # 所需要 # 重定向 # 器中 # 完成了 # 有两个 # config # routeProvider # div # Document # DOCTYPE # myApp

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：小型网站服务器配置里，是否需要考虑使用内容分发网络（CDN）

下一篇：Ubuntu上怎么安装和配置Laravel和Nginx

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：小型网站服务器配置里，是否需要考虑使用内容分发网络（CDN）

下一篇：Ubuntu上怎么安装和配置Laravel和Nginx