• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >AngularJS > AngularJs中route的使用方法和配置

AngularJs中route的使用方法和配置

作者:___delete 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含AngularJs中route的使用方法和配置等相关知识,___delete 希望在学习及工作中可以帮助到您

angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一.该强大的地方有很多,比如双向数据绑定,应用了后端的MVC模式到前端,自定义指令等.

既然是单页面应用,肯定离不开页面的切换.我们首先来说一下angular的路由.

angular实现页面切换时用了route.

<script src="js/plugins/angular/angular.min.js"></script>
<script src="js/plugins/ui-router/angular-ui-router.min.js"></script> 
</div>

angular.min.js要在angular-ui-router.min.js之前加载.然后我们就要在app中注册了.

(function () {
angular.module('demo', [
'ui.router', 
])
})(); 
</div>

  注册完之后就需要配置route了

function config($stateProvider, $urlRouterProvider,$httpProvider) {
$urlRouterProvider.otherwise("/home/get");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "../views/login.html",
})
.state('home', {
abstract: true,
url: "/home",
templateUrl: "views/common/content.html",
})
.state('home.get', {
url: "/get",
templateUrl: "views/get.html",
data: { pageTitle: 'Example view' }
})
.state('home.post', {
url: "/post",
templateUrl: "views/post.html",
data: { pageTitle: 'Example view' }
});
}
app = angular.module('demo');
app.config(config); 
</div>

  配置到这里就配置完了.配置中的每一个state就一个view,表示一个页面,页面跳转用state,对应的html文件在templateUrl对应的文件中.

以上所述是小编给大家分享的AngularJs中route的使用方法和配置的相关知识,希望对大家有所帮助。

</div>

您可能想查找下面的文章:

相关文章

  • 2017-05-30AngularJS折叠菜单实现方法示例
  • 2017-05-30AngularJS中的表单简单入门
  • 2017-05-30AngularJS 路由详解和简单实例
  • 2017-05-30AngularJS中的Directive实现延迟加载
  • 2017-05-30Angular发布1.5正式版,专注于向Angular 2的过渡
  • 2017-05-30AngularJS基础 ng-dblclick 指令用法
  • 2017-05-30angular2使用简单介绍
  • 2017-05-30Angularjs的Controller间通信机制实例分析
  • 2017-05-30Angular实现一个简单的多选复选框的弹出框指令实例
  • 2017-05-30使用AngularJS编写较为优美的JavaScript代码指南

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • AngularJS 过滤与排序详解及实例代码
    • AngularJS中的指令全面解析(必看)
    • AngularJS教程之简单应用程序示例
    • AngularJS模块详解及示例代码
    • Angular 中 select指令用法详解
    • AngularJS应用开发思维之依赖注入3
    • BootStrap+Angularjs+NgDialog实现模式对话框
    • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply
    • 实例详解AngularJS实现无限级联动菜单
    • 在AngularJS中如何使用谷歌地图把当前位置显示出来

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有