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" 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>
看看效果:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
主要内容：AngularJS 实例,路由设置对象,AngularJS 实例本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA）。 通常我们的 URL 形式为 http://xnip.cn/first/page，但在单页 Web 应用中 AngularJS 通过 #! + 标记
-
本文向大家介绍AngularJS 路由详解和简单实例，包括了AngularJS 路由详解和简单实例的使用技巧和注意事项，需要的朋友参考一下 AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由。 AngularJS 路由允许我们通过不同的 URL 访问不同的内容。 通过 AngularJS 可以实现多视图的单页Web应用（single page web application
-
问题内容： 我遇到的情况是表单跨越了几页（可能并不理想，但这就是事实）。我想为整个表单提供一个范围，以便您随身携带，以便用户在步骤之间来回移动时很容易记住状态。 所以我需要用非常伪的代码来做： 组 单击一个链接，然后将其路由到新模板（可能使用同一控制器）。 仍应与最后一页上的值相同。 是否以某种方式持久保存示波器的数据是解决此问题的正确方法，还是还有其他方法？您是否甚至可以创建一个在路由之间具有持
-
我按上面的传值，为什么目标页都拿不到呢？这可能是哪里问题？ 而且跳之前明明有值： 可在目标页确都是空。
-
本文向大家介绍详解Angular5路由传值方式及其相关问题，包括了详解Angular5路由传值方式及其相关问题的使用技巧和注意事项，需要的朋友参考一下 目前Angular已经升级到了稳定版本Angular5,这次升级更小更快以及更稳定!路由可以说是Angular甚至是单页应用的核心部分了吧!在angularjs中的路由最大的缺点就是无法嵌套路由,在Angular中解决了这个问题!在Angular中
-
本文向大家介绍AngularJs ng-route路由详解及实例代码，包括了AngularJs ng-route路由详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 前提 首先需要在页面引入angular和angular-route，注意要在angular-route之前引入angular <script src="../../bower_components/angular/angular