angular实现单页面步骤

最新推荐文章于 2024-06-08 19:22:30 发布

HeSir__

最新推荐文章于 2024-06-08 19:22:30 发布

阅读量667

点赞数

本文链接：https://blog.csdn.net/sinat_34401527/article/details/50965497

版权

main.html

<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
    <meta charset="UTF-8">
    <title>BackStage Practice</title>

    <link rel="stylesheet" href="./css/normalize.css"><!--导入normalize 统一浏览器默认样式-->
    <link rel="stylesheet" href="./css/bootstrap.min.css"><!--导入bootstrap-->
    <link rel="stylesheet" href="./css/mainStyle.css">

    <script src="js/angular.min.js"></script><!--导入anjularjs-->
    <script src="js/angular-ui-router.min.js"></script> <!--导入angular的路由器(不是anjular自身的路由)-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/main.js"></script>
    <script src="module/index/indexJS.js"></script>
</head>
<body ng-controller="mainController">

    <header class="col-md-12">
        <h1>This is a Header</h1>
    </header>






    <div ui-view></div>

此处是系统的主体架构

ng-app="mainApp" 是定义整个系统的主模块

导入需要用到的文件

ng-controller = "mainController"定义了main.htm的控制器

ui-view 是容纳跳转页面的区域这里必须要在引入angular的路由文件(这里用的不是angular自身的路由) <script src="js/angular-ui-router.min.js"></script>

main.js

var mainApp = angular.module("mainApp",["ui.router","indexApp"]);
mainApp.config(function($stateProvider,$urlRouterProvider) {
    $urlRouterProvider.when("", "/index");
    $stateProvider.state("index", {
        url: "/index",
        templateUrl: "/module/index/index.html",
        controller: "IndexController"
    });


});


//main 的控制器
mainApp.controller("mainController",function($rootScope,$scope){

});

下面是子页面的配置

index.html

<div ng-controller="IndexController">
    This is a index Page
</div>

indexJS.js

var indexApp = angular.module("indexApp",[]);
indexApp.controller("IndexController",function($scope,$http){
    console.log("Successfully enter the indexAPP----------------------------IndexApp");
    
});

页面跳转的时候  注意路径 href="#/index"

<header class="col-md-12">
    <h1>This is a Header</h1>
    <a href="#/index" class="btn btn-primary">Index</a>
    <a href="#/login" class="btn btn-primary">Login</a>
    <a href="#/register" class="btn btn-primary">Register</a>
</header>