angular的ui-router小demo

Love The Way You Lie 2022-06-17 14:38 126阅读 0赞

1.index.html页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="angular.js" type="text/javascript"></script>
        <script src="angular-route.min.js" type="text/javascript"></script>
        <script src="angular-ui-router.js"></script>
        <script src="app.js" type="text/javascript"></script>
    </head>
    <body ng-app="myApp">
    <h1>Ui-router Demo</h1>
    <div ui-view=""></div>
    </body>
    </html>

2.app.js

var myApp = angular.module("myApp", ['ui.router']);
    
    myApp.config(function ($stateProvider, $urlRouterProvider) { 
        $urlRouterProvider.when("", "/PageTab");
        $stateProvider
            .state("PageTab", {
                url: "/PageTab",
                templateUrl: "partials/p123.html"
            })
            .state("PageTab.Page1", {   //子父级关系
                url: "/Page1",
                templateUrl: "partials/p1.html"
            })
            .state("PageTab.Page2", {
                url: "/Page2",
                templateUrl: "partials/p2.html"
            })
            .state("PageTab.Page3", {
                url: "/Page3",
                templateUrl: "partials/p3.html"
            });
    });

3.partials文件下的p123.html

<div>
        <div>
            <span style="width:100px" ui-sref="PageTab.Page1"><a href="">Page-1</a></span>
            <span style="width:100px" ui-sref="PageTab.Page2"><a href="">Page-2</a></span>
            <span style="width:100px" ui-sref="PageTab.Page3"><a href="">Page-3</a></span>
        </div>
        <div>
            <div ui-view=""/>
        </div>
    </div>

4.partials文件下的p1.html、p2.html、p3.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    pppppppppppp11111111111
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，126人围观）

还没有评论，来说两句吧...

相关阅读

相关 Angular 8 学习（四注册小demo）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2...

墨蓝/ 2024年04月17日 15:11/ 0 赞/ 53 阅读

相关 angular 英雄指南 demo 2019-08-18

链接： https://github.com/begin256/angular-demos 图1： ![1502830-20190818221854146-1075994

亦凉/ 2023年08月17日 16:56/ 0 赞/ 82 阅读

相关 Angular学习第五课--todolist的小demo

1、表单代码 <h2>todoList</h2> <div class="todolist"> <!-- [(ngModel)]:双向数

分手后的思念是犯贱/ 2023年03月01日 12:22/ 0 赞/ 1 阅读

相关 angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题

angularjs路由监听，uirouter感知路由变化，解决uirouter路由监听不生效的问题参考文章： [（1）angularjs路由监听，uirouter感知路由

深藏阁楼爱情的钟/ 2022年09月04日 00:46/ 0 赞/ 385 阅读

相关 [java学习8]uiRouter练习

/ Created by liyanq on 16/10/21. 为了测试uirouter 注意点： 1，记住这个写法：ui.router，开始写了个中线，调试

女爷i/ 2022年07月15日 02:10/ 0 赞/ 93 阅读

相关 angular的ui-router小demo

1.index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charse

Love The Way You Lie/ 2022年06月17日 14:38/ 0 赞/ 127 阅读

相关 Angular2 + Webpack项目搭建Demo

本文将从头开始编写实际的代码来完成一个angular2的demo。题外话是其实angular2官网的快速开始项目已经很酷炫了，但其侧重快速二字，只够拿来练习玩耍，倒是git

逃离我推掉我的手/ 2022年06月16日 03:09/ 0 赞/ 200 阅读

相关 Yeoman创建angular项目中的指令demo

本文主要介绍如何通过Yeoman的方式快速的建立angular中的directive（指令）。本文主要参考《angularjs 高级编程》好，下面上货。先介绍一下指

我不是女神ヾ/ 2022年05月29日 05:27/ 0 赞/ 187 阅读

相关 Angular——在线竞拍demo

因为是用angular开发“在线竞拍”主页面，所以就利用组件化的思想，先把主界面划分为7个组件，分别为：导航栏、搜索列表、产品信息、轮播图、脚注、星级评价，界面图片和每个组

红太狼/ 2022年05月27日 13:15/ 0 赞/ 146 阅读

相关 layer使用小demo

> bootstrapTable 后台请求数据, 鼠标放在title上展示提示信息 $('table').on('mouseenter','.th-inner',fu

╰+攻爆jí腚メ/ 2021年09月18日 16:18/ 0 赞/ 406 阅读