码迷,mamicode.com
首页 > 其他好文 > 详细

路由 练习

时间:2017-10-17 15:43:19      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:turn   tar   text   doctype   click   play   e30   other   item   

<!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="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js

"></script>
    <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/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>
//例如
<h2>这是首页</h2>

其他页面可以用<p>{{name}}</p>





路由 练习

标签:turn   tar   text   doctype   click   play   e30   other   item   

原文地址:http://www.cnblogs.com/yangzhewoaini/p/7680717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!