angular js的路由和传参

来源：互联网发布：淘宝店铺扫店软件编辑：程序博客网时间：2024/06/06 17:26
<!DOCTYPE html><html><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"            }).when("/about",{                "templateUrl":"pages/about.html",                "controller":"aboutCtrl"            }).when("/contact",{                "templateUrl":"pages/contact.html",                "controller":"contactCtrl"            }).when("/contact/:name",{                "templateUrl":"pages/contact.html",                "controller":"contactCtrl"            })        });        // 注册多个控制器        myapp.controller("homeCtrl",function($scope){            $scope.message="这是首页"        });        myapp.controller("aboutCtrl",function($scope){            $scope.message="这是about页"        });       //$routeparams 是用来注入传参       myapp.controller("contactCtrl",function($scope,$routeParams){            $scope.message="这是contactCtrl页";            console.log($routeParams);            if($routeParams.name=="a"){                $scope.title="我想告诉";            }else if($routeParams.name=="b"){                $scope.title="我想询价";            }        });    </script></head><body ng-app="myapp"><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>//about 页面 配合传参<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>//这是contact页面把参数传递到这个页面<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="aa"                   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>//这是home页面默认的页面<div class="jumbotron text-center">    <h1>Home Page</h1>    <p>这是Home页面</p>    <p>{{message}}</p>    <p>{{hello}}</p></div>
阅读全文
0 0