AngularJS 路由

最新推荐文章于 2024-06-18 15:37:56 发布

翻译最新推荐文章于 2024-06-18 15:37:56 发布 · 180 阅读

本文介绍了如何使用AngularJS路由创建单页Web应用(SPA)，并展示了如何通过不同URL访问多视图的内容。通过示例代码，读者可以了解如何配置路由及加载不同模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。

通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：

http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/angular.min.js" ></script>
        <script type="text/javascript" src="js/angular-route.js" ></script>
    </head>
    <body ng-app="Mapp" ng-controller="Mctrl">
        <nav style="width: 800px;">
            <a href="#/me">我的站点</a>
            <a href="#/call" style="float: right;">联系我们</a>
            <a href="#/about" style="float: right;margin-right: 30px;">关于我们</a>
        </nav>
        <div style="width: 800px;height: 500px;" ng-view>

        </div>

        <script>
            var m = angular.module("Mapp",['ngRoute']);
            m.controller("Mctrl",function($scope){

            })
            m.config(function($routeProvider){
                $routeProvider
                .when("/about",{templateUrl:"new_file1.html"})
                .when('/me',{templateUrl:"new_file2.html"})
                .when('/call',{templateUrl:"new_file3.html"})
            })

        </script>
    </body>
</html>