分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

angularjs路由传值$routeParams

发布时间:2023-09-06 01:12责任编辑:白小东关键词:js

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">告诉我们</a></li> ???????<li><a href="#cel/b">询价</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">主页</a> ???????????<a href="#about">关于我们</a> ???????????<a href="#cel">联系我们</a> ???????</div> ???</header> ???<div ng-view="" class="View"></div></body>

看看效果:

  

angularjs路由传值$routeParams

原文地址:http://www.cnblogs.com/xjean/p/7522538.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved