Loading URL into ng-view programatically

Question

Referring to the code given below, I would like to be able to load viewTeam URL into ng-view from the showTeam() function. How can I do this?

<html>

<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>

    <script>
        var teamApp = angular.module("teamApp", ['ngRoute']);

        teamApp.controller('teamController', function($scope, $http) {

            $http
                    .get('/teams')
                    .success(function(response) {
                        $scope.teams = response;
                    }
                    );


            var showTeam = function(id) {

            }
        });

        teamApp.config(['$routeProvider', function($routeProvider) {
            $routeProvider.

            when('/addTeam', {
                templateUrl: 'addTeam.htm',
                controller: 'AddTeamController'
            }).

            when('/viewTeam', {
                templateUrl: 'viewTeam.htm',
                controller: 'ViewTeamController'
            }).

            otherwise({
                redirectTo: '/addTeam'
            });
        }]);

        teamApp.controller('AddTeamController', function($scope) {

        });

        teamApp.controller('ViewTeamController', function($scope, $routeParams) {

        });

    </script>
</head>

<body>

<div ng-app = "teamApp" ng-controller="teamController">

    <button ng-click="newTeam()">new</button>

    <div ng-repeat="team in teams" >
        Name: {{team.name}}
        <br />
        Description: {{team.description}}
        <br />
        <button ng-click="showTeam(team.id)">show</button>
    </div>

    <div ng-view></div>

    <script type = "text/ng-template" id = "addTeam.htm">
        <h2> Add Team </h2>
        To be implemented later.
    </script>

    <script type = "text/ng-template" id = "viewTeam.htm">
        Name: {{team.name}}
        Description: {{team.description}}
    </script>
</div>
</body>
</html>

Sunil Lama · Accepted Answer · 2016-02-26 11:27:31Z

1

You need to change your $routeprovider for viewTeam to expect an id parameter. Then get that id in the viewTeamController using routeparams. Here is how you do it. Just follow the pattern in the script below:

<script>
            var teamApp = angular.module("teamApp", ['ngRoute']);

            teamApp.controller('teamController', function($scope, $http,$location) {

                $http
                        .get('/teams')
                        .success(function(response) {
                            $scope.teams = response;
                        }
                        );


                var showTeam = function(id) {
               $location.url("#/viewTeam/" + id);//there are other means as well.
                }
            });

            teamApp.config(['$routeProvider', function($routeProvider) {
                $routeProvider.

                when('/addTeam', {
                    templateUrl: 'addTeam.htm',
                    controller: 'AddTeamController'
                }).

                when('/viewTeam/:id', {
                    templateUrl: 'viewTeam.htm',
                    controller: 'ViewTeamController'
                }).

                otherwise({
                    redirectTo: '/addTeam'
                });
            }]);

            teamApp.controller('AddTeamController', function($scope) {

            });

            teamApp.controller('ViewTeamController', function($scope, $routeParams) {
            alert($routeParams.id);//you get the route params here.
            });
    </script>

When navigating from view:

 <a href="#viewTeam/45">

In your case:

<a href="#viewTeam/{{team.id}}"> //to navigate from view.

edited Feb 26, 2016 at 11:27

answered Feb 26, 2016 at 11:10

Sunil Lama

4,5391 gold badge21 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sandah Aung Over a year ago

Thanks Alex. Your answer led me to the solution.

Sunil Lama Over a year ago

I am glad i could be of help to you :)

Amit Sirohiya · Accepted Answer · 2016-02-26 10:58:49Z

1

In your teamController do this -

var showTeam = function(id) {
    $location.path('/viewTeam.htm').search({'id': id});
}

In ViewTeamController you can get id like this

//Get id from url params
$location.search('id');

answered Feb 26, 2016 at 10:58

Amit Sirohiya

3331 silver badge13 bronze badges

Comments

harishr · Accepted Answer · 2016-02-26 10:56:29Z

0

you can use $location to change the path

    $scope.showTeam = function(view){
        $location.path("/viewTeam"); // path not hash
    }

answered Feb 26, 2016 at 10:56

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Collectives™ on Stack Overflow

Loading URL into ng-view programatically

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related