AngularJs中的路由，应用比较广泛，主要是允许我们通过不同的url访问不同的内容，可实现多视图的单页web应用。下面看看具体怎么使用。

关于路由 

通常我们的URL形式为http://jtjds.cn/first/page，但在单页web应用中angularjs通过#+标记实现，比如下面的页面，将是下文中的路由列子。

http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page1

http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page2

http://192.168.1.109:8000/angular-program/src/main.html#/pagetable/page3

当我们点击以上任一一个链接时，向服务器请求的地址都是http://192.168.1.109:8000/angular-program/src/main.html ，而＃号之后的内容在向服务器端请求时会被浏览器忽略掉，所以我们在客户端实现＃号后面的功能实现即可。简单来说，路由通过＃＋标记帮助我们区分不同逻辑页面，并将其绑定到对应的控制器上。

每个页面均有一个控制器控制，通过路由，从而将不同的页面展示出来。

如何使用路由？

新建main.html

<!doctype html>

<html ng-app="myapp">

     <head>

         <meta charset="utf-8">

         <script src="angular.min.js"></script>

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

         <script src="app.js"></script>

     </head>

     <body>

        <!-- 引入angularjs框架和ui-router框架，引入app.js框架 -->

        <h1>AngularJS 路由跳转</h1>

        <div ui-view=""></div>     --展示page.html的页面内容

    </body>

</html>

新建pagetable.html页面

<!DOCTYPE html>

<div>

     <div>

         <span style="width:100px" ui-sref=".page1"><a href="">首页</a></span>

         <span style="width:100px" ui-sref=".page2"><a href="">关于我</a></span>

         <span style="width:100px" ui-sref=".page3"><a href="">留言板</a></span>

     </div>

     <div>

          <div ui-view=""></div>  －－展示page1,page2,page3页面的内容

     </div>

</div>

新建page1.html页面

<!DOCTYPE html>

        <div>

            <div>

               <h1>11111111111111111111</h1>

            </div>

        </div>

新建page2.html页面

<!DOCTYPE html>

<div>

    <div>

       <h1>22222222222222222</h1>

    </div>

</div>

新建page3.html页面

<!DOCTYPE html>

        <div>

            <div>

               <h1>333333333333333</h1>

            </div>

        </div>

app.js内容

var app=angular.module("myapp",['ui.router']);//声明angualrjs模块，并把ui-router传人angularjs模块
app.config(function ($stateProvider, $urlRouterProvider) { //声明把$stateprovider和$urlrouterprovider路由引擎作为函数参数传人,为应用程序配置路由

     $urlRouterProvider.otherwise("/pagetable");

     $stateProvider

        .state("pagetable", {

            url: "/pagetable",

            templateUrl: "pagetable.html"  //第一个显示出来的页面

        })

        .state("pagetable.page1", {

            url:"/page1",

            templateUrl: "page1.html" //

        })

        .state("pagetable.page2", {

            url:"/page2",

            templateUrl: "page2.html"

        })

        .state("pagetable.page3", {

            url:"/page3",

            templateUrl: "page3.html"

        });

});

下面解释下配置路由的意思。angularjs使用UI－rooter将其传人angularjs模块。OK，我们将项目运行起来，如果时本地直接打开的话，在非safari下面运行，会出现跨域的问题，我们来看下。即只有在safari下才能正常打开，以本地的file://开头的在其它浏览器下是不能打开文件的。主要是js同源策略的影响。

那么如何将项目运行在服务器上跑起来呢？提供一个工具：https://www.npmjs.com/package/anywhere 可实现简单页面运行。具体安装看文档说明。OK，现在让我们启动项目，

现在让我们看下运行的效果：如下图所示

点击不同的链接，下面将会显示不同的页面。那么简单的路由跳转就完成啦。简单来首，路由问题，比较简单，即如何控制多个页面在同一页面下跳转？

 作者：婷风

 出处：http://www.cnblogs.com/jtjds/p/5743855.html 

 如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意 

转载文章之后必须在 文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。

