AngularJS+路由

最新推荐文章于 2021-01-26 15:13:27 发布

Logitech12

最新推荐文章于 2021-01-26 15:13:27 发布

阅读量394

点赞数

本文链接：https://blog.csdn.net/logitech12/article/details/78315023

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            display: inline-block;
            width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border: 1px solid #000;
            text-decoration: none;
        }
        .blue{
            background: blue;
            color: #fff;
        }
        .ff{
            background: none;
            color: #000;
        }
        h2{
            color: red;
        }
    </style>
    <script src="../../../angular-1.5.5/angular.min.js"></script>
    <script src="../../../angular-1.5.5/angular-route.js"></script>
    <script>
        var myapp=angular.module("myapp",["ngRoute"]);
        myapp.config(function($routeProvider){
           console.log($routeProvider);
            $routeProvider.when("/home",{
                templateUrl:"views/home.html",
                controller:"homeCtrl"
            }).when("/detail",{
                templateUrl:"views/detail.html",
                controller:"detailCtrl"
            }).when("/news",{
                templateUrl:"views/news.html"
            }).otherwise({
                redirectTo:"/home"
            })
        });
        myapp.controller("myCtrl",function($scope){
            $scope.name="a";
            $scope.dj="sy";
            $scope.sx="sy";
            $scope.fun=function(name){
                $scope.dj=name;
            };
            $scope.get=function(item){
                $scope.sx=item;
                if($scope.dj==$scope.sx){
                    return "blue"
                }else{
                    return "ff"
                }
            }
        });
        myapp.controller("homeCtrl",function($scope){
            $scope.name="首页控制";
        });
        myapp.controller("detailCtrl",function($scope){
           $scope.name="详情控制";
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
    <p>{{name}}</p>
    <a href="#home" class="blue" ng-click="fun('sy')" ng-class="get('sy')">首页</a>
    <a href="#detail" ng-click="fun('xq')" ng-class="get('xq')">详情页</a>
    <a href="#news" ng-click="fun('xw')" ng-class="get('xw')">新闻页</a>
    <ng-view>

</ng-view>
</body>
</html>

Bhome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>这个是首页</h2>
</body>
</html>


detail
<h2>这个是详情页</h2>
<p>{{name}}</p>


home
<h2>这个是首页</h2>
<p>{{name}}</p>


news
<h2>这个是新闻页</h2>

Logitech12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS+路由

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> a{ display: inline-block; width: 200px; height: 40px; lin
复制链接

扫一扫