javascript - passing parameter with ngroute

Question

Welcome To Ask or Share your Answers For Others

javascript - passing parameter with ngroute

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - passing parameter with ngroute

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T03:07:50+0000

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>

Categories

javascript - passing parameter with ngroute

javascript - passing parameter with ngroute

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags