angular路由模拟微信页面切换和页面之间的传值

angular模拟微信页面的切换，页面之间传值。用路由。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>路由的使用</title><script src="day2/src/angular.js"></script><script src="js/angular-route.js"></script><style type="text/css">*{padding: 0;margin: 0;}body,html{width: 100%;height: 100%;}.content{position: absolute; top: 0;left: 0;bottom: 49px; width: 100%;background: red;}.footer{display: flex;position: absolute;left: 0; bottom: 0; height: 49px; width: 100%;border: 1px solid black}.footer a{ text-align: center;text-decoration: none;   flex: 1; border: 1px solid black;}</style></head><body><div ng-app="fristApp"><div class="content" ng-view></div><div class="footer" ng-controller="fristController"><a href="#div1">微信</a><a href="#div2">通讯录</a><a href="#div3">发现</a><a href="#div4">我</a></div></div></body><script type="text/javascript">var myApp = angular.module('fristApp',['ngRoute']);myApp.config(['$routeProvider',function($routeProvider,$params){$routeProvider.when('/div1',{// 使用$routeProvider配置路由，原理是当地址栏地址#之后的值跟when的值匹配，//如果匹配成功就调用。
//              template:"<p>p</p>"template:"<p>div1</p>"}).when('/div2',{templateUrl:"code22demo.html",controller:'secondController'}).when('/div3',{template:"<p>div3</p>"}).when('/div4/:name',{template:"<p>div4</p>"}).when('/test/:param1',{template:"<p>testHTML</p>",controller:'thridController'})// 还可以直接加载进其他的页面，分离页面.otherwise({redirectTo:'/div3'})}])myApp.controller('fristController',function(){})myApp.controller('secondController',function($scope,$location){$scope.name = '';$scope.clickNext = function(){$location.path('test/'+$scope.name);}});myApp.controller('thridController',function($scope,$routeParams){console.log($routeParams);console.log($routeParams.param1)})</script>
</html>

angular路由模拟微信页面切换和页面之间的传值相关推荐

Android viewPager2 + fragment 模拟微信首页2(滑动页面标签同步变化,点击标签滑动页面)
可以实现的方式:BottomNavigationView 这里我们不使用BottomNavigationView,手动来写代码先看一下效果 fragment + viewPager2模拟微信首页2( ...
基于angular实现模拟微信小程序swiper组件
这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组 ...
微信小程序父级之间的传值_微信小程序自定义组件封装及父子间组件传值的方法...
首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议wxzx-xxx命名例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml 正在 ...
PyQt模拟微信聊天页面开发
一.引述网上关于Qt模拟微信.QQ的页面开发的多如牛毛,但C++本身来说逻辑上难上手,对只会Python的小伙伴来说太痛苦了. 今天就为大家开个场(下节更精彩),众所周知,要想模拟微信.QQ等这种聊 ...
fragment中文网_Android使用Fragment打造万能页面切换框架
首先我们来回忆一下传统用Activity进行的页面切换,activity之间切换,首先需要新建intent对象,给该对象设置一些必须的参数,然后调用startActivity方法进行页面跳转.如果需要 ...
Android使用Fragment打造万能页面切换框架
首先我们来回忆一下传统用Activity进行的页面切换,activity之间切换,首先需要新建intent对象,给该对象设置一些必须的参数,然后调用startActivity方法进行页面跳转.如果需要 ...
Android使用Fragment打造万能页面切换框架（一）
首先我们来回忆一下传统用Activity进行的页面切换,activity之间切换,首先需要新建intent对象,给该对象设置一些必须的参数,然后调用startActivity方法进行页面跳转.如果需要 ...
谷歌无法打开微信二维码链接解决方案之使用谷歌模拟微信浏览器
目录一.为什么要模拟微信浏览器? 二.开发调试遇到的问题三.解决方案:谷歌模拟微信浏览器步骤一.为什么要模拟微信浏览器? 做过微信集成的人应该知道,页面在微信浏览器中,出 JS 相关的错误之后, ...
微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...

angular路由模拟微信页面切换和页面之间的传值

angular路由模拟微信页面切换和页面之间的传值相关推荐

最新文章

热门文章