angular+一個簡單的頁面+有上角有主頁+關於我們+聯絡我們
阿新 • • 發佈：2019-01-01
<!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>
home.html<div class="jumbotron text-center"> <h1>Home Page</h1> <p>這是Home頁面</p> <p>{{message}}</p> <p>{{hello}}</p> </div>
about.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>
contact.html<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>
routeNotFound.html<div class="jumbotron text-center"> <h1>很抱歉!</h1> <p>這裡顯示訊息</p> <p>{{message}}</p> <p>{{hello}}</p> <p class="has-error">當前錯誤路徑是:{{path}}</p> </div>