【angular.js】UI-Router之angular路由学习

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,现在让我们启动项目,

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

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

时间: 2024-10-24 12:11:47

【angular.js】UI-Router之angular路由学习的相关文章

angular 的ui.router 定义不同的state 对应相同的url

Angular UI Router: Different states with same URL? The landing page of my app has two states: home-public, home-logged-in. Now I want to show both states on the same URL, but let the controller and template depend on the user session (is the user log

Angular JS 学习之路由

1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/first/page,但在单页Web应用中AngularJS通过#+标记实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third 3.当我们点击以上的任意的一个链接时,向服务端请的地址都是一样的

angular.js学习-ng-grid

ng-grid是基于AngularJS和JQuery的富表格控件,由AngularUI Team领衔开发,到目前为止已有2354次Commit,1076个Fork. AngualrUI:http://angular-ui.github.io/ ng-grid: http://angular-ui.github.io/ng-grid/ ng-grid(code on Github): https://github.com/angular-ui/ng-grid 入手(官网参照) 1.创建HTML页面

Angular.js学习笔记(三)

一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} // 结果:tank is good2.date 格式化{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:253.n

angular+ 路由学习 (五)多路由出口学习

关于第二路由,即命令路由和主路由无命名的区别: 命名路由和主路由互不依赖 命名路由可以和其他路由组合使用,而主路由只能支持一条无命名路由 命名路由可以显示在命令出口中 通俗的说:<router-outlet></router-outlet>是模块的路由出口:现在我想再加一个模块:这个模块也放在主模块中:即使用命名路由作为第二路由出口,显示这个模块在主要模块中: 使用方法:在主页面中app.component.html中,添加第二路由出口,并添加导航 <!--The conte

学习angular.js的一些笔记想法(上)

1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-changer' data-ng-class="{'color-changer-hiden':!colorChanger}"> </div> js代码: $scope.colorChanger=false; 此时的变量colorChanger=false,那么!colorChange

Angular JS 学习之简介

1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 2.Angular JS通过指令扩展了HTML,且通过表达式绑定数据到HTML 3.Angular JS扩展了HTML: (1

angular.js学习手册(二)

如何使用angularjs? 各个 angular.js 版本下载: https://github.com/angular/angular.js/releases 下载完之后,在你需要使用angular.js的html页面引用即可 <script src="./libs/angular.js/1.4.6/angular.min.js"></script> 在使用之前需要了解的内容: 1.angularJs指令详解

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro