当前位置：首页 > 无线信号问题 > 正文内容

ngroute路由

楷峰2023年02月20日 10:30无线信号问题113

本篇文章给大家谈谈ngroute路由，以及ngrok openwrt对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、angular中ngRoute和uiRoute的区别
2、require怎么加载angular的路由
3、为什么开发者都不喜欢Angular.js内置的路由
4、Angular路由 ng-route和ui-router的区别

angular中ngRoute和uiRoute的区别

ngRoute 和 ui-route 相比:

$when — $state 路由状态配置的时候

$routeParams — $stateParams 带参数的时候的配置

$routeProvider — $stateProvider 依赖注入的模块

div ng-view/div — div ui-view/div 页面中绑定的指令

路由详解

uiRoute中可以嵌套更深层次的路由，也就是路由中可以有路由（大致有两种情况：1.横向的 2.纵向的）。

（1）嵌套路由

（2）多视图路由

ngRoute中就不能嵌套更深的路由。

require怎么加载angular的路由

使用angular的路由功能需要安装routing模块...（引入angular-route.js就可以了）

三、定义

定义路由非常容易，在我们的应用mian模块里面注入ngRoute依赖就可以了

angular.module('myApp', ['ngRoute'])

.config(function($routeProvider) {});

现在，我们就可以给应用定义路由了。在路由模块里面的.config()方法里面注入了$routeProvider，上面的代码给我们演示了两个用于定义路由的方法。

when()

when()方法有两个参数，我们希望匹配的浏览器url和路由操作对象。一般main route经常使用“/”来表示，也可以定义URL参数，在controller里面就使用$routeParams获取url参数。

templateUrl: 表示路由跳转的view模板

controller: 控制器

angular.module('myApp', ['ngRoute'])

.config(function($routeProvider) {

$routeProvider

.when('/', {

templateUrl: 'views/main.html',

controller: 'MainCtrl' })

.when('/day/:id', {

templateUrl: 'views/day.html',

controller: 'DayCtrl' })

otherwise()

otherwise()定义了当应用找不到指定路由的时候跳转的路由

angular.module('myApp', ['ngRoute']).config(function($routeProvider) {

$routeProvider .when('/', {

templateUrl: 'views/main.html',

controller: 'MainCtrl' })

.when('/day/:id', {

templateUrl: 'views/day.html',

controller: 'DayCtrl' })

.otherwise({

redirectTo: '/' });

})

四、使用

定义好了路由需要怎么使用呢?我们要告诉angular页面的哪一个部分是我们希望转换的，这需要使用到ng-view指令

div class="header"My page/divdiv ng-view/divspan class="footer"A footer/span

这样就只有div ng-view/div会被更新， header/footer都始终保持不变

ngroute路由

为什么开发者都不喜欢Angular.js内置的路由

Angular.js 是一个用来构建“富客户端”的神奇JavaScript框架。但是事实却是许多开发者却不使用其内置的路由模块。反而使用AngularUI项目的 UI-Router模块来代替之。

这是因为UI-Router有两个重要的特性：

多样化视图

嵌入式视图

文／yield（简书作者）

大多数的应用程序都可以分解为一个一个区块。最简单的情况，一个应用程序有头部（header）,主体内容（main content area），以及一个尾部（footer）。

通常一个应用程序会有一个额外的侧边栏（sidebar ）在页面的左边或者右边。

应用结构图

大多数用例中，这些区块将同时显示在页面上。Angular.js 的内置路由ngRoute只允许一个视图（ng-view）出现在页面上。这样限制的情况下，人们可以使用包含页面（ng-include）或者其他的变通方法为应用创建一个布局（layout）或主页（master page）。UI-Router支持多样化视图，并且每一个视图都有自己相应的控制，所以每个区块都是封装好，可以复用到整个应用程序需要的地方。

嵌入式视图

常见的例子中，一个应用的嵌入式页面一般是主页的详情页面，更具体的说，就是列表的详情页面。许多应用程序，都有列表页面，点击其中一个列表元素，可以进入到列表的详情页面。更进一步说，你点击列表中一个行的连接，进入一个可查看详情页面或是一个可编辑的表单。