前端攻城狮Web前端之路前端开发那些事

Angular中几种参数传递方式

2017-02-22  本文已影响8017人  范小饭_

参数传递，是在程序运行过程中，实际参数就会将参数值传递给相应的形式参数，然后在函数中实现对数据处理和返回的过程，方法有按值传递参数，按地址传递参数和按数组传递参数。

最近用angular做app项目，除了实际的功能外，遇到很多坑，首先，我选用了angular框架，angular框架的优点我就不说了，但是确在其中遇到了很多坑，今天的主题是关于整理angularJS使用中传递参数的问题。

一、ngRoute中参数传递问题

1.1 ng-href中的参数传递

html中代码

<a ng-href="#/list/{{ id }}"> ID{{ id }}</a>

app.js中的代码

//主入口文件
//依赖于路由模块
angular.module('myApp',['ngRoute'])
    .config(['$routeProvider',function($routeProvider){
        $routeProvider
        .when('/list/:id',{
            templateUrl:'./view/car.html',
            controller:'CarCtrl as carCtrl'
    })
        .otherwise({
            redirectTo:'./view/home.html'
    })
}])

参数接收

angular.module('myApp')
//依赖注入$css（这个是angularCSS这个插件中的服务）
    .controller("CarCtrl",['$routeParams',function($routeParams){
        //$routeParams 可以获取到通过路由穿过来的所有参数，我们可以通过点语法获取到相应的参数
        var self = this;
        self.name = $routeParams.id;
    }])

二、ui.router中参数传递问题

2.1 ui-sref中的参数传递

html中使用ui-sref

<li ng-repeat="item in marketCtrl.getData"  ui-sref=".categary({value:item.id})">{{item.name}}</li>

app.js

//主入口文件
//依赖于路由个模块
angular.module('myApp', ['ui.router'])
    .config(['$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');
        $stateProvider
            .state('market.categary', {
                url : '/categary/:value',
                templateUrl : './view/market_1.html',
                controller : 'ProInfoCtrl as proInfoCtrl'
            })          
    }])

参数接收

angular.module('myApp')
    .controller('ProInfoCtrl', ['$stateParams',function($stateParams){
        var self = this;
        self.value = $stateParams.value;
    }] )

2.2 $state.go中的参数传递

html中

<img ng-click="homeCtrl.goDetail(name)" />

首先确定此时是跳转到哪个页面，跳转到哪个页面就在哪个页面的路由中接收参数，比如此时我是跳转到详情页面。
app.js中

angular.module('myApp', ['ui.router')
    .config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');
        $stateProvider
            .state('detail', {
                url:'/detail/:name',
                templateUrl : './view/detail.html',
                controller : 'DetailCtrl as detailCtrl'
            })  
    }])

参数接收并对其进行操作

//注意：这里angular.module('myApp') 第二个参数依赖去掉 
angular.module('myApp')
    .controller('DetailCtrl', ['$css', '$state','$stateParams','HomeService', '$location',function ($css,$state,$stateParams,HomeService,$location) {
        var self =this;
        //接收name参数，并且给name赋值
        self.name = $stateParams.name
        //通过获取到的name，反序列查找相应的对象
        HomeService.HotDataList().success(function (result) {
            for (var tempHotObj of result.data) {
                if($stateParams.name == tempHotObj.name){
                    self.getInfo = tempHotObj;
                    return;
                }
                self.getInfo = null;
            }
        });
    }])

三、其他参数传递

3.1基于factory的页面跳转传参

假设有N个页面，每个页面都需要用户填选信息，最终引导用户至尾页提交，同时后一个页面要显示前面所有页面填写的信息。这个时候用factory传参是比较合理的选择

.factory('myFactory', function () {   
    //定义参数对象
    var myObject = {};
    
    // 定义传递数据的setter函数
    var _setter = function (data) {
       myObject = data;     
    };

    //定义获取数据的getter函数
    var _getter = function () {
        return myObject;
    };
    // 在controller中通过调setter()和getter()方法可实现提交或获取参数的功能
    return {
        setter: _setter,
        getter: _getter
    };
});

举个栗子
为了方便观看，我把所有配置写在一个页面中，正式书写的时候，注意代码规范

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-app="myApp">
        <div ng-controller="homeCtrl">
            <h2>page1</h2>
            <form ng-submit="addInput()">
              <input type="text" ng-model="input.name" placeholder="输入员工姓名">
              <input type="number" ng-model="input.age" placeholder="输入员工年龄">
              <input type="text" ng-model="input.title" placeholder="输入员工职位">
              <input type="submit" value="add">
            </form>
        </div>
        <br />
        <div ng-controller="mineCtrl">
            <h2>page2</h2>
            <ul>
              <li ng-repeat="p in persons.list">
                {{p.name}}, {{p.age}}, {{p.title}}
              </li>
            </ul>
        </div>
        <script type="text/javascript" src="../lib/angular.min.js" ></script>
        <script type="text/javascript" src="../lib/angular-css.js" ></script>
        <script type="text/javascript" src="../lib/angular-ui-router.js" ></script>
        <script>
            angular.module('myApp', ['ui.router'])
            //定义控制器
                .controller('homeCtrl',["$scope","testFactory",function($scope,testFactory){
                    //代码规范，设置初始状态
                    $scope.input = {
                        name: '',
                        age: null,
                        title: ''
                   };    
                   //接收表单传递的参数
                    $scope.addInput = function() {
                        //把获取到的参数传递到仓库中setter存储起来
                        testFactory.setter($scope.input);
                        //存储之后把input清空，防止关联存储的数据
                        $scope.input = {
                        name: '',
                        age: null,
                        title: ''
                      };
                    };
                }])
            //定义控制器
                .controller('mineCtrl',["$scope","testFactory",function($scope, testFactory){
                    //获取设置页面设置的数据
                    $scope.persons = testFactory.getter();
                }])
            //定义仓库
                .factory('testFactory', function(){
                    //定义参数对象
                    var testObject = {};
                    //用数据保存数据
                    testObject.list = [];
                    //定义传递数据的setter函数，用来接收数据
                    var _setter = function (data) {
                        testObject.list.push(data);
                    };
                    //定义获取数据的getter函数
                    var _getter = function () {
                        return testObject;
                    };
                    // 在controller中通过调setter()和getter()方法可实现提交或获取参数的功能
                    return {
                        setter: _setter,
                        getter: _getter
                    }               
                });         
        </script>
    </body>
</html>

运行结果

GIF.gif

3.2基于factory和$rootScope.$broadcast()的传参

$rootScope.$broadcast()可以非常方便的设置全局事件，并让所有子作用域都监听到，并作出相应反应。

3.3基于localStorage或sessionStorage的页面跳转传参

通过LS或SS传参，一定要监听变量，否则参数改变时，获取变量的一端不会更新。

3.4基于localStorage/sessionStorage和Factory的页面传参

将不同方式组合起来可帮助你构建低耦合便于扩展和维护的代码。

举例：应用的授权。

用户登录后，后端传回一个时限性的token，该用户下次访问应用，通过检测token和相关参数，可获取用户权限，因而无须再次登录即可进入相应页面（Automatically Login）。其次所有的APIs都需要在HTTP header里注入token才能与服务器传输数据。此时我们看到token扮演一个重要角色：（a）用于检测用户权限，（b）保证前后端数据传输安全性。

参数传递

参考文献1：http://www.jb51.net/article/96506.htm

事件机制

建议观看文件2：http://blog.csdn.net/u010730126/article/details/51785669

上一篇 下一篇

猜你喜欢

热点阅读