AngularJS+路由

来源：互联网发布：华为mate8手机壳淘宝编辑：程序博客网时间：2024/06/05 15:10

<!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>

阅读全文

0 0