angularJS 中的传参

今天总结一下 angularJS 传参的 3种方式：(配合 ui-router)

现在有两个页面，page1.html 和 page2.html， 现由 page1.html 向 page2.html 传递参数（name、age）

1）params: 传递静态参数　　--> 应用场景：初始化传递 参数

第一步：在 路由中 进行配置，准备参数：

        // *1. params 传递静态参数
        .state('state2',{
            url:"/page2",
            templateUrl: "views/page2.html",
            controller: 'page2Controller',
            params: { name:'jcy', age:'22' }
        })

第二步：page2Controller 中接收参数：

   .controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){

        // * 获取参数：
        // $scope.paramsToPage2 = $stateParams;
        // 或
        $scope.paramsToPage2 = $state.params;

        console.log($state.params);
        
    }])

第三步：page2.html 中 应用参数：

<h1>Page2</h1>
<hr/>
<div>
    name：{{ paramsToPage2.name }} <br><br>

    age: {{ paramsToPage2.age }} <br><br>
</div>

查看效果：

ok,成功；

 

2） ui-sref： 传递参数　　--> 应用场景：点击页面上的 < a ui-sref="???"></a> 进行状态切换时，传递参数

第一步：page1.html 中配置 ，准备参数

<a ui-sref="state2{{name:'jcy', age:'22'}}">Page 2</a>

第二步：路由中配置，得到形式参数

　　说明一下： 在路由器中得到 形式参数，有三种方式

　　*1. 在 url 中，用形如 url: "/page2/:name/:age" 的方式

　　*2. 在 url 中，用形如 url:"/page2/{name}/{age}" 的方式

　　*3. 不在 url 中 配置接收形参的方式，取而代之，有 params 中，用 形如 params: {"name": null, "age":null} 的方式 ，声明 欲接收的 参数名；

　　　　重点 提一下，params 中声明的参数 的 key值，一定要与 ui-sref 中欲传递的参数 key值 相同；

        // *2. 应用 ui-sref形式 传参，在 router 中的 3种配置方式
        .state('state2',{  
            // url: "/page2/:name/:age",             // 方式一: 会在地址栏 显示参数
            // url:"/page2/{name}/{age}",            // 方式二: 会在地址栏 显示参数
            url:"/page2",                            // 方式三： 不会在地址栏里 显示参数，
                                                    //          但是 必须在 params 中定义 与参数 key值 相同的同名变量 
            templateUrl: "views/page2.html",
            controller: "page2Controller",
            params: {"name": null, "age":null}      // 配合 方式三，使用; (值不一定 非得是 null, 是什么都可以，只要key值不变，value都会被传过来的值 覆盖)
        })

第三步：page2Controller 中接收参数：

.controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){

        // * 获取参数：
        // $scope.paramsToPage2 = $stateParams;
        // 或
        $scope.paramsToPage2 = $state.params;

        console.log($scope.paramsToPage2);
        
    }])

第四步：page2.html 中 应用参数：

<h1>Page2</h1>
<hr/>
<div>
    name：{{ paramsToPage2.name }} <br><br>

    age: {{ paramsToPage2.age }} <br><br>
</div>

查看效果：

ok,成功；

 

3） $state.go() 传递参数　　-->应用场景：在 应用逻辑中进行 状态切换

举例： page1.html 中有个 button 按钮，注意, 不是 ui-sref 形式的按钮，just only a normal button，点击 button 实现 状态切换的效果

第一步：page1.html 中 的 html

    <!-- 传递 两个参数：arg1为name, arg2为age -->
    <button ng-click="toPage2('jcy','22')">Page 2</button>

第二步： 路由配置

        .state('state1',{
            url:"/page1",
            templateUrl: "views/page1.html",
            controller: 'page1Controller'
        })
        .state('state2',{  
            url:"/page2", 
            templateUrl: "views/page2.html",
            controller: "page2Controller",
            params: {"name": null, "age":null}
        })

第三步：page1Controller 中 书写逻辑

    .controller('page1Controller', ['$scope', '$state', function($scope, $state){
        // * 传递参数：
        // $state.go( state, {arg1:xxx, arg2；xxx, .....} ) 形式传递参数
        // $state.go() 接收两个参数；第1个 ：是要切换到的 state; 第2个：是要传递的参数；
        
        $scope.toPage2 = function(arg1, arg2){
            $state.go('state2', {'name': arg1, 'age': arg2});  // 传递的参数 key值，一定要与 模板为page2.html的路由中的 params 中的参数 key 值相同
        }

    }])

第四步：page2Controller 中 接收参数

    .controller('page2Controller', ['$scope', '$state', '$stateParams', function($scope, $state, $stateParams){

        // * 获取参数：
        // $scope.paramsToPage2 = $stateParams;
        // 或
        $scope.paramsToPage2 = $state.params;

        console.log($scope.paramsToPage2);
        
    }])

第五步：page2.html 中 应用参数：

<h1>Page2</h1>
<hr/>
<div>
    name：{{ paramsToPage2.name }} <br><br>

    age: {{ paramsToPage2.age }} <br><br>
</div>

查看效果：

               

 ok，打完收工；

 

个人总结，转载请注明出处， 谢谢；