Angular路由实现单页面切换

来源:互联网 发布:人肉搜索 网络暴力 编辑:程序博客网 时间:2024/03/29 21:25
<!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>
原创粉丝点击