杰晶网络

AngularJS通过ng-route实现基本的路由功能实例详解
网络编程 2024/11/16 佚名
3 2

本文实例讲述了AngularJS通过ng-route实现基本的路由功能。分享给大家供大家参考，具体如下：

为什么需要前端路由~

（1）AJAX不会留下History历史记录

（2）用户无法通过URL进入应用指定的页面（书签或者分享等）

（3）AJAX对于SEO是一个灾难

1.一般情况下，我们访问网页的时候，是通过url地址。
比如我们访问一个网页:https://www.baidu.com/index/fix.html

在AngularJS中通过“#”来进行不同页面的路由，比如：
https://www.baidu.com/#/first，这个请求在向网页端传输的时候，服务器会自动忽略#之后的内容，因此可以根据#+标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

AngularJS通过ng-route实现基本的路由功能实例详解

这是一个简单的路由控制界面，根据链接中的#/first和#/second分别对应跳转到不同的页面。

2.通过angularjs中的路由模块，实现ng-route的步骤

（1）载入包含ng-route的JS文件

（2）包含了 ngRoute 模块作为主应用模块的依赖模块。

（3）使用原生指令ng-view

（4）我们在html中定义链接，可以实现一个单页应用，比如链接可以这样定义：

<body>
 <ul>
  <li><a href="#/">首页</a></li>
  <li><a href="#/first">第一页面</a></li>
  <li><a href="#/second">第二页面</a></li>
  <li><a href="#/third">第三页面</a></li>
</ul>
  <div ng-view></div>
</body>

在js中的定义路由代码为：

angular.module('myapp',['ngRoute'])
.config(['$routeProvider',function($routeProvider){
  $routeProvider.when('/',{template:'这是首页页面'})
         .when('/first',{template:'这是第一个页面'})
         .when('/second',{template:'这是第二个页面'})
         .when('/third',{template:'这是第三个页面'})
         .otherwise({redirectTo:'/'});
}]);

（6）我们来看效果，首次当未有链接切换时候，默认的跳转到首页，效果如下：

当依次点击链接时，会依次切换ng-view中的值，并且实现了ng-view内内容的替换~

I）初始效果

AngularJS通过ng-route实现基本的路由功能实例详解

II）切换后的效果

AngularJS通过ng-route实现基本的路由功能实例详解

我们发现改变的仅仅是#后的值，并没有页面的跳转和刷新

3.angularJS中的路由设置对象

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。

路由配置对象语法规则如下：

$routeProvider.when(url, {
  template: string,
  templateUrl: string,
  controller: string, function 或 array,
  controllerAs: string,
  redirectTo: string, function,
  resolve: object<key, function>
});

参数解释：

（1）template:

使用该概述，可以在template中写入HTML内容，典型的例子是：

when('/',{template:'这是首页页面'})

（2）templateUrl：
如果现在我们并不是要HTML内容，而是需要一个模板文件来进行整体替换，例子如下：

$routeProvider.when('/computers', {
  templateUrl: 'views/computers.html',
});

（3）controller：function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
也可以对应的是控制器的名称。

（4）redirectTo：重定向的地址

（5）resolve：当前控制器所依赖的其他模块~

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

标签：
AngularJS,ng-route,路由功能
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

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

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

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网