Thomas Thomas - 2 months ago 7
Javascript Question

View and controller both not being loaded to index.html

I had my angular app loading my javascript properly before but it was not set up properly for routing. I am trying to fix that but now my javascript alert will not even pop up which means the file is not connected. Can someone tell me why the partial searchRadius.html is not being loaded into index.html? Am I properly rendering the view near the bottom of index.html with:

<div ui-view></div>
?

index.html:

<!DOCTYPE html>
<html ng-app="app">

<head>
<link rel="stylesheet" href="example/assets/stylesheets/example.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="website_libs/dev_deps.js"></script>
<script src="https://code.angularjs.org/1.3.6/angular.js"></script>
<script src="dist/angular-ui-router.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>
<script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="dist/angular-google-maps_dev_mapped.js"></script>
<script src="getLoc.js"></script>
<script src="searchRadius.js"></script>

<script src='//maps.googleapis.com/maps/api/js?key=AIzaSyD_g7xCYEi-U54SYfTXQ_lukRsChkWgjXQ'></script>

<title>Pet Locate</title>

<!--NEW STUFF FROM TOM-->


</head>

<body style="height: 100%">
<h1 style="text-align: center">Pet Locate</h1>
<div ui-view></div>
</body>

</html>


searchRadius.js:

(function (window, ng) {
ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])



.config(function ($stateProvider) { //had: , $stateChangeError included in the function parameters, but that caused error
$stateProvider.state('location', {
url: '/:lat/:lon',
templateUrl: 'searchRadius.html', //changed from index to searchRadius.html
controller: 'MapsCtrl',

resolve: {
resolveMap: function (MapService, $stateParams) {
return MapService.getData($stateParams.lat, $stateParams.lon).then(function(rsp){ console.log(rsp); return rsp; }).catch(function(err){console.log(err);})
}
}
});

})

.config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
GoogleMapApi.configure({
key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g',
v: '3',
libraries: 'weather,geometry,visualization'
});
} ])


.controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams", 'resolveMap',
function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) {
$log.currentLevel = $log.LEVELS.debug;
var center = { latitude: parseFloat($stateParams.lat), longitude: parseFloat($stateParams.lon) };
alert(JSON.stringify(center));
//Object.freeze(center); caused TypeError: Cannot assign to read only property ('latitude') ...

console.log($stateParams);

$scope.map = {
center: center,
pan: false,
zoom: 16,
refresh: false,
events: {},
bounds: {}
};

$scope.map.circle = {
id: 1,
center: center,
radius: 500, //(current time - date lost)*km/hour
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},

fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: false, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: true, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
events: {
dblclick: function () {
$log.debug("circle dblclick");
},
radius_changed: function (gObject) {
var radius = gObject.getRadius();
$log.debug("circle radius radius_changed " + radius);
}
}
}





//Increase Radius:
$interval(function () {
$scope.map.circle.radius += 30; //dynamic var
$state.transitionTo('location', { //location is the state name
center: $stateParams.center,
radius: $scope.map.circle.radius
},
{
notify: false
});
}, 1000); //end of interval function


} ]); //end of controller

})(window, angular);


searchRadius.html:

<div style="height: 100%"> <!--took out: ng-if="map.center !== undefined"-->
<ui-gmap-google-map
center='map.center'
zoom='map.zoom'
draggable='map.draggable'
dragging='map.dragging'
refresh='map.refresh'
options='map.options'
events='map.events'
pan='map.pan'>


<ui-gmap-circle
center='map.circle.center'
radius='map.circle.radius'
fill='map.circle.fill'
stroke='map.circle.stroke'
clickable='map.circle.clickable'
draggable='map.circle.draggable'
editable='map.circle.editable'
visible='map.circle.visible'
events='map.circle.events'>

</ui-gmap-circle>


</ui-gmap-google-map>

</div>

Answer

I think there is some issue with below code in your route config.

resolve: {
    resolveMap: function (MapService, $stateParams) {
        return MapService.getData($stateParams.lat, $stateParams.lon).then(function (rsp){console.log(rsp); return rsp; }).catch(function (err){console.log(err);}) 
     }
}

can you remove this and load the page again ? Also are you getting any errors in developer tools console while loading ?