angularjs路由传值$routeParams详解
2017-09-18 08:57
686 查看
AngularJS利用路由传值,供大家参考,具体内容如下
1.导包
<script src="angular.min.js"></script> <script src="angular-route.js"></script>
2.依赖注入ngRoute
var myapp=angular.module("myapp",["ngRoute"]);
3.配置路由
myapp.config(function ($routeProvider) { //页面选择 $routeProvider.when("/home",{ // template:"<h2>这是主页面</h2>" templateUrl:"home.html" }).when("/about",{ // template:"<h2>这是关于我们的信息</h2>" templateUrl:"about.html" }).when("/cel",{ // template:"<h2>请联系我们</h2>" templateUrl:"cel.html", // controller:"celCtrl" }).when("/cel/:sub",{//传参数 templateUrl:"cel.html", controller:"celCtrl" }) });
4.写cel的控制器
myapp.controller("celCtrl",function ($scope,$routeParams) { //根据传过来的参数给输入框赋值 var param = $routeParams["sub"]; if(param=="a"){ $scope.mname="我想提建议..."; }else if(param=="b"){ $scope.mname="我想购买..." } });
5.通过about页面传值给cel页面
<p>About页面</p> <ul> <li><a href="#cel/a" rel="external nofollow" >告诉我们</a></li> <li><a href="#cel/b" rel="external nofollow" >询价</a></li> </ul>
修改cel页面的输入框的值
<p>显示页面</p> <ul> <li><input type="text" placeholder="sub" ng-model="mname"></li> <li><input type="text" placeholder="Message" ng-model="minfo"></li> </ul>
最后是页面布局
<body ng-app="myapp"> <!--页面布局--> <header> <p>我的站点</p> <div> <a href="#home" rel="external nofollow" >主页</a> <a href="#about" rel="external nofollow" >关于我们</a> <a href="#cel" rel="external nofollow" >联系我们</a> </div> </header> <div ng-view="" class="View"></div> </body>
看看效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Oracle 11g for Windows Server 2008安装详解
- Spring中的事务管理实例详解
- Android shape 详解
- PHP5 Session 使用详解(一)
- logback的使用和logback.xml详解
- NSAttributedString 详解
- iOS —— SQLite3 功能使用详解 (三)
- open***中server.conf和client.conf配置文件详解
- 阿里云热修复sophix详解
- Android屏蔽软键盘并且显示光标的实例详解
- vue2.x+webpack快速搭建前端项目框架详解
- java环境变量设置详解
- PHP数组排序函数array_multisort()函数详解
- C语言使用openSSL库AES模块实现加密功能详解
- 【推荐系统】今日头条推荐算法原理全文详解
- Spring 配置文件详解
- JSP九大内置对象详解[二]
- lua面向对象详解(3)
- 30个Oracle语句优化规则详解
- freeswitch之G729转码操作配置详解