Route1

Route1

关注
发信
关注(28)粉丝(399)

传递参数与ngroute

本文介绍了传递参数与ngroute的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的

angularroute.html 

 ＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtmlNG-应用=AngularApp＆GT;
＆LT; HEAD＆GT;
    ＆LT;标题＆GT;＆LT; /标题＆GT;
    ＆所述; SCRIPT SRC =angular.js＆GT;＆下; /脚本＆GT;
    ＆所述; SCRIPT SRC =角route.js＆GT;＆下; /脚本＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;        变种AngApp = angular.module（'AngularApp'，['ngRoute']）;
        AngApp.config（函数（$ routeProvider）{
            $ routeProvider
                。当（'/ ROUTE1 /：身份证'，{
                    templateUrl：Route1.html'，
                    控制器：'ROUTE1                }）
                。当（'/ Route2到'，{
                    templateUrl：Route2.html'，
                    控制器：Route2到'
                }）                。除此以外（{
                    redirectTo：'/'
                }）;
        }）;    ＆LT; / SCRIPT＆GT;            ＆LT; /头＆GT;
            ＆LT;身体GT;                ＆所述p为H.;路由解释与所述; / P＆GT;
                ＆所述; A HREF =＃ROUTE1 / 100＆GT; ROUTE1＆下; / A＆GT;＆所述峰; br＆GT;
                ＆所述; A HREF =＃Route2到＆GT; Route2到与所述; / A＆GT;
                ＆LT; D​​IV NG-视图＆gt;                ＆LT; / DIV＆GT;                ＆所述; SCRIPT SRC =Route.js＆GT;＆下; /脚本＆GT;
            ＆LT; /身体GT;
            ＆LT; / HTML＆GT;

在Route.js文件包含。

  angular.module（'ROUTE1'）。控制器（'ROUTE1'，函数（$范围，$ routeParams）{
    $ scope.ID = $ routeParams.ID;
}）;angular.module（'Route2到'）。控制器（Route2到'，函数（）{
}）;

Route1.html 

 ＆LT; HTML的xmlns =htt​​p://www.w3.org/1999/xhtmlNG-应用=ROUTE1＆GT;
＆LT; HEAD＆GT;
    ＆LT;标题＆GT;＆LT; /标题＆GT;＆LT; /头＆GT;
＆LT;机身NG控制器=ROUTE1＆GT;
    {{ID}}    {{4 + 10}}＆LT; /身体GT;
＆LT; / HTML＆GT;

问题是它加载页面，但我不能接受得到的参数值，对route1.html，前pression也没有得到评估。
可能是什么问题？
谢谢。


解决方案

删除不是从你的路径模板所需的一切。只有你在模板体内添加的内容是必需的。

这将成为角NG-视图与您在您的路线配置的控制器被包括在内。这是一个片面的，不完整的HTML文件。

此外，您的 route.js code是不正确的。你可以创建一个模块 angular.module（'路线'，[]）。控制器（'route1Controller'，函数（）{...}）并把它作为依赖在您的应用程序。

使用出一个已经定义你喜欢你的 route.js 你得到一个模块中所做的括号内。

请在下面或在此更新的code看看。

\r
\r

VAR AngApp = angular.module（'AngularApp'，['ngRoute']）\r
.controller（'Route1Controller'，Route1Controller）\r
.controller（'Route2Controller'，Route2Controller）;\r
\r
AngApp.config（函数（$ routeProvider）{\r
    $ routeProvider\r
        。当（'/ ROUTE1 /：身份证'，{\r
        templateUrl：Route1.html'，\r
        控制器：'Route1Controller\r
\r
    }）\r
        。当（'/ Route2到'，{\r
        templateUrl：Route2.html'，\r
        控制器：'Route2Controller\r
    }）\r
\r
        。除此以外（{\r
        redirectTo：'/'\r
    }）;\r
}）;\r
\r
功能Route1Controller（$范围，$ routeParams）{\r
    $ scope.ID = $ routeParams.ID;\r
}\r
\r
功能Route2Controller（$范围）{\r
\r
}

\r

