angular+一个简单的页面+有上角有主页+关于我们+联系我们
2017-09-14 10:58
435 查看
<!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>
相关文章推荐
- 一个简单的爬虫程序(爬取百度百科关于python的一千个页面)
- 关于如何控制一个页面的Ajax读数据只读一次的简单解决办法!
- SpringMVC学习系列(3) 之 URL请求到Action的映射规则 在系列(2)中我们展示了一个简单的get请求,并返回了一个简单的helloworld页面。本篇我们来学习如何来配置一个acti
- 问题:关于贴友的一个书本页面简单布局(html+css)的实现
- 关于贴友的一个书本页面简单布局(html+css)的实现
- 一个关于在页面写javaScript传值的问题
- 一个简单的关于权限判断登陆的javaBean文件
- 列表页面传递一个id给对应的详情页面(做项目时的简单总结)
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- 关于ExpandableListView用法的一个简单小例子
- 关于PHP的一个简单实例(登录模块)
- 关于sqlserver、access、mysql数据库性能的一个简单测试
- 记录一个关于在event receiver中执行页面跳转的问题
- 电报加密 描述: 发送电报保密是一项重要的工作,尤其是在军事领域,所以,为了安全的需要常常会对发送的内容进行加密,然后,接收方再进行解密,这样就达到了安全的需要。 本次我们完成一个简单的对字母加密程
- 如何使用CSS栅格布局创建一个简单页面布局
- (腾讯前端小白结业作业)一个简单的博客模仿页面
- Git 分支 - 分支的新建与合并 分支的新建与合并 让我们来看一个简单的分支新建与分支合并的例子,实际工作中你可能会用到类似的工作流。 你将经历如下步骤: 开发某个网站。 为实现某个新的需求,创
- JS实现一个简单的页面两份样式表
- 问题:关于贴友一个用js传递value默认值的简单实现
- JavaScript一个简单的验证页面