关于AngularJs中的路由学习总结

时间 2019-12-08

原文原文链接

AngularJs中的路由，应用比较普遍，主要是容许咱们经过不一样的url访问不一样的内容，可实现多视图的单页web应用。下面看看具体怎么使用。html

关于路由 angularjs

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

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 ，而＃号以后的内容在向服务器端请求时会被浏览器忽略掉，因此咱们在客户端实现＃号后面的功能实现便可。简单来讲，路由经过＃＋标记帮助咱们区分不一样逻辑页面，并将其绑定到对应的控制器上。npm

每一个页面均有一个控制器控制，经过路由，从而将不一样的页面展现出来。跨域

如何使用路由？浏览器

新建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页面app

<!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页面ide

<!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

若是您以为阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写做动力！欢迎各位转载，可是未经做者本人赞成

转载文章以后必须在文章页面明显位置给出做者和原文链接不然保留追究法律责任的权利。