I am fairly new to Angular, and I am trying to use this to integrate google maps: https://github.com/allenhwkim/angularjs-google-maps
The problem I am having is when I try to get the maps instance using NgMap.getMap() When I console.log NgMap.getMap I am getting "could not find map". This is how my code looks:
partials/home.html:
<h1>practice locater</h1>
<ng-map id="map" center="[40.74, -74.18]"></ng-map>
Javascript:
var app = angular.module('RIThym',['ngResource','ngRoute','ngMap']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
app.controller('HomeCtrl',['$scope','$resource', 'NgMap',
function($scope, $resource, NgMap){
var Locations = $resource('/api/locations');
Locations.query(function(locations){
$scope.locations = locations;
});
var map = NgMap.getMap();
console.log(map);
NgMap.getMap().then(function(map){
console.log(map);
});
}]);
When the ng-map directive has an id attribute, the getMap function must use that id value as its first argument.
HTML
<h1>practice locater</h1>
<ng-map id="map" center="[40.74, -74.18]"></ng-map>
JS
//DO this
NgMap.getMap("map").then(function(map){
//NOT this
//NgMap.getMap().then(function(map){
console.log(map);
});
For more information, see NgMap Provider API Reference
Related
I am trying to build a link using routeParams of the route angularJs class. which works pretty well but for some reason it doesn't interpolate my strings.
I have tried the following:
{{username}} as in the controller i set $scope.username = $routeParams.username;
{{ Repo.username }} as the controller is called RepoController.
however both had no result except printing it as a string literal on the screen.my code is as below
App.js
(function() {
var app = angular.module("githubViewer", ["ngRoute"])
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.when("/user/:username", {
templateUrl: "user.html",
controller: "UserController"
})
.when("/repo/:username/:reponame", {
templateUrl: "repo.html",
controller: "RepoController"
})
.otherwise({
redirectTo: "/main"
})
});
}());
RepoController.js
(function() {
var app = angular.module("githubViewer")
var RepoController = function($scope, github, $routeParams) {
$scope.username = $routeParams.username;
$scope.reponame = $routeParams.reponame;
app.controller("RepoController", ["$scope", "github", "$routeParams", RepoController]);
}());
Repo.html
<section>
{{ username }}
<br />
{{ repo.name }}
</section>
There is a plunker available:
https://plnkr.co/edit/oGJJOUfCqW8G7OAXxXGa?p=preview
thanks a lot for any help. Cheers!
There are a couple of syntactic and semantic issues in the Plunkr that may be affecting your actual code.
You have a syntax error in the RepoController.js -- you do not close the RepoController function declaration with }
You are not including <script src=RepoController.js> in index.html
$scope.repo is not an object with a name property. In your template, use reponame instead or you could do $scope.repo = {name: $routeParams.reponame}
There are 2 views with respective controllers.
The links are in View1.Clicking on this link should load View2 and also read the parameters.
This is what I have tried but the alert says - undefined.
View2 can load with/without params - each case having a different workflow.
View1.html:
<div ng-controller="view1ctrl">
<a href="#/view2/pqid/775/cid/4" >Link1</a>
</div>
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'App/views/view1.html',
controller: 'view1ctrl'
})
.when('/view2', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.when('/view2/:pqid/:cid', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.otherwise({
redirectTo: '/view1'
});
}]);
view2ctrl.js:
app.controller("view2ctrl", ['$scope','$routeParams',function ($scope, $routeParams) {
var init = function () {
alert($routeParams.pqid);
}
init();
}]);
You are nearly there:
.when('/view2/:pqid/:cid'
maps to a URL in this format :
view2/1234/4567
1234 being the pqid and 4567 the cid.
So your routing, I think is working, just change the link to #/view2/775/4.
Or if you want to keep the same link change your routing to:
#/view2/pqid/:pqid/cid/:cid
I am trying to figure out how to dynamically update meta tags in an angularjs single page application. I have figured out how to do it for the title tag by using:
myApp.run(function($location, $rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.title = current.$$route.title;
});
});
and
<title ng-bind="title">myApp</title>
and
$routeProvider.when('/', {
templateUrl : '/pages/home.html',
controller : 'homeController',
title: 'the home page'
})
But am stumped how to extend this to the meta tags.
I think you can use resolve like this
app.js
var app = angular.module('plunker', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl : 'home.html',
controller : 'homeController',
resolve : {
pageTitle : function(){
return {'title':'Home Page Title.'}
}
}
})
});
app.controller('homeController', function($scope, pageTitle){
$scope.title = pageTitle.title
});
home.html
<title ng-model="title"></title>
Here is the working plunker but you need to
I am using templateUrl to display specific php pages in my webpage. Now I wish to scrap the individual php pages and display code with variables passed to it. What is the easiest way to get back to this?
var AppModule = angular.module('App', ['ngAnimate', 'ngRoute']);
AppModule.config(function($routeProvider) {
$routeProvider
.when('/page:pageNumber', {
templateUrl: function ($routeParams) {
return '/app/..../assets/html/page' + $routeParams.pageNumber + '.php';
},
controller: "PageCtrl"
})
.otherwise({
redirectTo: "/page1"
});
});
AppModule.controller("ViewCtrl", function($scope, $timeout) {
$scope.$on("$routeChangeSuccess", function(event, current, previous) {
...stuff...
});
});
Use scripts via text/ng-template, which allows you to write your templates inline while declaring a url to access them by. The following code can go directly in your index.html, and if your config is set to show '/my-template.html', the inline template will be output right in the ng-view above it.
<ng-view />
<script type="text/ng-template" id="/my-template.html">
template goes here
</script>
Then in your config:
.when('/', {
templateUrl: '/my-template.html'
});
Here's a little more info from the Angular docs:
https://docs.angularjs.org/api/ng/directive/script
And lastly, this technique is demonstrated in one of the TodoMVC examples for Angular:
View: https://github.com/tastejs/todomvc/blob/gh-pages/examples/angularjs/index.html
Config: https://github.com/tastejs/todomvc/blob/gh-pages/examples/angularjs/js/app.js
I am new using AngularJS, i am trying to implement a router to manage 2 different views.
I have followed the tutorial but i get an error on my javascript console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7-build.2029+sha.80e7a45/$injector/modulerr…Flocalhost%3A3094%2Fbower_components%2Fangular%2Fangular.min.js%3A32%3A188)
This error only happens when i add the APP.config() part of the code.
I can reach the route /views/a.html directly on my browser, and i do have a <div ng-view></div> in my html code (index.html), i don't understand what i am missing...
var APP = angular.module('APP', [ 'ui.bootstrap', 'angularFileUpload', 'ngRoute' ])
//Load Facebook SDK & co...
});
APP.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'views/a.html',
controller: 'aCtrl'
}).
when('/b', {
templateUrl: 'views/b.html',
controller: 'bCtrl'
}).
otherwise({
redirectTo: '/a'
});
}
]);
APP.controller('aCtrl', function() {
console.log('CALL A CONTROLLER');
});
APP.controller('bCtrl', function() {
console.log('CALL B CONTROLLER');
});
You have to inject ngRoute into your app:
angular.module('ngViewExample', ['ngRoute'])
Unfortunately the demo app is still using v1.0.6 so you're going to see a lot of inconsistencies. Here's a better example from the documentation:
http://docs.angularjs.org/api/ngRoute.$route