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

本文通过一个实例说明了AngularJS通过ng-route实现了基本的路由功能。分享给大家参考，如下：

为什么需要前端路由~

(1)AJAX不会留下历史记录

(2)用户无法通过URL(书签或共享等)进入应用指定的页面。)

(3)AJAX是SEO的灾难

1.一般来说，当我们访问网页时，我们使用url地址。例如，我们访问一个网页，https://www.baidu.com/index/fix.html

在AngularJS中，“#”用于路由不同的页面，比如https://www.baidu.com/#/first.当这个请求被传输到网页时，服务器会自动忽略#后的内容，这样就可以帮助我们区分不同的逻辑页面，并根据#标签将不同的页面绑定到相应的控制器上。

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

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

(1)加载包含ng-route的JS文件

(2) ngRoute模块作为主应用程序模块的从属模块包含在内。

(3)使用本机指令ng-view

(4)我们可以通过在html中定义链接来实现单页应用程序。例如，链接可以定义如下：

正文ul lia href='#/'主页/a/Li lia href=' #/第一个'第一页/a/Li lia href=' #/第二个'第二页/a/Li lia href=' #/第三个'第三页/a/Li/ul div-view/div/js中的正文

angular.module('myapp '，['ngRoute'])。config(['$routeProvider '，function($ routeProvider){ $ routeProvider . when('/'，{template3360 '这是第一页' })。当('/first '，{template3360 '这是第一页' })时。当('/second '，{template3360 '这是第二页' })时。when ('/third '，{ template }])；(6)我们来看看效果。第一次没有链接切换时，默认跳转到首页。效果如下：

依次点击链接，ng-view中的值会依次切换，ng-view中的内容会被替换~

一)初步效果

二)切换后的效果

我们发现只有#之后的值被更改，没有页面跳转和刷新

3.3.angularJS中的路由设置对象

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

函数的第一个参数是URL或URL规则，第二个参数是路由配置对象。

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

$ routeprovider.when (URL，{template:string，templateurl:string，controller:string，function or array，controller 3360 string，redirectTo: string，function，resolve: objectkey，function })；参数解释：

(1)模板：

使用此概述，您可以在模板中编写HTML内容。典型的例子有：

当('/'，{template: '这是主页' })(2)templateUrl:如果我们现在不想要HTML内容，我们需要一个模板文件来整体替换。示例如下：

$ RouteProvider . when('/computers '，{ Templateurls : ' view/computers . html '，})；(3)控制器：函数、字符串或数组类型。3)控制器：在当前模板上执行的函数生成一个新的作用域。它也可以对应控制器的名称。

(4)重定向到：重定向地址

(5)解析：当前控制器依赖的其他模块~

更多对AngularJS感兴趣的读者可以查看本网站的主题：《AngularJS入门与进阶教程》和《AngularJS MVC架构总结》

希望本文对AngularJS编程有所帮助。