Angular ui-router 入门

最新推荐文章于 2024-04-26 21:10:08 发布

claus_gao

最新推荐文章于 2024-04-26 21:10:08 发布

阅读量1k

点赞数

分类专栏： angular 文章标签： angular 页面路由

本文链接：https://blog.csdn.net/u010236169/article/details/53308071

版权

angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下载`JS`

<script type="text/javascript" src = libs/angular.min.js></script>
<script type="text/javascript" src = libs/angular-ui-router.min.js></script>
//引入应用的js文件
<script type="text/javascript" src = js/app.js></script>
<script type="text/javascript" src = js/router.js></script>

目录结构

这里写图片描述

首页 `index.html`

<!DOCTYPE html>
<html>
<head>
    <title>hello angular</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>

<!-- angular 开始 -->
<div data-ng-app="Module" class="wrap">
    <div ui-view></div> <!-- 用于将子页面导入 -->
</div>

<script type="text/javascript" src = libs/angular.min.js></script>
<script type="text/javascript" src = libs/angular-ui-router.min.js></script>

<script type="text/javascript" src = js/app.js></script>
<script type="text/javascript" src = js/router.js></script>

</body>
</html>

母版文件`common.html`

<div>
    <h1>this is common page</h1>
        <a ui-sref="common.page1" href="">page1</a>
        <a ui-sref="common.page2" href="">page2</a>
        <a ui-sref="common.page3" href="">page3</a>
    <div>
<!-- 注意此处的嵌套需要留个口子 -->
    <div>
         <div ui-view></div>
     </div>
</div>

子页面 `page1.html`

<h2>page 1</h2>

其他类似

全局`app.js`

var myAPP = angular.module("Module",["ui.router"]);

注意此时定义的module名称为Module，他的实例对象叫myAPP。然后把这个Module暴露给data-ng-app

定义路由 `Router.js`

'use strict';
myAPP.config(['$stateProvider','$urlRouterProvider',
    function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise("/common");
        $stateProvider
        .state("common", {
            abstract: false,
            url: "common",
            templateUrl: "views/common.html"
        })
        .state("common.page1", {
            url:"/page1",
            templateUrl: "views/page1.html"
        })
        .state("common.page2", {
            url:"/page2",
            templateUrl: "views/page2.html"
        })
        .state("common.page3", {
            url:"/page3",
            templateUrl: "views/page3.html"
        });
    }
]);

注意下：在声明state的时候注意，url的名称要和templateUrl中页面的名称一致。

claus_gao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular ui-router 入门

下载JS<script type="text/javascript" src = libs/angular.min.js></script><script type="text/javascript" src = libs/angular-ui-router.min.js></script>//引入应用的js文件<script type="text/javascript" src = js/a
复制链接

扫一扫