ngRoute keeps refreshing the page. Please help

[greenuns]

Hello,

I'm a newbie in AngularJS ( and Front-end) and having a lot fun with it. Or had a lot of fun with it until this.

I'm trying to make a form app where only a single input is shown per page.

Basically each stage of filling out the form is separated into single HTML pages.

And each HTML page has it's own controller.

Each page gets data from the <input> field and sends it to the Factory.

At the last stage all the data that has been accumulating in the Factory gets shown.

The reason for separating each page was to add animation when a new page loads. (I couldn't find out any other way)

Anyways I was not able to show the data from the Factory at the last page. 

Only to find out that when I jump to the next page the browser refreshes therefore the Factory data is constantly "undefined".

In my HTML I have a div with ng-view attached to it. Then in my JS file I have the following ngRoute.

myApp.config(function($routeProvider) {
   $routeProvider
         .when('/', {
            templateUrl: 'enterCardNumber.html',
            controller: 'IndexController'
         })
         .when('/validateUser', {
            templateUrl: 'enterCardNumber.html',
            controller: 'MobileNumberController'
         })
         .when('/validateSMS', {
            templateUrl: 'enterCardNumber.html',
            controller: 'ValidateMobile'
         })
         .when('/sendMoney', {
            templateUrl: 'sendMoney.html',
            controller: 'SendMoneyController'
         })
         .when('/sendMoney-confirm', {
            templateUrl: 'sendMoney-confirm.html',
            controller: 'SendMoneyConfirm'
         })
         .otherwise({
            redirectTo: '/'
         })
});

my problem is every time I go to a different view the page refreshes therefore I'm unable to access the factory service. The data being sent from Factory gets reset.

At first no matter what I do I was unable to get or set any data to my Factory. I read through god knows how many stackoverflow Q&As.

Eventually tried to redo my project and then I realized my browser refreshes when jumping from one view to the next.

Now I remade this project without any styles and the new one seems to work fine. No refreshes.

Below is the remade ngRoute:

myApp.config(function($routeProvider){
   $routeProvider.
         when('/', {
            templateUrl: 'page1.html',
            controller: 'firstController'
         })
         .when('/page2', {
            templateUrl: 'page2.html',
            controller: 'secondController'
         })
         .when('/page3', {
            templateUrl: 'page3.html',
            controller: 'thirdController'
         })
         .when('/page4', {
            templateUrl: 'page4.html',
            controller: 'forthController'
         })
         .when('/page5', {
            templateUrl: 'page5.html',
            controller: 'fifthController'
         })
});

So I'm wondering if anyone else has had this problem? Is there a way to fix it? Is it HTML, CSS, or AngularJS?

Could it be "compass" (scss preprocessor)?

Could it be ruby? (config.rb) file?

Could it be scss?

Why would one project refresh when jumping from one view to the next and the other project doesnt?

Please help.

[Daniel Johnson]

> my problem is every time I go to a different view the page refreshes
> therefore I'm unable to access the factory service. The data being sent from
> Factory gets reset.

ng-view runs the controller initialization every time the url changes
so if there is any code like $scope.something = { } you will get a
completely new object. Factories usually return a new object, but a
service returns the same object. Unfortunately the the documentation
web page for angular services has had the distinction between
provider, factory, and service removed for reasons I can't comprehend,
and doesn't even include an example of using a service. They are all
based on the same code, but the differences are important.

If you use a service that just returns an object to store stuff and
call it in each of your controllers I think that will work.

function formStorageFunc() {
return {};
}
angular.service('formStorage', formStorageFunc);

// in directive
$scope.formData = formStorage();

> Why would one project refresh when jumping from one view to the next and the
> other project doesnt?

I'm not sure how you managed to make it not rerender. I never found a way.

I wrote my own version of ng-view to prevent rerendering, but haven't
made it general purpose enough to open source it yet. I believe the
angular-ui view also rerenders.

--
teknotus (Take Notice)

[Daniel Johnson]

> function formStorageFunc() {
> return {};
> }
> angular.service('formStorage', formStorageFunc);
>
> // in directive
> $scope.formData = formStorage();

Forgot to past reference URL
http://stackoverflow.com/questions/14324451/angular-service-vs-angular-factory

--
teknotus (Take Notice)

[Greg Jang]

thank you for the help!

I'll check into service()

fingers crossed

--
teknotus (Take Notice)

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/X05M1QWptAk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--
Sent from my desktop!

[Greg Jang]

I think I figured out why the page kept refreshing and I it was because I had an "action" on the html form.

<form action="{{destination}}">

   ....

</form>

so when I press the button to take me to the next view the damn page kept reloading and resetting all my factory variables.

Can't believe this problem was all because of HTML and nothing to do with angularJS.

best,

greg