<!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>
Angular路由实现单页面切换
最新推荐文章于 2022-05-10 14:33:34 发布