<!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/font-awesome.css"/> <script src="../angular-1.5.5/angular.js"></script> <script src="../angular-1.5.5/angular-route.js"></script> <script> var myapp=angular.module("myapp",["ngRoute"]); myapp.config(function($routeProvider){ console.log($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/:subject",{ templateUrl:"pages/contact.html", controller:"contactCtrl" }) }); myapp.controller("myCtrl",function($scope){}) myapp.controller("homeCtrl",function($scope){ $scope.message="hello" }); myapp.controller("aboutCtrl",function($scope){ $scope.message="about" }); myapp.controller("contactCtrl",function($scope,$routeParams){ $scope.title="联系我们"; console.log($routeParams); if($routeParams.subject=="a"){ $scope.title="我想提建议"; }else if($routeParams.subject=="b"){ $scope.title="我想咨询价格"; } }); </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>Home Page</h1> <p>{{message}}</p> </div>
第二个<div class="jumbotron text-center"> <h1>About Page</h1> <p>{{message}}</p> <div> <p>如果您想了解更多有关我们<a href="#contact/a">请告诉我们</a>.</p> <p>如果您想要一个免费报价，请致电我们，或者通过<a href="#contact/b">询价</a>.</p> </div> </div>
第三个<div class="jumbotron text-center"> <h1>这里显示消息</h1> <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>
252
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
