ui-router实现单页面应用

时间 2019-11-18

标签 router 实现页面应用繁體版

原文原文链接

###使用ui-router实现单页面应用javascript

1.编写页面：index.htmlcss

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Pragma" contect="no-cache">
    <title>主页</title>
</head>
<body data-ng-app="myApp">
<div data-ui-view=""></div>	
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular.js/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script type="text/javascript" src="../js/App.js"></script>
</body>
</html>

2.PageTab.htmlhtml

<div>
    <h1>下面这几个按钮是在主页面下面再嵌套一层的页面</h1>
    <!--ui-sref跳转-->
    <span style="width:100px" ui-sref=".Page1"><a href="">Page-1</a></span>
    <span style="width:100px" ui-sref=".Page2"><a href="">Page-2</a></span>
    <span style="width:100px" ui-sref=".Page3"><a href="">Page-3</a></span>
</div>
<div>
    <!--PageTap嵌套的视图html展现的地方-->
    <div ui-view=""/>
</div>

3.Page-1.htmljava

<div>
    <div>
        <h1>Page a content goes here...</h1>
    </div>
</div>

4.Page-2.htmljquery

<div>
    <div>
        <h1>Page b content goes here...</h1>
    </div>
</div>

5.Page-3.htmlapp

<div>
    <div>
        <h1>Page c content goes here...</h1>
    </div>
</div>

6.login.htmlide

<div ng-controller="loginCtrl">
    用户名：<input type="text"> </br>
    密码：<input type="text" style="margin: 10px">
    <button type="button" ng-click="login()">提交</button>
</div>

7.App.js函数

var myApp = angular.module("myApp", ["ui.router"]);
//这里叫作App模块，这将告诉HTML页面这是一个AngularJS做用的页面，并把ui-router注入AngularJS主模块，它的内容由AngularJS引擎来解释。
myApp.config(function ($stateProvider, $urlRouterProvider) {
  //这一行声明了把 $stateProvider 和 $urlRouteProvider 路由引擎做为函数参数传入，这样咱们就能够为这个应用程序配置路由了.
  $urlRouterProvider.when("", "/login");
  //若是没有路由引擎能匹配当前的导航状态，默认将路径路由至 PageTab.html, 那它就像switch case语句中的default选项.就是一个默认的视图选项
  $stateProvider
  //这一行定义了会在main.html页面第一个显示出来的状态（就是进入页面先加载的html），做为页面被加载好之后第一个被使用的路由.login
      .state("login", {
        url: "/login",//#+标识符，这里就是url地址栏上面的标识符，经过标识符，进入不一样的html页面
        templateUrl: "login.html",//这里是html的路径，这是跟标识符相对应的html页面
        controller: "loginCtrl"
      })
      .state("PageTab", {
        url: "/PageTab",//#+标识符，这里就是url地址栏上面的标识符，经过标识符，进入不一样的html页面
        templateUrl: "PageTab.html",//这里是html的路径，这是跟标识符相对应的html页面
        controller:function($state){
          $state.go("PageTab.Page1") // 默认打开这个页面
        }
      })
      .state("PageTab.Page1", {//引号里面表明Page1是PageTab的子页面，用.隔开
        url:"/Page1",
        templateUrl: "Page-1.html"
      })
      .state("PageTab.Page2", {//须要跳转页面的时候，就是用这双引号里面的地址
        url:"/Page2",
        templateUrl: "Page-2.html"
      })
      .state("PageTab.Page3", {
        url:"/Page3",
        templateUrl: "Page-3.html"
      });
});	
myApp.controller('loginCtrl',function ($scope,$rootScope,$http,$state) {	
  $scope.login = function () {
    // 跳转到主页
    $state.go('PageTab');
  }	
});