Organizational Research By

Surprising Reserch Topic

how to pass data one page to another page using angular js


how to pass data one page to another page using angular js  using -'javascript,angularjs,asp.net-web-api,angularjs-ng-repeat'

Here I am Trying to Login with user credientials
if user is valid , I want to pass UserName,LastloginTime,Role values to another page using angular js

<form role="form" ng-app="MyApp" ng-controller="MasterController">
        <div class="form-group">
            <label>
                Username</label>

            <input type="text" class="form-control" placeholder="Username" required ng-model="username" />
        </div>
        <div class="form-group">
            <label>
                Password</label>
            <input type="password" class="form-control" placeholder="Password" required ng-model="password" />
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" ng-model="remember">
                Remember my Password
            </label>
        </div>
        <input type="button" value="Submit" ng-click="GetData()" class="btn btn-danger" />
        <%--<button type="button" class="btn btn-danger" ng-click="GetData()">Submit</button>--%>
        <span ng-bind="Message"></span>
    </form>


js file here

   $scope.GetData = function () {
        debugger;
        var data = { UserName: $scope.username, Password: $scope.password };
        $http.post("api/Test/CheckUsername", data)
       .success(function (data, status, headers, config) {
           if (data != "") {
               $scope.Employees = data;
               window.location.href = "EmployeeMaster";
               //$scope.Reporting = data;
           }
           else {
               alert("Invalid Credientials");
           }

       });
    }


I want to display values in a master page

                        <table class="table">
                            <tr ng-repeat="Emp in Employees">
                                <th>User </th>
                                <td>:</td>
                                <td>{{Emp.username}}</td>
                            </tr>
                            <tr>
                                <th>Designation </th>
                                <td>:</td>
                                <td>{{Emp.RoleName}}</td>
                            </tr>
                            <tr>
                                <th>Last Login </th>
                                <td>:</td>
                                <td>{{Emp.LastLogin}}</td>
                            </tr>
                        </table>


How can i pass the values login page to Home page?
    

asked Oct 6, 2015 by nikhilapatil
0 votes
9 views



Related Hot Questions

5 Answers

0 votes

Check out angular-storage A Storage done right for AngularJS. It is great for storing user info/tokens/ any object.

Key Features

Uses localStorage or sessionStorage by default but if it's not available, it uses ngCookies. Lets you save JS Objects If you save a Number, you get a Number, not a String Uses a caching system so that if you already have a value, it won't get it from the store again.

https://github.com/auth0/angular-storage

answered Oct 6, 2015 by dahiyabecomp
0 votes

I suggest creating a service to store your global data:

myApp.factory('DataService', function() {
    var user = {
        name: '',
        role: ''
        // and so on
    };

    return {
        user: user
    };
});

Just inject this to all your controllers and set and retrieve the data you need:

myApp.controller('MyCtrl', function($scope, DataService) {
    // make your DataService available in your scope
    $scope.DataService = DataService;
});

This lets you bind models globally to the DataService.

answered Oct 6, 2015 by param.oncemore
0 votes

There is lot of ways of to achieve this

1) Use $rootscope like you use $scope like

$rootscope.userName = "" 

Inject the $rootscope dependency in the controller where you want to show it and create an object name Employee and fill it with $rootscope.

2) use constant like

module.constant("userData", data);

Inject the userData dependency in the controller where you want to show it and create an object name Employee and fill it with userData.

3) You can use service/factory and save the data in localstorage/sessionstorage

answered Oct 6, 2015 by sumit_jaiswalmca
0 votes

to transfer data between pages, you can use stateParams: in the routes file:

 $stateProvider
  .state('employeeMasterState', {
    url: '/employeeMasterUrl/:employeeData',
    templateUrl: 'info/employeeMaster.tpl.html',
    controller: 'employeeMasterCtrl',
    controllerAs: 'employeeMasterCtrlAs'
  });

js:

$scope.GetData = function () {
    debugger;
    var data = { UserName: $scope.username, Password: $scope.password };
    $http.post("api/Test/CheckUsername", data)
   .success(function (data, status, headers, config) {
       if (data != "") {
           this.state.go('employeeMasterState',{employeeData:data}); 

       }
       else {
           alert("Invalid Credientials");
       }

   });
}

in the next page js:

constructor($scope, $statePArams){
  $scope.empData = $stateParams.data;
}
answered Oct 6, 2015 by badhwar.rohit
0 votes

have you tried this? this is simple approach for login and registration

http://jasonwatmore.com/post/2015/03/10/AngularJS-User-Registration-and-Login-Example.aspx

answered Oct 6, 2015 by sumit_jaiswalmca

...