关于AngularJs中的路由学习总结的更多相关文章

  1. angularjs中的路由介绍详解 ui-route(转)

    http://www.cnblogs.com/littlemonk/p/5500801.html 这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui rou ...

  2. angularjs中的路由介绍详解 ui-route

    这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui router的基本用法,需要的朋友参考下吧   首先给大家介绍angular-ui-router的基本用 ...

  3. angularjs 中的路由 与 bootstrap标签选项卡的冲突 解决方案

    当项目中使用了angularjs 的路由,则所有 像a标签的href 的链接都会走路由,实现页面跳转,那么有些地方需要使用选项卡,就会带来麻烦. 路由使用如下图: 某页面需要使用bootstrap的选 ...

  4. angularJS中-$route路由-$http(ajax)的使用

    后台请求使用的是nodeJS驱动(后面帖代码),很简单的RESTFUL, 页面使用的是bottstarp3.0(懒人神器); 第一个例子: 在本地架设NODEJS, angular的所有请求都是请求本 ...

  5. angularJs 中ui-router 路由向controller传递数据

    页面上 : ui-sref="home.dataAnalysis({role:'thirdpart:tokenverify',menuType:'a'})" 路由设置 .state ...

  6. Angular JS中的路由

      前  言            本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页We ...

  7. 初次使用AngularJS中的ng-view,路由控制

    AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"> ...

  8. angularjs中关于当前路由再次点击强制刷新

    angularjs中,有一个机制,就是当前路由再次点击的时候,不会再刷新页面,这实在是愁坏了包子,因为业务人员要求一定要刷新,于是我各种百度,然并卵....呜呜呜~~~~~ 于是乎,我就想到写指令了, ...

  9. 前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite

    一.服务 AngularJS功能最基本的组件之一是服务(Service).服务为你的应用提供基于任务的功能.服务可以被视为重复使用的执行一个或多个相关任务的代码块. AngularJS服务是单例对象, ...

随机推荐

  1. 如何使用递归遍历对象获得value值

    一般要用到递归,就要判断对象是否和父类型是否一样 这里演示简单的对象递归,还有数组递归类似. var obj = { a:{w:1,y:2,x:3}, b:{s:4,j:5,x:6}, c:{car: ...

  2. SubSonic2.2框架的使用方法和配置说明

    网上.net ORM框架也不少,但是我感觉这个框架配置很简单的,前几年貌似用的人很多,现在好像用得比较少了,随着它官方的升级现在已经到3.0了, 并且采用T4 模板生成的方式,代码量好像减少了.不过我 ...

  3. NodeJS API简介

    简单介绍下NodeJS现有API. Assert(断言):该模块用于编写程序的单元测试用例. Buffer(缓冲块) :处理二进制数据. C/C++ Addons(拓展):Addons插件就是动态连接 ...

  4. JavaScript强化教程 - 六步实现贪食蛇

    1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1; ...

  5. SAP 中的用户类型

    在使用 SU01 维护用户时,在登录数据选项卡中会要求选择用户类型,一般我们都选择第一项 Dialog,但是其他几个选项有什么作用呢?下面我们就一一解释. 对话用户顾名思义,就是需要通过 SAP GU ...

  6. 如何删掉Portal中的无效内容

    1.登陆到https://[PORTALURL]/arcgis/sharing/rest/ 2.使用内容的所有者或者门户管理员的账号登陆. 3.登陆后访问https://[PORTALURL]/arc ...

  7. jsom sharepoint 2010 循环获取多个list的item值

    <script type="text/javascript"> // <![CDATA[ var chongdianbaId; var elm = documen ...

  8. iOS之属性修饰符 retain、strong和copy区别测试

    时不时会有点迷惑属性修饰符retain.strong.copy三者之间的区别,还是把测试过程记录下来好一点! 1.属性修饰符结论 2.给retain.strong.copy修饰的字符串属性赋值指针变化 ...

  9. 【代码笔记】iOS-短信分享

    代码: ViewController.h #import <UIKit/UIKit.h> //短信分享 #import <MessageUI/MFMailComposeViewCon ...

  10. JS、ActiveXObject、Scripting.FileSystemObject

    Javascript之文件操作 (IE) 一.功能实现核心:FileSystemObject 对象      要在javascript中实现文件操作功能,主要就是依靠FileSystemobject对 ...