0

I am developing an AngularJS application. I am new to AngularJS. I am using AngularJS route to develop single page application. Below is how I configure my route.

app.config(function($routeProvider){
    $routeProvider
    .when('/',{ templateUrl : "admin/template" })
    .when('/account',{ templateUrl : "admin/account/edit" })
});

I tested with simple pages my route configuration is working or not. Simple pages mean I just added one html header for each page like below.

<h1>Page 1</h1>
<h1>Page 2</h1>

Then I tested route click on the links. All working fine. When I re-clicked the visited link, page displayed correctly. Then I started to develop page 1 with some data and logic like implementing pagination feature. All working fine.

But there is a problem. When I click page 2 link from page 1, it is redirected to page 2. But when I click page 1 again, it is not working. It is not showing anything. But when I refresh browser, it shows. Then problem is with revisiting.

This is my app.js

var app = angular.module('memeApp',['ngRoute','ui.bootstrap','blockUI','ngFileUpload'],function($interpolateProvider) {
        $interpolateProvider.startSymbol('<%');
        $interpolateProvider.endSymbol('%>');
    });

I changed the open and close tag for AngularJS because I am using Laravel framework. Laravel uses Blade template engine.

This is my page 1 html

<div class="row" ng-controller="DefaultController" ng-init="getTemplatesUrl='{{ url('admin/templates') }}';init();">

<div class="col-md-12">
    <div class="row">
        <div class="col-md-12">
            <form name="createTemplateForm">
            <fieldset>
            <legend>Create new template</legend>
            <div>
                <label>Priortized </label>
                <input type="checkbox" ng-model="prioritized">
            </div>
            <input type="file" ngf-select ng-model="picFile" name="file"    
             accept="image/*" ngf-max-size="2MB" required
             ngf-model-invalid="errorFile">
            <i ng-show="createTemplateForm.file.$error.required">*required</i><br>
            <i ng-show="createTemplateForm.file.$error.maxSize">File too large 
              <span ng-bind="errorFile.size / 1000000|number:1"></span>MB: max 2M</i>
            <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb">
            <br>
            <button ng-disabled="!createTemplateForm.$valid" 
              ng-click="uploadPic(picFile,'{{ url('admin/template/create') }}')">Submit</button>
            <span ng-show="createResult">Upload Successful</span>
            </fieldset>
            <br>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div ng-repeat="x in templates" class="col-md-2">
                    <div>
                        <img style="width:100px;" src="<% x.image_path %>">
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-12">
            <ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul>
        </div>
    </div>
</div>

</div>

js code for controller

app.controller('DefaultController', ['$scope', 'Upload', '$timeout', '$http', function ($scope, Upload, $timeout , $http) {
  $scope.init = function()
  {
    $scope.getTemplates(1);
  }
  $scope.templates = new Array();
  $scope.totalItems = 0;
  $scope.currentPage = 0;

  $scope.createResult = false;

  $scope.uploadPic = function(file,uploadUrl) {
    file.upload = Upload.upload({
        url: uploadUrl,
        data: { prioritized : $scope.prioritized , file: file},
    });

    file.upload.then(function (response) {
            $timeout(function () {
            $scope.createResult = response.data.status;
            if(response.data.status)
            {
              $scope.clearForm();
              $scope.getTemplates(1);
            }
            else{
              $scope.createResult = false;
            }
        });
    }, function (response) {
            if (response.status > 0)
        $scope.errorMsg = response.status + ': ' + response.data;
    }, function (evt) {
        // Math.min is to fix IE which reports 200% sometimes
        //file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
    });
  }

  $scope.clearForm = function()
  {
    $scope.picFile = null;
    $scope.prioritized = false;
  }

  $scope.pageChanged = function()
  {
    $scope.getTemplates($scope.currentPage);
  }

  $scope.getTemplates = function(page)
  {
    $http.get($scope.getTemplatesUrl+"?page="+page).then(function(response){
      var list_data = response.data.list_data;

      $scope.templates = list_data.data;
      $scope.totalItems = list_data.total;
      $scope.currentPage = page;
    });
  }
}]);

The problem is as follow.

Step 1

enter image description here

Step 2

enter image description here

Step 3

enter image description here

Why it is not working when I revisited to page 1 (home).

2
  • Did you check your navigator's console ? Is there an error showing ? Commented Oct 1, 2016 at 12:24
  • Yes I did. No eror showing. Commented Oct 1, 2016 at 12:31

2 Answers 2

2

I have just jsfidlled your code : http://jsfiddle.net/mtV62/871/

For me, your are missing a slash in your page URL just like this:

<a href="#/">Home</a>
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you soooo much for your support. I solved my problem.
0

Or you can config your module to use html5mode. You won't need the "#" at the beginning of your route in elements like anchors

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.