angularJS template url is not loading automatically

Question

It's loading when I type a char in input type="search".
Page is calling 'ajax call' twice. request is fire twice on 'single click' or 'onPageload'

index.Html

This is my html file which has a search box

<div>
    <div class="input-group">
        <input type="search" class="form-control search" ng-model="searchtag" tabindex="1">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit" ng-click="search()"></button>
        </div>
        <ng-view></ng-view>
    </div>

This search box is not attached than why is this so silly thing happening??

template url is loading in this ng-view

index.js file:

Here I have defined a configuration of routing for template url.

angular.module("myApp", ['ngRoute'])
    .config(["$routeProvider", function($routeProvider) {
        $routeProvider.
            when("/", { templateUrl: "pic.html" }).
            when("/Search", { templateUrl: "pic.html" }).
            when("/VipList", { templateUrl: "cust.html" }).
            otherwise({ redirectTo: "/", templateUrl: "pic.html" });
    }]
    )

Here I have created a service which call send the ajax call to server and returns back a json object. Calling ajax call twice on each request and returning two 'Json' data object.

.factory('Search', [function($http, $scope) {
    return {
        fetchPopular: function($scope, callback) {

            $.ajax({
                type: "POST",
                url: 'Search',
                data: {search : $scope.globeSearch},
                dataType: 'json'
            }).
                success(function(data, status, headers, config) {
                    console.log(data);
                    if(data.data.length<=0){
                        alert("No data found");
                    }
                    callback(data.data);
                })
                .error(function(data, status, headers, config) {
                });
        }
    };
}
])

.controller("fetch", function($scope, $interval, $location, Search) {

    $scope.globeSearch="Sachin";

    $scope.pics = [];
    $scope.have = [];
    $scope.orderBy = "-comments.count";
    $scope.getMore = function(callback) {
        Search.fetchPopular($scope, function(data) {

            for(var i=0; i<data.length; i++) {
                if (typeof $scope.have[data[i].id]==="undefined") {
                    $scope.pics.push(data[i]) ;
                    $scope.have[data[i].id] = "1";
                }
            }
            $location.path("/Search");
        });
    };


    $scope.getMore();

    $scope.searchPopular = function(callback) {

        if($scope.searchStr!=null && $scope.searchStr!=""){ $scope.globeSearch=$scope.searchStr; }

        $scope.pics = [];
        $scope.have = [];
        $scope.orderBy = "-comments.count";
        Search.fetchPopular($scope, function(data) {
            for(var i=0; i<data.length; i++) {
                if (typeof $scope.have[data[i].id]==="undefined") {
                    $scope.pics.push(data[i]) ;
                    $scope.have[data[i].id] = "1";
                }
            }
            $location.path("/Search");
        });
    };

Its resolved now. need to add '$location.apply()' after setting location path. — GeekAbhiGeek
– GeekAbhiGeek, Commented Apr 28, 2014 at 10:07
Whoa. I'm not so sure. $location.apply() implies that you're having to kick off the digest cycle again. It might work, but that means that your Angular application isn't behaving correctly. You may be opening yourself up to a larger bug later on. — Vishal Kotcherlakota
– Vishal Kotcherlakota, Commented Apr 29, 2014 at 0:25

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

I'm having a hard time understanding what you're doing here, but I can see at least a few problems.

I'm not seeing code for a controller, nor am I seeing any templates. In order for your routing to work, the application's route needs to change (ideally inside your app's controllers). For example, if inside a controller you called $location.path('/Search'), angular would load the associated template and invoke the controller.

If you wouldn't mind putting a live demo up on Plunker or JSFiddle, I'm sure you could get some more meaningful help.

EDIT

I see your biggest problems off the bat. Let's look again at your routing configuration.

angular.module("myApp", ['ngRoute'])
    .config(["$routeProvider", function($routeProvider) {
        $routeProvider.
            when("/", { templateUrl: "pic.html" }).
            when("/Search", { templateUrl: "pic.html" }).
            when("/VipList", { templateUrl: "cust.html" }).
            otherwise({ redirectTo: "/", templateUrl: "pic.html" });
    }]
    )

You're not specifying any controllers within your routes. in order for the search code to get executed, you need to invoke your Search factory within a child controller. Also, Your first route is redundant with your otherwise() call.

This Plunker taken from the AngularJS documentation should help you out.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 24, 2014 at 17:14

Vishal Kotcherlakota

1,1645 gold badges16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GeekAbhiGeek Over a year ago

Vishal I have not posted code of controller n templates here. Though I have written code for both. I give %location.path('Search') inside the function call in controllers.

Vishal Kotcherlakota Over a year ago

I'll say it again. If you don't share more of your code, or at least a similar example, I don't think you'll get much help. :-) You need to give people stuff to work with.

GeekAbhiGeek Over a year ago

I have added more data here please see and help. Im stuck here... Thank you!!! :)

Collectives™ on Stack Overflow

angularJS template url is not loading automatically

1 Answer 1

EDIT

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related