首页新闻找找看学习计划

AnjularJS如何在不同的页面之间发送请求和传值

0
[已解决问题] 解决于 2017-06-05 16:09

之前的项目都是用jquery写的,也比较顺利,现在要改用anjular了,首先页面的切换使用的是ui-router ,主要有三个页面,一个是index.html里面是一些html标签,以及css,js的引用,没有具体的内容,只有一个<div ui-view></div> ,另外一个是导航栏 navbar.html,故名思议就是有很多菜单,还有一个main页面,就以一个div里面有一段话,再有就是一个展示页面,view.html,里面是一个表格。现在是打开网页之后默认显示的是index.html+navbar.html+main.html,然后我需要点击导航栏的菜单,跳转到view页面上,当然跳转页面已经实现了,但是,我再点击的时候需要发送请求到后台,然后后台返回数据到view.html,也就是说发送请求的页面与接收返回值的页面不是同一个页面,现在的问题是,导航栏上有很多菜单,每个菜单都有一个属性值,我需要在点击的时候,获取哪个属性值,然后发送到后台,然后前台再接收,这一点不知道怎么做?是需要在navbar.html上的每个链接上都加上ng-click指令吗,希望有人可以给我一个具体的实例作参考

问题补充:

这是navbar.html

<!--页头开始-->
<div id="header" class="page-header" role="navigation">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img alt="Brand" src="../images/cpa.png"></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!--这里使用ui-sref将超链接和路由建立联接-->
                <ul class="nav navbar-nav">
                    <!--ui-sref=".required"说明当点击这个链接的时候路由会跳转到相应的包含required状态的路由中-->
                    <!--这里使用ui-sref链接路由状态,将该状态的url替换到href中,相当与href="#/PageTab/xiaomi"-->
                    <li ui-sref-active="active" ui-sref=".main"><a href="javascript:void(0)">首页</a></li>
                    <li class="dropdown">
                        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-expanded="false">在线练习 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu" id="unitExam">
                            <li ui-sref-active="active" ui-sref=".unitExam"><a ng-click="" href="javascript:void(0)" typeCode="1">会计基础</a></li>
                            <li ui-sref-active="active" class="divider"></li>
                            <li ui-sref-active="active" ui-sref=".unitExam"><a href="javascript:void(0)" typeCode="2">会计电算化</a></li>
                            <li class="divider"></li>
                            <li ui-sref-active="active" ui-sref=".unitExam"><a href="javascript:void(0)" typeCode="3">财经法规与职业道德</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:void(0)">模拟测验</a></li>
                    <li><a href="javascript:void(0)">用户中心</a></li>
                </ul>
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div> <!--页头结束-->
<div ui-view>

</div>

 这是路由配置

var routerApp = angular.module('myapp', ['ui.router']);
routerApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('navbar', {  //路由状态
            url: '/navbar',  //路由路径
            templateUrl: 'navbar.html',  //路由填充的模板
            controller: 'navbarCtrl'
        })
        .state('navbar.main', {  //路由状态
            url: '/main',  //路由路径
            templateUrl: 'main.html'  //路由填充的模板
        })
        .state('navbar.unitExam', {  //路由状态
            url: '/unitExam', //路由路径
            templateUrl: 'unitExam.html',//路由填充的模板
            controller: 'UnitExamCtrl' //控制器
        });
    // 默认路径,在status中匹配不到时执行
    $urlRouterProvider.otherwise('/navbar/main');
});

 

陈无问的主页 陈无问 | 菜鸟二级 | 园豆:210
提问于:2017-04-19 10:43
< >
分享
最佳答案
0

好像是通过定义angular service来进行数据共享

奖励园豆:5
nil | 小虾三级 |园豆:660 | 2017-04-19 16:09

怎么在点击切换页面的同时,发送请求

陈无问 | 园豆:210 (菜鸟二级) | 2017-04-20 09:59

@陈无问: https://www.zhihu.com/question/33565135

nil | 园豆:660 (小虾三级) | 2017-04-20 10:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册