angular路由传参

最新推荐文章于 2023-08-15 14:32:11 发布

Charlie·

最新推荐文章于 2023-08-15 14:32:11 发布

阅读量516

点赞数

本文链接：https://blog.csdn.net/Mydtudysy/article/details/77984987

版权

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>web站点入口页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/font-awesome.css"/>
    <script src="js/angular.js"></script>
    <script src="js/angular-route.js"></script>
    <script>
        // 创建一个主模块 - 注意添加对ngRoute路由模块的依赖
        var myapp = angular.module("myapp", ["ngRoute"]);
        // 路由配置
        myapp.config(function ($routeProvider) {
            $routeProvider.when("/", {
                templateUrl: "pages/home.html",
                controller: "homeCtrl"}
            );
            $routeProvider.when("/about", {
                templateUrl: "pages/about.html",
                controller: "aboutCtrl"}
            );
            $routeProvider.when("/contact", {
                templateUrl: "pages/contact.html",
                controller: "contactCtrl"}
            );
            $routeProvider.when("/contact/:subject", {
                templateUrl: "pages/contact.html",
                controller: "contactCtrl"}
            );
            $routeProvider.otherwise({
                templateUrl: "pages/routeNotFound.html",
                controller: "notFoundCtrl"}
            );
        });

        // 注册多个控制器
        myapp.controller("homeCtrl", function ($scope) {
            $scope.message = "hello,this is home page";
        });
        myapp.controller("aboutCtrl", function ($scope) {
            $scope.message = "hello,this is about page";
        });
        myapp.controller("contactCtrl", function ($scope,$routeParams) {
            $scope.message = "hello,this is contact page";

            // angular会将传过来的url参数封装到一个对象中: {"subject":"b"}
            // 解析url参数
            var param = $routeParams["subject"];

            // 判断传过来的参数
            if(param == "a"){
                $scope.title = "我想提建议";
            }else if(param == "b"){
                $scope.title = "我想询价";
            }
        });
        myapp.controller("notFoundCtrl", function ($scope,$location) {
            $scope.message = "hello,this is Not Found File page";

            $scope.path = $location.path();   // 获取url中hash部分-路径
        });

        myapp.controller("myCtrl",function($scope){
            $scope.hello = "hello hello";
        });
    </script>
</head>
<body ng-controller="myCtrl">
<header>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#/">我的站点</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/"><i class="fa fa-home"></i>主页</a></li>
                <li><a href="#about"><i class="fa fa-shield"></i> 关于我们</a></li>
                <li><a href="#contact"><i class="fa fa-comment"></i> 联系我们</a></li>
            </ul>
        </div>

    </nav>
</header>

<div id="main">
    
    <div ng-view></div>
</div>

</body>

</html>

<div class="jumbotron text-center">
    <h1>About Page</h1>
    <p>这里显示消息</p>
    <p>{{message}}</p>
    <p>{{hello}}</p>
    <div>
        <p>如果您想了解更多有关我们<a href="#contact/a">请告诉我们</a>.</p>
        <p>如果您想要一个免费报价，请致电我们，或者通过<a href="#contact/b">询价</a>.</p>
    </div>
</div>

<div class="jumbotron text-center">
    <h1>Home Page</h1>
    <p>这是Home页面</p>
    <p>{{message}}</p>
    <p>{{hello}}</p>
</div>

<div class="jumbotron text-center">
    <h1>这里显示消息</h1>
    <p>{{message}}</p>
    <p>{{hello}}</p>
    <form style="width:25%;margin:auto;" role="form">
        <div class="form-group">
            <input type="text" class="form-control"
                   id="subject" placeholder="Subject"
                   ng-model="title">
        </div>
        <div class="form-group">
            <textarea class="form-control" id="message" placeholder="Message"></textarea>
        </div>
        <button type="submit" class="btn btn-default">发送信息</button>
    </form>
</div>