angular路由

最新推荐文章于 2024-08-14 09:49:44 发布

Charlie·

最新推荐文章于 2024-08-14 09:49:44 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Mydtudysy/article/details/77965867

本文介绍了一个使用Angular框架实现页面路由导航的例子。通过定义不同的路由路径，可以加载不同的模板和控制器来展示首页、详情页和新闻页等内容。文章还展示了如何通过Angular的ngRoute模块进行路由配置，并提供了一个简单的导航菜单实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular.min.js"></script>
    <script src="../angular-route.min.js"></script>
    <script>
        var myapp = angular.module("myapp", ["ngRoute"]);
        myapp.config(function ($routeProvider) {
            console.log($routeProvider);
            $routeProvider.when("/home", {
                templateUrl: "pager/home.html",
                controller: "homeCtrl"
            }).when("/detail", {
                template: "<h2>这里是详情页</h2>"
            }).when("/news", {
                template: "<h2>这里是新闻页</h2>"
            }).when("/error", {
                template: "<h2>发生了错误</h2>"
            }).otherwise("/error")

        })
        myapp.controller("homeCtrl", function ($scope) {
            $scope.name = "aaaaaa"
        })
    </script>
</head>
<body ng-app="myapp">
<ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#detail">详情页</a></li>
    <li><a href="#news">新闻页</a></li>
</ul>
<div ng-view=""></div>
</body>
</html>