Angular路由实现单页面切换

来源：互联网发布：mysql如何删除数据库编辑：程序博客网时间：2024/04/27 09:20

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Angular路由</title>    <!--导入angularjs库文件-->    <script src="angular.js"></script>    <!--导入angular_route文件-->    <script src="angular-route.js"></script>    <script type="text/javascript">        var app = angular.module("myApp",['ngRoute']);        //angular路由的配置        app.config(["$routeProvider",function ($routeProvider) {            $routeProvider                .when("/",{template:"这是主页面"})                .when("/user",{template:"这是用户页面"})                .when("/setting",{template:"这是设置页面"})                .otherwise({redirectTo:"/user"})        }]);        app.controller("myCtrl",function ($scope) {        });    </script></head><body ng-app="myApp" ng-controller="myCtrl">    <ul>        <li><a href="#/">主页面</a></li>        <li><a href="#/user">用户页面</a></li>        <li><a href="#/setting">设置</a></li>        <li><a href="#/qwed">其他页面</a></li>    </ul>    <div ng-view  style="width: 200px; height: 200px; border: 1px dashed blue" >    </div></body></html>

阅读全文

0 0