AngularJS实现路由实例

网络编程 2024/9/29 佚名

3 1 2

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="/UploadFiles/2021-04-02/angular.min.js">

代码解释：
首先我们要引进三个文件
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,项目实例

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“AngularJS实现路由实例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月29日

AngularJS实现路由实例

ES6学习之变量的解构赋值

jQuery文字轮播特效

评论“AngularJS实现路由实例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接