Im having trouble getting my second view to show up in my app. What the app is supposed to do is list locations, when you click on a location it is supposed to route to a different view with a Google Map embedded and search the coordinates at the location. Ive set up a plunker for my project. I believe my problem is somewhere in defining my controllers/modules. I would post my code in here but there are multiple classes which can get confusing. Can anyone help?
Demo: http://plnkr.co/edit/OZZRgiEcrLzreW3lrc5v?p=preview
This should help you further : http://plnkr.co/edit/IEj0HAolgmUVrCghMtgN
Amongst other things, your routing configuration is incorrect
$routeProvider
.when("/index", {
templateUrl:"index.html",
controller: "firstCtrl"})
.when("/map", {
templateurl:"map.html",
controller: "MapController"})
.otherwise("/index");
This sets your default view, which is put into the <div ng-view>, to the index.html, which contains the <div ng-view>. Something like an infinite loop.
I've split the views in two : a search.html and a map.html and updated the routing to look like this :
$routeProvider
.when("/search", {
templateUrl: "search.html",
controller: "searchController"
})
.when("/map/:locationName", {
templateUrl: "map.html",
controller: "mapController"
})
.otherwise({
redirectTo: '/search'
});
Also, your map-data wasn't sent to the mapController. See the plunkr for the solution.
The only thing you need to do now is to send the location instead of the name.
I've cleaned up your code a little and provided some info on how the routing works and how to improve your module definitions.
This was very helpful for me when I started working with AngularJS. It might help you too : https://docs.angularjs.org/tutorial/
Related
I'm using Angular for my android application. After given time I need to open a template file. This is my app.js for the particular template file
.when('/tracker/',
{
templateUrl: 'views/tracker.html',
controller: 'MainController'
})
I want to open this tracker.html file directly from my MainController and I'm not sure how to do that. If you need more information let me know.
Since I'm still new to Angular any help would be appreciated to make this happen.
You can try linking one of your scope attributes to a modal (this would open your tracker.html as a popup and then you can define other stuffs)
function MainController($scope, $uibModal) {
var modalInstance;
$scope.open= function () {
modalInstance = $uibModal.open({
templateUrl: 'views/tracker.html',
controller: 'MainController'
});
};
}
What you've done seems sufficient, I'll explain your code snippet.
.when('/tracker/',...
The above snippet says, when a user or browser requests the URL yourhost.com/tracker/', do what's following,
.., {
templateUrl: 'views/tracker.html',
controller: 'MainController'
})
Direct them to the template views/tracker.html and use the controller MainController on the specified template above.
That's the simplest explanation i could come up with. I hope navigating your browser to the link, yourhost.com/tracker/ will show you the tracker.html template you need.
If the above fails, make sure you have correctly defined your ng-view directives in your index.html file (https://docs.angularjs.org/api/ngRoute/directive/ngView) or watch out the browser console for any errors.
Pretty new to Angular, I am sure I'm missing something obvious here. I am using ui-router.
I want to provide a link to my clients so that they can click the URL link and visit the web app with the appropriate partial. I also want to be able to pass in parameters. Here's how I approached this (kind of hokey). This is in my main controller:
var pNumber = $location.search().number;
if (!(pNumber == null || pNumber == "")){
$state.go('view-ticket');
}
Here is my app.js:
$stateProvider
.state('home', {
url: "/",
templateUrl: 'partials/welcome-screen.html',
controller: 'mainPageController'
})
.state('submit-ticket', {
url: "/submit-ticket",
templateUrl: 'partials/ticket-submit.html',
controller: 'TicketSystemTestCtrl'
})
.state('view-ticket', {
url: "/view",
templateUrl: "partials/ticket-central.html",
controller: 'TicketCentralCtrl'
})
The logic is this: If the URL contains a param 'number' inject ticket-central.html partial.
However, when I run this in the debugger, it seems the first part of the code got executed before it loads the welcome-screen.html partial. How to solve this?
EDIT: I am trying to type this into the URL: http://localhost/techsupport/view and I want it to load the ticket-central.html partial into the main view. However, it won't work.
if i understand correctly all you want to do is to provide a possibility to 'deep-link' to the 'view-ticket' state.
for this search params are not the ideal solution as they are optional, just use path variables:
.state('view-ticket', {
url: '/view/:ticketNumber,
template: 'partials/ticket-central.html',
controler: 'TicketCentralCtrl'
})
also don't use the $location service if you don't really have to, have a look at $stateParams
here is a small plunkr with a welcome and a ticket state
launch the preview in a separate window to see how the url changes - you can also refresh on each page and the correct state will be loaded
https://plnkr.co/edit/r3UcYbfwET0OVwkd77Rv
I'm pretty new to AngularJS and have a little obstacle and wondered if anyone could push me in the right direction.
I am using as part of my routing system for the application a template I have created and then dynamically generate the url with an id taken from specific parts of objects in my controller here is an example:
{
id: 'started',
title: 'Get Started',
image: 'assets/img/enrolment.jpg',
system: 'eLP',
pdf: 'assets/files/getting_started.pdf',
info: 'blah blah blah.'
},
so as you can see, the first part of my object is called 'id' and I have it configured within my $routeProvider as:
$routeProvider.
when('/',
{
templateUrl: 'sessions/guides.html',
controller: 'tutsList'
}).
when('sessions/:id',
{
templateUrl: 'sessions/help.html',
controller: 'tutsList'
}).
otherwise({redirectTo:'/'});
});
(guides.html is working, but help.html is coming back blank currently).
When I hover over the links within list that's generated, I can see the id is now coming through and showing up at the bottom of the page, but the link goes through to a blank template. I am aware that I have to add a controller, which then sticks the id to the $routeParams , but, it doesn't seem to work when I use the phoneApp example process in AngularJS Docs.
Any help would be greatly appreciated.
If your using an android phone, don't you have to specify the directory path from the root directory? (not like appeared to have done for windows ( pdf: 'assets/files/getting_started.pdf'))
Sorry I'm fairly new to this myself.
I am not sure what the problem is, im assuming its something with the way my angular routing is? If anyone could help that would be very appreciated.
This is my controller, the console log here actually prints.
app.controller('ClientCtrl',['$http','$scope',
'$stateParams',function($http,$scope, $stateParams){
var clientid = [$stateParams.id];
var client = this;
client.infos = []
$http.get('../client.JSON').success(function(data){
client.infos = data;
console.log(client.infos)
});
}]);
This is my routes, im using ui.router, since im using angular. the client route is the one causing problems.
planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/templates/index.html',
controller: 'MainCtrl',
})
.state('clients', {
url: '/clients/{id}',
templateUrl: 'clientsmain.html',
controller: 'ClientCtrl'
})
.state('photoplans', {
url: '/photoplans/:id',
templateUrl: 'photoplanmain.html'
});
}])
This is the html file thats causing me problems
<h1>Hi! </h1>
<div class="col-sm-6" ng-repeat="info in client.infos" >
<p>{{info.active}}</p>
</div>
<script> console.log("this sucks") console.log(client.infos)</script>
And this is the console right now
I have tried everything i can think of to get this to work, but nothing works currently. As you can see angular is not throwing errors, but nothing is console logging from this page nor is the ng-repeat working. Any help is greatly appreciated, thanks in advance.
You have already printed a result from the angular controller in console its there in screen shot.
Seems like you should us controllerAs alias there for controller, you could declare alias inside your state itself like by doing controller: 'ClientCtrl as client'
Markup
<h1>Hi! </h1>
<div class="col-sm-6" ng-repeat="info in client.infos" >
<p>{{info.active}}</p>
</div>
State
.state('clients', {
url: '/clients/{id}',
templateUrl: 'clientsmain.html',
controller: 'ClientCtrl as client'
})
Update
You can not load script from the partials, they will never get readed when they are loaded through the partial html. Though using console.log(client.infos) never make sense how can you think of angular context will available for the global script.
If you want it something like this then you could take a look at this thread, but my personal advice is you shouldn't go for this.
I am slightly puzzled on how to use angularjs to build a blog-like web site.
If you think of an ordinary blog,,, and say,, I am building it using php and mysql.. what I don't understand is how do I make angular get an article based on id..
I can load data for a list of all articles.. I can load data for a single page (from a static json),, I understand how to send http requests,, but how do I access
mysite.com/page?id=1 or
mysite.com/page?id=2 or
mysite.com/page?id=3
Obviously, I want to load the same template for each separate blog post.. but I have not yet seen a single example that explains this simply.
If I have three posts in my database with id 1,2,3 how is angular meant to generate links to each individual article? I understand that I can load data to assemble urls but what urls? I suppose I am confused with routing.
Could you recommend a SIMPLE and understandable example of this? Could you suggest how to think about this?
Thanks!
In this short explanation I will use examples based on official tutorial.
Propably somwhere in your application you created controllers module with code close to that:
var blogControllers = angular.module('blogControllers', []);
// other controllers etc.
blogControllers.controller('BlogPostCtrl', ['$scope',
// more and more of controller code
We will be back here in a moment :) If you have controllers module, you can create a route linked to the specific controller:
var blogApp = angular.module('blogApp', [
'ngRoute',
'blogControllers'
]);
blogApp .config(['$routeProvider',
function($routeProvider) {
$routeProvider.
// other routes
when('/post/:postId', {
templateUrl: 'partials/blog-post.html',
controller: 'BlogPostCtrl'
}).
// other...
}]);
Well but what we can do with this :postId parameter? Lets go back to our controller:
blogControllers.controller('BlogPostCtrl', ['$scope', '$routeParams', 'BlogPost',
function($scope, $routeParams, BlogPost) {
$scope.post = BlogPost.get({postId: $routeParams.postId});
}]);
As you see, we are passing $routeParams here and then our BlogPost resource (it will be explained). Simplifying (again), in $routeParams you have all the params that you put in the $routeProvider for exact route (so :postId in our example). We got the id, now the magic happens ;)
First you need to add services and/or factories to your app (and look, we are using ngResource):
var blogServices = angular.module('blogServices ', ['ngResource']);
blogServices.factory('BlogPost', ['$resource',
function($resource){
return $resource('action/to/get/:postId.json', {}, {
query: {method:'GET', params: { postId: 'all' }, isArray:true}
});
}]);
Now you know what is our BlogPost in controller :) As you see default value for postId is "all" and yes, our api should retrieve all posts for postId = "all". Of course you can do this in your own way and separate this to two factories, one for details and one for list/index.
How to print all of the blog names? Quite simple. Add list routing without any special params. You already know how to do this so let's skip it and continue with our list controller:
blogControllers.controller('BlogListCtrl', ['$scope', 'BlogPost',
function($scope, BlogPost) {
$scope.blogPosts = BlogPost.query(); // no params, so we are taking all posts
}]);
Voila! All posts in our $scope variable! Thanks to this, they are accessible in the template/view :) Now we just need to iterate those posts in our view, for example:
<ul class="blog-posts">
<li ng-repeat="blogPost in blogPosts">
{{blogPost.title}}
</li>
</ul>
And this is it:) I hope you will find AngularJS quite easy now!
Cheers!
I think what you want to use for this is $routeParams. Have a look at this video from egghead.io which explains how to use it:
http://egghead.io/lessons/angularjs-routeparams
It's a good practice to use hash navigation. So your routing should look like this
mysite.com/blog/#!/id=1
mysite.com/blog/#!/id=2