I just recently switched to Angular and Typescript from My usual JAVA, I have been looking for project based tutorials to get a better grasp of the frame work and your channel is just Awesome. So much projects to sharpen my skills. Thanks I just subscribed.
Mushrooooms! This tutorial is better than your others because you are using more creative ways to explain to us what you are doing. The whiteboard idea is great!
Thanks for posting this up, i take a lot of training from work and they are no where as exciting and useful as this. I'm already checking your other projects!
Great man. This is cool and way advanced without bullshitting on how you like new framework. Thanks. Looking forward to learn more on other aspects of framework like http, forms, directive components , animations..
This a very rare tutorial wherein which the code works perfectly after you dl from git cd into the folder, and run npm install. Bravo, Wes. This is at least true as of 11/22/2017
I like that you make full screens of text that say where we are going and what we are doing there (15:03). When I skip through the videos thumbnails to find a place in the tutorial i like, I can see these full screen texts and navigate easier. Yes I know im posting too many comments. Sorry!
I Think that a Tutorial with Angular + MapBox for Geocoding more specifically would be very interesting as well :) We can find resource for Google Maps API but as it became very expensive, I would like to try another solution...
Great Video Wes! I really like these tutorials, more creative than alot of other channels or tutorials. I was wondering how long a project like this might take you? Because for me, even coding along I run into errors (most my own fault) that I need to debug, took me probably 4 -5 hours to do this one after solving some errors. Also I hope you provide a part 2 with this video for a backend to add activities :) Nice video
@Joel Buzzanco - thanks, I appreciate it! I'd say it also takes me about the same amount of time - perhaps even a bit longer - to complete an app like this from start to finish in terms of what's shown in the video. My process is generally to built the app for a video once before recording, and then I work through it again to make the recording, which takes a few hours, but goes a bit faster than the initial design and build. Some of my longer video series take quite a bit longer; it just depends on the size of the project and the particular technology. One of the things that speeds up text editing is the use of Vim keybindings. All the best!
Thank you! Great turorial with very good explanations. Please make a detailed tutorial about Angular 7 in combination with Leaflet and displaying GEOTiff data. This topic is of interest to many people but unfortunately there are not enough sources or examples. That would be great!
Hi Wes, i really appreciate you doing cool project based tutorial spending your time. looking forward such more. I would like to know are there any libraries where we can store the live GPS feeds to database and show the data back when requested(like history play) thank you
Great Work. Subbed. I would definitely love to see more tutorials on different angular apps. And yes. I laughed at getFirstDate()... even though you didn't tell the joke. Hahaha...
Thanks, Wes D! Very good video tutorial. I really want to see more videos for angular 4 js. If you are possible, could you create new video for angular 4? If you do it, I'm so thanks.
Thanks for posting ! really helpful. Did you encounter this too while developing this tutorial - ERROR in src/app/services/activity.service.ts(16,12): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures. in the service ?
Hello, I completed this tutorial and I liked it so much. Only issue that I am having is the gpx data, the activity name and details next to the map including the map are not showing anything. I double checked all my imports, variables and interpolation syntax, but i couldnt find the solution. There is not much on the internet either. What could be the problem with that, I used three different types of gpx data( from Strava directly, and from 2 other sample sites) Please help, I would appreciate it. :)
hey there, really great tutorial! I only have one question: Have you ever gotten the error "Uncaught TypeError: Cannot set property 'L' of undefined". I think it relates back to the scripts I'm importing (particularly to Leaflet). I don't think the import is working, as my second window isn't showing the map at all or any of the activity parameters when clicked on from the original list.
hi, thanks for your sharing..nice tutorial and I am very new in typeScript..by the way I need a favor from you. How to call the activity array into app.component.ts? Actually I have import multiple component in that file(app.component.ts) and when I run the app, the table body not bind properly and shown at inspect element bar. Seek your help on this.
hy Wes, thank you for this Video. i have Angular project i am developing and i would like to use map to direct customers to sellers. i really need your assistance on how i can make it. the video on GPS i really like but it does enter data status, How about to load it from server ? thank you brother
+Nsengimana Veda Dominique Thanks for the comment - sound great - I'll be releasing a video shortly demonstrating the use of Firebase as a backend live database which may be useful to you. I'll be making another video about forms for inputting data as well. All the best.
also brother may u show us how to create chat in angular 4 because using IONIC is kind complicated. Thank you very much for your time and consideration.
Hi! It is an amazing tutorial! I'm new in Angular and I got this error at map.service.ts: "ERROR ReferenceError: L is not defined", I have the plotActivity method same as the video.
+Daniel Dodd - check out the page inspector by right-clicking on the page that isn't working for you, and select Inspect, then click on the Console tab. Make note of any errors you see there - this is how I often debug issues while developing.
Great Tutorial. While I was coding along i got stuck with the following error: "Cannot find name 'defaultCoords' and Cannot find name 'defaultZoom' ". When I installed npm i leaflet-omnivore i got deprecated warnings. Could this be the issue? Thanks
Hi Daniel - In this case, I think it's looking for the defaultCoords and defaultZoom variables you are passing to the Leaflet setView method, as in L.map('map').setView(defaultCoords, defaultZoom); in the map service. You'll want to be sure to define those variables before using them. See around the 50:50 mark in the video. Let me know if you're still stuck after ensuring those variables have been set. For more info on the setView method, the leaflet docs - leafletjs.com/reference-1.1.0.html - show the method definition for setView(). Let me know if you get it working!
hey man, im just learning ionic with angular js, I wanted to create the same as this video, only that I'm using ionic,i don't know how make it work with ionic, pls help :(
Hey man, quickly looking at your repo, it looks like you just need to complete your app.component.html file. It's currently empty, meaning your page isn't going to render anything inside your app-root tags. Check it out starting around 37:52 in this video. It looks like you don't have any routes defined yet, also. If you run into any issues once you get that page filled out, send me a message from my channel and let me know, happy to try and help out.
Apps works fine but I am seeing this error in console, please help me out MapComponent.html:12 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Lake Shore'. at viewDebugError (core.es5.js:8418) at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8396) at checkBindingNoChanges (core.es5.js:8560) at checkNoChangesNodeInline (core.es5.js:12421) at checkNoChangesNode (core.es5.js:12395) at debugCheckNoChangesNode (core.es5.js:13172) at debugCheckRenderNodeFn (core.es5.js:13112) at Object.eval [as updateRenderer] (MapComponent.html:12) at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094) at checkNoChangesView (core.es5.js:12217)
Video is great somehow though everything compiles but nothing shows in my activity-list component.html. I was following along good until the 28 min mark... lol
No problem - it looks like your current issue is in your app.component.html. Looking at your repo, your app.component.html contains the same contents as your activity-list-component.html. As a starting point, replace what you have in app.component.html with to see that component get rendered - that appears to be working! A bit later, you'll use the router module to choose which component is activated. Let me know if you're still having issues, and best of luck!
You tell us to copy an paste stuff from your github but this code is like 5 steps beyond what you have actually pasted, which leads to an error. quite annoying. for instance, you tell us to copy and paste activity-list.component.html from github but this contains a reference to routerLink which cannot be used yet. Naturally an error is thrown.
i just started listening to this, but thanks for a video longer than 5 mins, and thanks for talking in a language I can understand.
I just recently switched to Angular and Typescript from My usual JAVA, I have been looking for project based tutorials to get a better grasp of the frame work and your channel is just Awesome.
So much projects to sharpen my skills. Thanks
I just subscribed.
+Mahmoud Tokura glad to hear, good luck!
Mushrooooms! This tutorial is better than your others because you are using more creative ways to explain to us what you are doing.
The whiteboard idea is great!
Thanks for posting this up, i take a lot of training from work and they are no where as exciting and useful as this. I'm already checking your other projects!
+S W glad to hear it! Good luck and let me know if you have any questions
Great man. This is cool and way advanced without bullshitting on how you like new framework. Thanks. Looking forward to learn more on other aspects of framework like http, forms, directive components , animations..
+Rk Reddy Bairi glad you enjoyed it! All the best
This a very rare tutorial wherein which the code works perfectly after you dl from git cd into the folder, and run npm install. Bravo, Wes. This is at least true as of 11/22/2017
still perfectly works after 446 days
I like that you make full screens of text that say where we are going and what we are doing there (15:03). When I skip through the videos thumbnails to find a place in the tutorial i like, I can see these full screen texts and navigate easier.
Yes I know im posting too many comments. Sorry!
FUCK! as a person who enjoys urban exploration and a guy who's getting into angular. this tutorial is a match made in heaven
Glad to hear it HK
Very nice tutorial and very inspirational. Your style of teaching/explaining is very pleasant. I feel that I am in a friendly place
Thanks, Peter!
this was pretty cool. Got the data out of my smart watch and updated the app with my data thanks keep up the great vids man
Awesome
This is exactly what i needed! Your Channel will explode soon with all this great content :D Thanks a lot!
+Luis Manzanero glad you enjoyed it
I love these angular tutorials. This is my third one. Keep em up!
I Think that a Tutorial with Angular + MapBox for Geocoding more specifically would be very interesting as well :)
We can find resource for Google Maps API but as it became very expensive, I would like to try another solution...
github.com/haoliangyu/ngx-leaflet-starter
luckily i found that tutorial, smart moves, your tutorials better than others
Glad to hear! Thanks!
Thanks to you
Fantastic, Inspired me a lot. I want to make an app combining the PhotoGallary and Mapping App~
+NiBin good idea! Good luck!
I just love the intro! you are awesome bro!! Respect from Bangladesh :)
+Tarique Mahmud thank you! All the best!
Great Video Wes! I really like these tutorials, more creative than alot of other channels or tutorials. I was wondering how long a project like this might take you? Because for me, even coding along I run into errors (most my own fault) that I need to debug, took me probably 4 -5 hours to do this one after solving some errors. Also I hope you provide a part 2 with this video for a backend to add activities :) Nice video
@Joel Buzzanco - thanks, I appreciate it! I'd say it also takes me about the same amount of time - perhaps even a bit longer - to complete an app like this from start to finish in terms of what's shown in the video. My process is generally to built the app for a video once before recording, and then I work through it again to make the recording, which takes a few hours, but goes a bit faster than the initial design and build. Some of my longer video series take quite a bit longer; it just depends on the size of the project and the particular technology. One of the things that speeds up text editing is the use of Vim keybindings. All the best!
Thank you! Great turorial with very good explanations.
Please make a detailed tutorial about Angular 7 in combination with Leaflet and displaying GEOTiff data. This topic is of interest to many people but unfortunately there are not enough sources or examples.
That would be great!
we love you man
Hi Wes, i really appreciate you doing cool project based tutorial spending your time. looking forward such more.
I would like to know are there any libraries where we can store the live GPS feeds to database and show the data back when requested(like history play)
thank you
+Sandeep Naidu great question; I'm not aware of any such libraries, but will let you know if I find anything
Wes! You live in a beautiful place!
Ha, thanks Garrett. It can be nice sometimes. It's all about where you look, I suppose. Great looking channel you have, by the way!
Wes Doyle haha! I hear ya! Thanks, yours is quite good lookin' as well :)
Ha! I hear ya! Your channel is quite good lookin' as well!
I love it man, thanks!!
Great Work. Subbed. I would definitely love to see more tutorials on different angular apps.
And yes. I laughed at getFirstDate()... even though you didn't tell the joke. Hahaha...
lol Thanks Kiran!
Your vids help me to learn angular so much! :D
+ Piotr Glownia - That's great, I'm glad you enjoy the videos. Good luck in your learning!
Tq so much Wes Doyle. This video saves my time, once again thanks a lot.
Fantastic walkthrough!! thanks for doing a great tuts.
+vinayaga perumal thanks, glad you enjoyed the video!
Great Tutorial !! Thanks Wes !! Keep it UP !
Thanks for your support!
Thanks, Wes D! Very good video tutorial. I really want to see more videos for angular 4 js. If you are possible, could you create new video for angular 4?
If you do it, I'm so thanks.
+David Castillo thanks! I sure will. I'm working on more Angular videos. They'll be out soon.
Thanks..so much! if you created new videos, I hope you will let me know the youtube url. I'm so interested in your angular-4 projects.
+David Castillo so glad to hear, I'll keep you posted! All the best
Your tutorials are awesome. Thanks a lot. Keep posting :)
+harshit vijayvargiya will do thanks for your support!
Do you prefer installing your third party packages over using a CDN? Thanks.
Thanks for posting ! really helpful. Did you encounter this too while developing this tutorial -
ERROR in src/app/services/activity.service.ts(16,12): error TS2349: Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures.
in the service ?
Try ‘number’ lowercase
You can initialize the earliest date with allActivities[0].date, and it will be work fine too.
Hello, I completed this tutorial and I liked it so much. Only issue that I am having is the gpx data, the activity name and details next to the map including the map are not showing anything. I double checked all my imports, variables and interpolation syntax, but i couldnt find the solution. There is not much on the internet either. What could be the problem with that, I used three different types of gpx data( from Strava directly, and from 2 other sample sites) Please help, I would appreciate it. :)
Wonderful tutorial love it, thank you very much
+Manjunatha H - thank you, I'm glad you enjoyed the video!
Just a heads up: No time dimension on Wanderer's GPX files so they're not the best example if you mean to track location across time
Thanks!
hello.., great tutorial. how to retrieve data from back-end? how to upload gps data to server? (phone). sorry my bad english
+Enhsuld Zorigtbal great question, I'll make another video implementing a back end soon. All the best!
Wes D springboot mongodb possible?
Thank you for sharing this informative video! 😺🖐
adding the api-key in the angular part is safe ? if not then can you tell me how can i get that through spring boot and mysql?
Awesome videos. Thank you.
hey there, really great tutorial!
I only have one question:
Have you ever gotten the error "Uncaught TypeError: Cannot set property 'L' of undefined". I think it relates back to the scripts I'm importing (particularly to Leaflet). I don't think the import is working, as my second window isn't showing the map at all or any of the activity parameters when clicked on from the original list.
I have the same problem, maybe it relates to angular version.
hi, thanks for your sharing..nice tutorial and I am very new in typeScript..by the way I need a favor from you. How to call the activity array into app.component.ts? Actually I have import multiple component in that file(app.component.ts) and when I run the app, the table body not bind properly and shown at inspect element bar. Seek your help on this.
hy Wes, thank you for this Video. i have Angular project i am developing and i would like to use map to direct customers to sellers. i really need your assistance on how i can make it. the video on GPS i really like but it does enter data status, How about to load it from server ? thank you brother
+Nsengimana Veda Dominique Thanks for the comment - sound great - I'll be releasing a video shortly demonstrating the use of Firebase as a backend live database which may be useful to you. I'll be making another video about forms for inputting data as well. All the best.
also brother may u show us how to create chat in angular 4 because using IONIC is kind complicated.
Thank you very much for your time and consideration.
+Nsengimana Veda Dominique nice idea, will definitely consider it for a future video!
can i do this with ionic
??
Hi! It is an amazing tutorial! I'm new in Angular and I got this error at map.service.ts: "ERROR ReferenceError: L is not defined", I have the plotActivity method same as the video.
Same for me... Any solution?? Thanks
Hi awesome video, any ideas why map doesnt display on hitting link. Thanks a lot.
+Daniel Dodd - check out the page inspector by right-clicking on the page that isn't working for you, and select Inspect, then click on the Console tab. Make note of any errors you see there - this is how I often debug issues while developing.
could you pls make something on shared modules/lazy loaded modules with routing?
+vinayaga perumal great suggestion, I will consider it for a future video!
Wes D Thank you so much for considering. your efforts much appreciated!! thank you again.
Great Tutorial. While I was coding along i got stuck with the following error: "Cannot find name 'defaultCoords' and Cannot find name 'defaultZoom' ". When I installed npm i leaflet-omnivore i got deprecated warnings. Could this be the issue? Thanks
Hi Daniel - In this case, I think it's looking for the defaultCoords and defaultZoom variables you are passing to the Leaflet setView method, as in L.map('map').setView(defaultCoords, defaultZoom); in the map service. You'll want to be sure to define those variables before using them. See around the 50:50 mark in the video. Let me know if you're still stuck after ensuring those variables have been set. For more info on the setView method, the leaflet docs - leafletjs.com/reference-1.1.0.html - show the method definition for setView(). Let me know if you get it working!
The serve command requires to be run in an Angular project, but a project definition could not be found.
Angular 8 :(
Is there an update for this in angular 7?
if the API key is part of the client application, will users of application be able to see it in the code and requests and possibly abuse it ?
Is this tutorial done using Angular 2 instead of Angular 4?
This is still actual? Angular 4?
im having an issue with mapboxes token keys . how do insert my own valid key
Were you in northern China five years ago?
Thanks for showing me pexels!!!
Is there anyway to get rid of the karma.conf.js
Great video, subscribed :)
Awesome video
+Marko Grubešić glad you enjoyed it!
hey man, im just learning ionic with angular js, I wanted to create the same as this video, only that I'm using ionic,i don't know how make it work with ionic, pls help :(
how do we then drive on that route?
Hey, somebody knows how to buid a "Turn-By-Turn" navigation with Leaflet ? :s Thanks experts
Nice Videos Bro! Please make an app using MongoDB, Express as well.
+Atul Narang - Great suggestion, thanks!
Mix up some jokes too :).. your videos are really helpful. Keep posting more..!
+Jafar Chembatty - Will do! Thank you.
great video, but i have a problem displaying content from the activity-list.component.html file. It doesn't show any errors
+jkracing - if you'd like me to review your code, feel free to create a github repo and send a link! I'll see if I can help!
wow I didn't expect a response so quickly! will do thanks!
github.com/JEK1000/exercise-tracker
Hey man, quickly looking at your repo, it looks like you just need to complete your app.component.html file. It's currently empty, meaning your page isn't going to render anything inside your app-root tags. Check it out starting around 37:52 in this video. It looks like you don't have any routes defined yet, also. If you run into any issues once you get that page filled out, send me a message from my channel and let me know, happy to try and help out.
thanks, subscribed! looking forward for more quality videos in the near future!
I love ~1-hour build-an-app projects -- best/most-fun way to learn. This one was . Thx so much. Please keep them coming! +1 Subscribe!
you are a cappo thanks to share
Apps works fine but I am seeing this error in console, please help me out
MapComponent.html:12 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'Lake Shore'.
at viewDebugError (core.es5.js:8418)
at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8396)
at checkBindingNoChanges (core.es5.js:8560)
at checkNoChangesNodeInline (core.es5.js:12421)
at checkNoChangesNode (core.es5.js:12395)
at debugCheckNoChangesNode (core.es5.js:13172)
at debugCheckRenderNodeFn (core.es5.js:13112)
at Object.eval [as updateRenderer] (MapComponent.html:12)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13094)
at checkNoChangesView (core.es5.js:12217)
Video is great somehow though everything compiles but nothing shows in my activity-list component.html. I was following along good until the 28 min mark... lol
+Lj Craft if you push your code to a github repo I'd be happy to help troubleshoot!
That would be awesome man thank you github.com/LjCraft12/gps-activity-tracker
What a quick reply I really appreciate that alot and even offering to help.
No problem - it looks like your current issue is in your app.component.html. Looking at your repo, your app.component.html contains the same contents as your activity-list-component.html. As a starting point, replace what you have in app.component.html with to see that component get rendered - that appears to be working! A bit later, you'll use the router module to choose which component is activated. Let me know if you're still having issues, and best of luck!
you look so pretty
getTotalActivities(allActivities: IActivity[]) {
return allActivities.length();
}
for this above.
you're typing a lot of angular stuff, but not explaining what they are.... not a very good 'tutorial' is it?
Sorry, Louis! Let me know if there is anything you don't understand and I'll try to help you out.
You tell us to copy an paste stuff from your github but this code is like 5 steps beyond what you have actually pasted, which leads to an error. quite annoying.
for instance, you tell us to copy and paste activity-list.component.html from github but this contains a reference to routerLink which cannot be used yet. Naturally an error is thrown.