AngularJS入门教程一：路由用法初探

站长资源 2024/11/28 佚名

60 1538 60

DDR爱好者之家 Design By 杰米

本文实例讲述了AngularJS路由用法。分享给大家供大家参考，具体如下：

目前的理解中，这个NG的路由模块可以用于带有多视图的单页面开发。

先把所有代码贴出：

HTML:

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
  <li><a href="#/" rel="external nofollow" >首页</a></li>
  <li><a href="#/computers" rel="external nofollow" >电脑</a></li>
  <li><a href="#/user" rel="external nofollow" >用户</a></li>
  <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
</ul>
<div ng-view></div>
<script src="/UploadFiles/2021-04-02/angular.min.js">

list.html：


<div>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
</div>




JS:


var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
      .when('/',{template:'这是首页页面'})
      .when('/computers',{
        template:'这是电脑分类页面'
      })
      .when('/user',{templateUrl:'list.html',controller:'listController'})
      .otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
  $scope.name="ROSE";
});




首先由于我用的是Angular1.5,所以需要额外引入angular-route.js:


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

要使用NG里的路由，必须先在特定的模块中定义它：


.config(['$routeProvider', function($routeProvider){
//内容
}




通过when和otherwise两个方法来进行路由的匹配。（其实就是匹配上面URL后面/的字符）。最后把匹配到的字符所对应的字段或者文件放入带有ng-view 指令的DOM里面。
when里面有许多属性。里面可以设置控制器，控制器会匹配给对应的字段或文件。就像上面代码中listController控制器一样。
ng-view指令有许多规则：
在匹配路由时：
1、创建一个新的当前作用域。

2、删除前一个作用域。

3、将当前的模板（控制器等）与当前新建的作用域关联起来。

4、如果有内置关联的控制器，将其与当期作用域关联起来。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。

AngularJS,路由

DDR爱好者之家 Design By 杰米

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

DDR爱好者之家 Design By 杰米

评论“AngularJS入门教程一：路由用法初探”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

AngularJS入门教程一：路由用法初探

AngularJS入门教程二：在路由中传递参数的方法分析

Angular 4环境准备与Angular cli创建项目详解

评论“AngularJS入门教程一：路由用法初探”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接