angular学习之ngRoute路由机制

网络编程 2024/7/27 佚名

3 2 1

ngRoute简介

路由是AngularJS很重要的一环，它可以把你项目的页面串联起来，构成一个项目，常用的路由有ngRoute和ui-route，我这里先讲ngRoute。ngRoute是一个Module，提供路由和深层链接所需的服务和指令。

注意一点，和之前的文章不一样，使用ngRoute之前你需要引入另外一个js文件angular-route.js：

<script src="/UploadFiles/2021-04-02/angular.min.js">

ngRoute包含内容如下：


  
    
      名称
      类型
      作用
    
  
  
    
      ngView
      Directive
      路由的不同模板其实都是插入这个元素里
    
    
      $routeProvider
      Provider
      路由配置
    
    
      $route
      Service
      各个路由的url，view，controller
    
    
      $routeParams
      Service
      路由参数
    
  


使用ngRoute的基本流程如下：

  在需要路由的地方使用ngView来定义视图模板。
  在module中注入ngRoute模块
  在config中用$routeProvider来对路由进行配置templateUrl，controller，resolve。
  在每个controller中写业务逻辑
  在controller中可以通过注入$routeParams来获得url上的参数

  

可以看下下面这个例子
color.html


<!DOCTYPE html>
<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="/UploadFiles/2021-04-02/angular.min.js">

red.html (其他页面类似，就不重复了)


<div style="background: red">
{{message}}
</div>


例子很简单，我们就只讲下路由的配置：

  使用$routeProvider.when来配置路由的关系，方法接受两个参数，第一个参数是url的路径，第二个参数是配置url对应的templateUrl和controller。
  $routeProvider.otherwise方法相当于default。

路由模块化
可能你已经注意到了上面的都写在一起，如果项目越来越大，会不会很头疼，那么是不是可以把它模块化，每个模块都有直接的module，controller，config等。模块依赖的技术我们之前的module那篇文章已经讲过，那么就来看下带有路由的情况下，怎么模块化。
color.html:


<!DOCTYPE html>
<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="/UploadFiles/2021-04-02/angular.min.js">

可以看到我们的color.html文件是不是很简洁，config的路由配置里只有一行$routeProvider.otherwise方法,但是module却注入了除ngRoute外的三个module：”Module.red”,”Module.main”,”Module.green”，这其实是把path对应的路由提取成模块，使用了专门的js来处理它们，看起来和他们对应的模板相对应，我们来看下red.html对应的模块js：
red.js


angular.module('Module.red', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider.when('/red', {
        templateUrl: 'red.html',
        controller: 'redController'
      });
    }
  ])


  .controller('redController', [
    '$scope',
    function ($scope) {
      $scope.color='red';
      $scope.message = 'This is red page';
    }
  ]);




路由的参数
那么路由怎么将参数传入到模板页呢？我们把上面的例子改造一下，通过例子来讲解：
main.js


angular.module('Module.main', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'main.html',
          controller: 'mainController'
        });
    }
  ])

  .controller('mainController', [
    '$scope',
    function ($scope) {
      $scope.message = 'This is main page';
      $scope.colors=['blue','yellow','pink'];
    }
  ]);




这里初始化了一个colors的数组，作为要传递的数据。
main.html


{{message}}
<br>
<ul>
  <li ng-repeat="color in colors">
    <a href="#/color/{{color}}" rel="external nofollow" >{{color}}</a>
  </li>
</ul>


通过ng-repeat循环创建a链接，数组的元素通过链接传入。
colorId.js


angular.module('Module.colorId', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider
        .when('/color/:colorId', {
          templateUrl: 'colorId.html',
          controller: 'colorIdController'
        });
    }
  ])

  .controller('colorIdController', [
    '$scope','$routeParams',
    function ($scope,$routeParams) {
      $scope.color = $routeParams.colorId;
      $scope.message = 'This is ' +$routeParams.colorId +' page';
    }
  ]);




这里定义了一个colorId的模块，通过:colorId来匹配传入的参数，这里匹配到的是数组中的元素。例如/color/blue，那么匹配到的就是blue。
colorId.html


<div style="background: {{color}}">
  {{message}}
</div>


最后在colorId上呈现出来。
如果是多个参数可以直接一一接到后面比如/color/:colorId/:year/:month/:day,和后面的参数也一一匹配，如/color/pink/2017/3/13。
支持*号：/color/:color/largecode/:largecode*/edit匹配/color/brown/largecode/code/with/slashes/edit的话，color将会匹配到brown，largecode将匹配到code/with/slashes。
支持"htmlcode">

<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="/UploadFiles/2021-04-02/angular.min.js">

news.js


var news = angular.module("ngst-news", ["ngst-newsDetail"]);

news.controller("MainController", ["$scope", function ($scope) {
  $scope.newsAarry = [{"id": "1", "title": "辽宁人大副主任王阳 浙江宁波市长卢子跃被免职"},
    {"id": "2", "title": "今冬小雨缤纷，荔枝园地湿润壮旺荔枝果树，下刀环剥最狠"},
    {"id": "3", "title": "百度任原搜索渠道总经理顾国栋为市场执行总监"}];
}]);




news页面是一个新闻列表，在列表下面有个ng-view，点击新闻列表链接下面的ng-view进行路由切换。
newsDetails.html


{{message}}


newsDetails.js


var news = angular.module("ngst-newsDetail", ['ngRoute']);

news.config(["$routeProvider",
  function ($routeProvider) {
    $routeProvider.when("/newsDetail/:newsId", {
      templateUrl: 'newsDetail.html',
      controller: 'newsDetailController',
      resolve: {
        content: ['$q', '$timeout', "$route", function ($q, $timeout, $route) {
          var deferred = $q.defer();
          $timeout(function () {
            deferred.resolve('新闻详情 id=' + $route.current.params.newsId);
          }, 1000);
          return deferred.promise;
        }]
      }
    });
  }])
  .controller("newsDetailController", ['$scope', 'content',
    function ($scope, content) {
      $scope.message = content;
    }]);




这里使用$route.current.params来获得参数


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

                                
                                
                                    angularjs,ngroute,angular,ngroute 
                                
                                    标签：
                                        angularjs,ngroute,angular,ngroute

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“angular学习之ngRoute路由机制”

angular学习之ngRoute路由机制

暂无“angular学习之ngRoute路由机制”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

20240727

angular学习之ngRoute路由机制

angularjs,ngroute,angular,ngroute

详解vue的数据binding绑定原理

Node.js发送HTTP客户端请求并显示响应结果的方法示例

评论“angular学习之ngRoute路由机制”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

angular学习之ngRoute路由机制

angularjs,ngroute,angular,ngroute

详解vue的数据binding绑定原理

Node.js发送HTTP客户端请求并显示响应结果的方法示例

评论“angular学习之ngRoute路由机制”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存