How to pass data from one page to another in single page application in angular

Question

How can i pass data or value from one page to another in angular single page application . This is my first time to work with angular/typescript and javascript as a whole.

My objective is to pass userid to edit user page. I am using

 "angular": "^1.7.2",
 "angular-route": "^1.7.2",

My current structure is something like this in route.js

app.config(function($routeProvider){
  $routeProvider
  .when('/',{
    templateUrl:'home.html'
  })
  .when('/user',{
    templateUrl:'showUsers.html'
  })
.when('/user-edit/:userId',{
  templateUrl:'editUser.html'
})
})

in showUsers.html

<a href="#!user-edit/92">User Edit screen</a>

Now what i want to do is to capture the userId in jquery script of user edit screen so i can get user data.

How can i do that??

I m following

I also followed some questions over stack overflow

How do I pass data to Angular routed components? But that did not help me.

you are working with angularjs and you are finding solution in angular (2 or 4 or 5) here is the link what you need (https://namitamalik.github.io/routeParams-in-AngularJS/) — Sanoj_V, Jul 05 '18 at 10:17
@Sanoj_V Thank you for the link :)) sorry i didnt know that angularjs and angular are different i thought those two are the same — user7747472, Jul 05 '18 at 10:26

score 2 · Accepted Answer · answered Jul 05 '18 at 10:17

2

Using $routeParams service: $routeParams service allows us to retrieve route parameters.

var module = angular.module("myApp", ['ngRoute']);
module.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/route1/:param1/:param2', {
            templateUrl: 'route1.html',
            controller: 'RoutingController'
        })
        .when('/route2/:param1/:param2', {
            templateUrl: 'route2.html',
            controller: 'RoutingController'
        })
        .otherwise({
            redirectTo: '/route1/default-book/default-page'
        });
}]);
module.controller("RoutingController", function ($scope, $routeParams, $location) {
    // Using $routeParams
    $scope.param1 = $routeParams.param1;
    $scope.param2 = $routeParams.param2;
});

answered Jul 05 '18 at 10:17

Chellappan வ

23,645
3
29
60

Can i catch the parameter in the script inside the editUser.html ?? I saw that if i do `{{param1}}` it print the value in html can i add that value same way in the script as well ?? – user7747472 Jul 05 '18 at 10:28
@user7747472 why do you have a script inside `editUser.html` in the first place? It's a partial / template after all – Aleksey Solovey Jul 05 '18 at 10:30
@AlekseySolovey, actually i m using this in electron.js to build desktop app using jquery and angular for routing . So all my functions are in jquery that is why – user7747472 Jul 05 '18 at 10:32
you can to try get the value using query Selector – Chellappan வ Jul 05 '18 at 10:41

JpG · Answer 2 · 2018-07-05T10:30:15.720

in your router config you have configured like /user-edit/:userId,

then on click of anchor tag your url will be (for example),

http://some-sitename.com#/user-edit/92

So use $routeParams

that is in your edit controller $routeParams.userId will fetch u the required value ie 92 in your case.

in depth u can use it like this,

app.controller("EditController", function ($scope, $routeParams) {
    // Using $routeParams
    $scope.userId = $routeParams.userId;

     $scope.editMethod = function() {
         // inside this method use $scope.userId
      };

});

How to pass data from one page to another in single page application in angular

2 Answers2