angularjs路由传值$routeParams
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的更多相关文章
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- 【转】AngularJS路由和模板
1. AngularJS路由介绍 AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(re ...
- AngularJS路由和模板
前言 如果想开发一款类似gmail的web应用,我们怎么做呢? 以jQuery的思路,做响应式的架构设计时,我们要监听所有点击事件,通过事件函数触发我们加载数据,提交,弹框,验证等的功能:以 Angu ...
- AngularJS 路由精分
AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...
- AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式,获取路由参数,路由的Resolve
本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...
- angularjs 路由机制
前言 AngularJS路由主要有内置的ngRoute和一个基于ngRoute开发的第三方路由模块ui-router,内置的ngRoute有时满足开发需求,使用ui-router可以解决很多原生ngR ...
- AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常 ...
- AngularJS路由跳转
AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是 ...
- AngularJS进阶(二)AngularJS路由问题解决
AngularJS路由问题解决 遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMain ...
随机推荐
- ElasticSearch - 遐想
众所周知,ElasticSearch 存在一个问题,无法查询最近 1s 的写入.近实时这个属性,限制了其在某些场景的应用.本文记录了我在日常工作中想到的,解决特定场景的一些方案.既然是记录,便会有好有 ...
- 配置Servlet 容器
SpringBoot默认使用Tomcat作为嵌入式的Servlet容器: 1.如何定制和修改Servlet容器的相关配置: 1.修改和server有关的配置(ServerProperties[也是Em ...
- Seafile对接Amazon S3存储后端
安装python第三方库boto easy_install boto 进入seafile配置文件.conf添加下面内容 [commit_object_backend] name = s3 bucket ...
- React路由的使用 Redirect默认展示某一个页面 Switch找到停止 BrowserRouter和HashRouter 的区别
引入 Redirect 默认展示某一个页面 Switch 一旦找到 路由 就停止 不会在往下找了 App.js import {Link,Route,NavLink,Redirect,Switch} ...
- Hadoop入门学习笔记总结系列文章导航
一.为何要学习Hadoop? 这是一个信息爆炸的时代.经过数十年的积累,很多企业都聚集了大量的数据.这些数据也是企业的核心财富之一,怎样从累积的数据里寻找价值,变废为宝炼数成金成为当务之急.但数据增长 ...
- IT兄弟连 HTML5教程 CSS3属性特效 倒影
在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...
- WebShell代码分析溯源(七)
WebShell代码分析溯源(七) 一.一句话变形马样本 <?php $e = $_REQUEST['e'];$arr = array($_POST['POST'],);array_map(ba ...
- vs2017 C# ActiveX浏览器插件 创建 发布 C# windows窗体控件库(.NET Framework)注意事项
vs2017需要安装插 插件下载地址:https://marketplace.visualstudio.com/items?itemName=VisualStudioProductTeam.Micro ...
- 使用VeeValidate的data-vv-scope指定验证范围
<div class="login" v-show="activeTab === 1"> <div class="panel-con ...
- Java生鲜电商平台-优惠券功能设计与开发(小程序/APP)
Java生鲜电商平台-优惠券功能设计与开发(小程序/APP) 说明:Java生鲜电商平台-优惠券功能设计与开发(小程序/APP) 目录 1.项目背景与需求分析 2.需求目的与功能点列表 3.业务逻辑 ...