＆LT;脚本SRC =htt​​ps://cdnjs.cloudflare.com/ajax /libs/angular.js/1.4.7/angular.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js＆GT;＆下; /脚本＆GT;\r
\r
＆LT; D​​IV NG-应用=AngularApp＆GT;\r
    ＆LT;脚本类型=文/ NG-模板ID =Route1.html＆GT;\r
        ROUTE1\r
        {{ID}}\r
\r
        {{4 + 10}}\r
    ＆LT; / SCRIPT＆GT;\r
    ＆LT;脚本类型=文/ NG-模板ID =Route2.html＆GT;\r
        路径2\r
\r
        {{4 + 10}}\r
    ＆LT; / SCRIPT＆GT;\r
＆所述p为H.;路由解释与所述; / P＆GT;\r
                ＆所述; A HREF =＃ROUTE1 / 100＆GT; ROUTE1＆下; / A＆GT;＆所述峰; br /＆GT;\r
                ＆所述; A HREF =＃Route2到＆GT; Route2到与所述; / A＆GT;\r
                ＆LT; D​​IV NG-视图＆gt;\r
\r
                ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;

\r

\r
\r

here is my

angularroute.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularApp">
<head>
    <title></title>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script type="text/javascript">

        var AngApp = angular.module('AngularApp', ['ngRoute']);
        AngApp.config(function ($routeProvider) {
            $routeProvider
                .when('/Route1/:ID', {
                    templateUrl:'Route1.html',
                    controller:'Route1'

                })
                .when('/Route2', {
                    templateUrl: 'Route2.html',
                    controller:'Route2'
                })

                .otherwise({
                    redirectTo: '/'
                });
        });

    </script>

            </head>
            <body>

                <p>Routing Explained</p>
                <a href="#Route1/100">Route1</a><br>
                <a href="#Route2">Route2</a>
                <div ng-view>

                </div>

                <script src="Route.js"></script>       


            </body>
            </html>

the Route.js file contains.

angular.module('Route1').controller('Route1', function ($scope, $routeParams) {
    $scope.ID = $routeParams.ID;
});

angular.module('Route2').controller('Route2', function () {
});

Route1.html

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="Route1">
<head>
    <title></title>

</head>
<body ng-controller="Route1">


    {{ID}}

    {{4+10}}

</body>
</html>

the problem is it loads the page but i can not receive get the parameter value , on route1.html ,the expression also do not get evaluated .what could be the problem?thanks.

解决方案

Remove everything that's not needed from your route template. Only the content that you added in your body of the template is required.

That will be included by angular into ng-view with the controller that you have configured in your route. It's a partial and not a complete html file.

Also your route.js code is not correct. You could create a module angular.module('route', []).controller('route1Controller', function(){...}) and use it as dependency in your app.

With-out the brackets like you did in your route.js you're getting a module that's already defined.

Please have a look at your updated code below or in this fiddle.

var AngApp = angular.module('AngularApp', ['ngRoute'])
	.controller('Route1Controller', Route1Controller)
	.controller('Route2Controller', Route2Controller);

AngApp.config(function ($routeProvider) {
    $routeProvider
        .when('/Route1/:ID', {
        templateUrl:'Route1.html',
        controller:'Route1Controller'

    })
        .when('/Route2', {
        templateUrl: 'Route2.html',
        controller:'Route2Controller'
    })

        .otherwise({
        redirectTo: '/'
    });
});

function Route1Controller($scope, $routeParams) {
    $scope.ID = $routeParams.ID;
}

function Route2Controller($scope) {

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.js"></script>

<div ng-app="AngularApp">
    <script type="text/ng-template" id="Route1.html">
        Route1
        {{ID}}

        {{4+10}}
    </script>
    <script type="text/ng-template" id="Route2.html">
        Route2

        {{4+10}}
    </script>
<p>Routing Explained</p>
                <a href="#Route1/100">Route1</a><br/>
                <a href="#Route2">Route2</a>
                <div ng-view>

                </div>
    </div>

这篇关于传递参数与ngroute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-25 00:00
Powered by LMLPHP ©2024 Route1 0.005819