I'm trying to include google maps in my side-project and i can't seem to know why this doesn't work after watching countless tutorials. One way I was able to do a work around was to include the src script in right below the init function on the html and then on the controller file write the initMap() function outside the
angular.module('breazehomeDesktop').controller(). Can someone please help?
this is my html
!doctype html>
<html>
<head>
<!-- Tab Title -->
<title>Local Scoop</title>
<!-- Javascript Import-->
<script src="../scripts/controllers/localscoop.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_GOES HERE"></script>
</head>
<body ng-app="breazehomeDesktop" ng-controller="LocalScoopCtrl">
<!-- MAP -->
<div id="map" ng-init="initMap()">
<script>initMap()</script>
</div>
</body>
</html>
and this is my controller
angular.module('breazehomeDesktop').controller('LocalScoopCtrl', function($scope, $rootScope, $location, $localStorage, $routeParams, $anchorScroll, $http, Properties, Amenities, Bilingual,toasts,Users,Crime, Map, BASE_URL, IMAGE_URL, ModalService, History) {
$scope.initMap = function (){
var map = new google.maps.Map(document.getElementById('map'),{
zoom:8,
center: {
latitude:25.7617,
longitude:-80.191790
}
}
)};
});
I do not see anywhere you've mentioned ng-controller and use ng-init to call the method
<body ng-app="breazehomeDesktop" ng-controller="LocalScoopCtrl">
<div id="map" ng-init="initMap()" >
</div>
Related
I am trying to call one angular js function using controller. I am using code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DevPortal</title>
<script src="js/angular.min.js"></script>
<script src="js/controllers/app.js"></script>
</head>
<body ng-app="devportal">
<div ng-include="'templates/login_menu.html'"></div>
</body>
</html>
app.js
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
return{
getuserloginmenu : function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})},
getuserloginmenu1 : function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})}
};
});
login_menu.html
<div ng-controller="AppController as ctrl">
<div on-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
My rest service is working properly and returns String array. I am not able to call/get the rest service data in html.
Your code seems legit, the only thing making noise (at least for me) is the on-init you added to call the function. I think that's the problem.
Try
<div ng-controller="AppController as ctrl">
<div ng-init="ctrl.getuserloginmenu()">
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
And maybe.. To keep it clean: Change the syntax of the controller (even if it works)
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
});
Edit:
That's a missuse of ng-init. I'll leave the documentation of Angular for that matter
https://www.w3schools.com/angular/ng_ng-init.asp
But shortly, you want $scope.loginmenu to populate. You don't need to wait until the div loads. You can populate $scope.loginmenu right away when the controller inits.
View
<div ng-controller="AppController as ctrl">
<div>
<p ng-repeat="menu in loginmenu">{{menu}}</p>
</div>
</div>
Controller
var app = angular.module('devportal', []);
app.controller('AppController', function($scope, $http) {
$scope.getuserloginmenu = function(){$http.get('/getuserloginmenu').then(function(response){$scope.loginmenu=response.data;})};
$scope.getuserloginmenu1 = function(){$http.get('/getuserloginmenu1').then(function(response){$scope.loginmenu1=response.data;})};
$scope.getuserloginmenu();
});
I have a problem. In my html file I have a following content:
<div ng-controller='nav'>
<ul >
<li ng-show="sh" >
<a ui-sref="problems">name</a>
</li>
</div>
My controller is:
app.controller('nav', function($scope, $state, $http){
$(function(){
$scope.sh=true;
//$http.get('something');
});
});
If
$http.get('something')
is commented, ng-show does not work. However, if I uncomment it, it starts to work. I cannot understand the reason of this. Did you have a similar problem?
Try this below code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller='nav'>
<ul>
<li ng-show="sh">
<a ui-sref="problems">name</a>
</li>
</ul>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('nav', function ($scope, $state, $http) {
$scope.sh = true;
$http.get('something')
});
</script>
</body>
</html>
I dont know why you included the jquery part. It is always good to not to use jquery in AngularJS projects. You will get almost all things in AngularJS one way or the another.
There is no need for jquery function there you can directly use $scope.sh=true;
I suspect it is an incorrectly written expression or the way the controller is fetching data from the service. By the way, the controller has been tested and it works just fine.
Please help.
Here is my view
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<!-- Installing the ngRoute module -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
</head>
<body ng-app="SuggestionBox">
<div class="suggestion" ng-controller="HomeController">
<div class="container" ng-repeat="post in posts">
<h2 class="title">{{ post.title }}</h2>
</div>
</div>
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script src="js/services/suggestions.js"></script>
</body>
</html>
Here is the service where I am fetching the data from
app.factory('suggestions', [function() {
var demoSuggestions = {
posts: [
{
title: "bla bla bla",
},
{
title: "blo blo blo",
}
]
};
return demoSuggestions;
}]);
This is the controller
app.controller('HomeController', ['$scope', 'suggestions', function($scope, suggestions) {
$scope.posts = suggestions.demoSuggestions;
}]);
In service you should assign posts which has been return in suggestions factory object.
Controller
app.controller('HomeController', ['$scope', 'suggestions',
function($scope, suggestions) {
$scope.posts = suggestions.posts;
}
]);
Demo here
Update
You app.js should define module like below
var app = angular.module('SuggestionBox',[])
Edit
I made last plunkr to demonstrate the issue which were faced by OP. So ideally you should follow angular styleguide made by John Papa
Here you need to wrap each component code to IIFE pattern like
(function(){
//code here
})()
And do define angular module once and used them afterwards, avoid creating global variables.
I've started moving my angularJS controllers into separate files for the sake of readability, however I found this causes the controller defined in a separate file to not run at all. However, I'm wondering if this has to do with my MakeGray.html being in a separate folder from MakeGray.js?
http://imgur.com/2XWf8Ge
When the drop down menu item selected is MakeGray it will inject the following html
<html ng-app="app">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/opencv_css.css" />
</head>
<body ng-controller="MakeGray">
<div class="row">
<div class ="col-md-4 col-md-offset-5">
<!--<button type="button" class="btn btn-primary" ng-model-->
<button ng-click="MakeGray_Button()">Make Gray</button>
</div>
</div>
<script src="../../js/jQuery.js"></script>
<script src="../../js/angular.js"></script>
<script src="../../js/ui-bootstrap-tpls-0.14.3.min.js"></script>
<script src="../../js/MakeGray.js"></script>
<script src="../../js/app.js"></script>
</body>
</html>
js app
var app = angular.module("app", [
"MakeGray",
"ui.bootstrap"
]);
js MakeGray
var MakeGray = angular.module("MakeGray", ["ui.bootstrap"]);
MakeGray.controller("MakeGray",["$scope", "$http", function($scope, $http){
alert("HELLO"); // Doesn't even get to hello when I click on the MakeGray button
}]);
My firebug outputs no errors
I'm not sure what you mean by the title, you're only trying to access one controller on this page. Anyway the functionality you're trying to get works.. heres a plnkr. I will note that you have to wrap the alert in a $scope function to make it fire with the button.
var MakeGray = angular.module("MakeGray", ["ui.bootstrap"]);
MakeGray.controller("MakeGray",["$scope", "$http", function($scope, $http){
$scope.MakeGray_Button = function(){
alert("HELLO"); // Does get to hello when I click on the MakeGray button
}
}]);
I have a standard angular page that is not associated with any ui.router functionality(index.html). From that page I click a link that triggers an angular call and than after some operation the flow needs to be redirected to a page inside a folder that is using angular-ui.route template.
I have created a plunker that represents this:
http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview (current plunker is working but there's a loop on first page trying to call default state created with $urlRouterProvider.otherwise('events');)
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular.js"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="LoginController as lgCtrl">
<h1>This page does not use ui.router</h1>
Login
</body>
</html>
The page with ui-view tag is inside a manage folder:
manage/home.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/1.3.16/angular.js" data-semver="1.3.16" data-require="angular.js#1.3.16"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
<script type="text/javascript" src="../app.js"></script>
</head>
<body ng-controller="EventsController as evtCtlr">
<h1>Hello manage/home.html</h1>
<div ui-view></div>
</body>
</html>
The templateUrl page to be inserted is:
manage/events.html
<div ng-controller="EventsController as evtCtrl">
<h3>Events Page</h3>
<div>Some user email</div>
</div>
app.js
'use strict';
(function () {
var app = angular.module('app', ['ui.router']);
/**
* Configuration for ui-router module. Handles navigation based on app states.
*/
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('events');
$stateProvider
.state('events', {
url: '/events',
views:{
'#manage/home':{
templateUrl: 'manage/events.html'
}
}
});
});
app.controller('LoginController', ['$scope','$window', '$state',
function($scope, $window, $state){
$scope.goToEvents = function(){
console.log('trying to load events');
//this call doesn't work, 404 - It should?? -->> see reference
//https://github.com/angular-ui/ui-router/wiki/URL-Routing
$window.location.href = 'manage/home.html/events';
//don't work
//$state.transitionTo('events');
//also don't work
//$state.go('events');
};
}]);
app.controller('EventsController', [function(){
console.log('EventsController');
}]);
})();
I have created a plunker that represents this:
http://plnkr.co/edit/7UQTlMRQBMXGaRdHlPfs?p=preview
I have tried different ways of moving from the first non ui.router page but none worked so far.
What's the best way of doing this?
Firstly , do not inject $state as dependency in the LoginController as the view related to this controller isn't an UI route. Adding the $state dependency causes the loop that you are seeing in your example as UI-Router then considers this view a route. As no state matches this route , it tries to load the default state , whose template has a relative URL , which then looks it up inside wrong directory of Plunkr , which causes 404 error.
Secondly , the URL to redirect should via location.href should have a hash otherwise it will also give 404
The code for the LoginController
app.controller('LoginController', ['$scope', '$window',
function($scope, $window) {
$scope.goToEvents = function() {
//Do Something
$window.location.href = 'manage/home.html#/events';
};
}
]);
Check the working example at http://plnkr.co/edit/K2iBYu?p=preview