Angular路由实现单页面切换

最新推荐文章于 2021-03-01 10:13:40 发布

Android丶ztz

最新推荐文章于 2021-03-01 10:13:40 发布

阅读量1.2k

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/TianzhuZ/article/details/78265032

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular路由实现单页面切换</title>
    <script src="AngularJS/angular.js"></script>
    <script src="AngularJS/angular-route.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp",['ngRoute']);
        app.controller("myCtrl01",function ($scope,$route) {
            $scope.$route = $route;
        });
        app.controller("myCtrl02",function ($scope,$route) {
            $scope.$route = $route;
        });
        app.config(["$routeProvider",function ($routeProvider) {
            $routeProvider
                .when('/home',{
                    templateUrl:'home.html',
                    controller:'myCtrl01'
                })
                .when('/second',{
                    templateUrl:'second.html',
                    controller:'myCtrl02'
                })
                .otherwise({
                    redirectTo:'/home'
                });
        }]);
        app.controller("myCtrl",function ($scope) {

        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <script type="text/ng-template" id="home.html">
        <h1>Home</h1>
    </script>
    <script type="text/ng-template" id="second.html">
        <h1>Second</h1>
    </script>
    <div>
        <a href="#/home">HOME</a>
        <a href="#/second">SECOND</a>
    </div>
    <div  ng-view style="width: 200px; height: 200px;border: 1px dashed blue">

    </div>
</body>
</html>

Android丶ztz

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular路由实现单页面切换

html>html lang="en">head> meta charset="UTF-8"> title>Angular路由实现单页面切换title> script src="AngularJS/angular.js">script> script src="AngularJS/angular-route.js">script> script type
复制链接

扫一扫

专栏目录