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');
  }	
});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。