AngularJS - Save data to $scope using routes?

Question

i am just learning basics of angular and today it started to change my app using a factory to get data and implementing route provider ! So far everything works fine! But when I try to add data on another view and head back to my list view scope is reloaded again from factory and no added data shows up.

My approach won't work because each time change my view I will call my controller which reloads data from factory! What can I do to make my Add template will work and changes data everywhere else too.

Maybe somebody can give me a tip how to cope with this problem ?

script.js

var app = angular.module('printTrips', ['ngRoute']);

app.factory('tripFactory', function($http) {
 return{
    getTrips : function() {
        return $http({
            url: 'trips.json',
            method: 'GET'
            })
        }
    }

});

app.controller('TripController', function($scope, $filter, tripFactory) {
    $scope.trips = [];

    tripFactory.getTrips().success(function(data){
    $scope.trips=data;

    var orderBy = $filter('orderBy');

    $scope.order = function(predicate, reverse) {
        $scope.trips = orderBy($scope.trips, predicate, reverse)};

    $scope.addTrip = function(){
        $scope.trips.push({'Startdate':$scope.newdate, DAYS: [{"DATE":$scope.newdate,"IATA":$scope.newiata,"DUTY":$scope.newduty}]})
        $scope.order('Startdate',false)
        $scope.newdate = ''
        $scope.newiata = ''
        $scope.newduty = ''
        }

   $scope.deleteTrip = function(index){   
        $scope.trips.splice(index, 1);
        }

    });
});

view.js

app.config(function ($routeProvider){
  $routeProvider
    .when('/',
          {
              controller: 'TripController',
              templateUrl: 'view1.html'
          })
    .when('/view1',
          {
              controller: 'TripController',
              templateUrl: 'view1.html'
          })
    .when('/view2',
          {
              controller: 'TripController',
              templateUrl: 'view2.html'
          })
    .when('/addtrip',
          {
              controller: 'TripController',
              templateUrl: 'add_trip.html'
          })
    .otherwise({ redirectTo: 'View1.html'});
});

Here is my plunker

Thanks for your help

score 0 · Answer 1 · answered Mar 03 '15 at 16:37

0

You should use Service instead of Factory. Services are loaded each time they are called. Factory are just loaded once.

app.service('tripFactory', function($http) {
return{
    getTrips : function() {
        return $http({
                url: 'trips.json',
                method: 'GET'
            })
        }
    }
});

answered Mar 03 '15 at 16:37

prbaron

867
8
19

I just changed the code ! But I think I have to update my controller too - because if delete trips and go to add he will show me same data as before ??! – phil-k Mar 03 '15 at 16:45

AngularJS - Save data to $scope using routes?

1 Answers1