I would definitely love to see a tutorial for that! Absolutely love you're screen-casts, nice quality and you move through everything at a very nice pace. You and John Lindquist gave me a huge headstart at college where we needed to develop a SPA. You and
This is a common question when building a web app using the modern-client method, but the right answer is what you stated at the end of your question: we should always validate authentication, credentials and security related things on the server side :)
the moment I saw that typo I knew it will be trouble. great tutorial, I'm trying to learn angularjs for a project and I got some good tips from you. thanks for your effort!
Thanks for your kind words Timothy! I'm glad it worked out, stay tuned I'll be posting more web development (and Angular JS) screencasts in the future :)
Great tutorial! As a side note, since PHP 5.4, instead of using array('foo' => 'bar'), you can just use square brackets, i.e. ['foo' => 'bar']. Keeps things a little tidier.
Brilliant stuff, this is the jump between fun examples and real life application that I have been looking for. I can finally leverage this to start working with AngularJS.
Damn, I have strived so hard to find a tutorial on how to implement authorization with Angular+Laravel, at last I have jsut thrown away any attempts to learn Angular, because I didn't know how to implement this. This video answers to such Important questions that I had!
The browser is a pretty viable platform for real-time updates, and has been since XHR started being widely-used for this purpose. Now we have abstractions like websockets (and socket.io), that enable more of a persistent connection between client and server. Angular is well suited for dealing with apps where a persistent connections is feeding data in real time to the browser as it provides 2-way databinding by default.
Hi Dries, I only picked foundation for the screencasts to provide some sense of continuity with John Lindquists (egghead.io) screencasts in which he uses foundation. Your question is one of the first things people new to Angular ask: "how do i use angular in conjunction with other js frameworks?". The high level answer is to wrap pieces you need with directives but that doesn't get into specifics; I may do another screencast on this idea in the future. In the meantime, check out angular-ui :)
Hi David, very nice video learning so many things from your screencast. I am waiting for the video of real-world implementation of the AuthenticationService. Can't wait for it!!!
Just an addition to SessionStorage: When you authenticated on a tab in your browser and open another with the same url you won't beauthenticated on the second :) SessionStorage is tied to browser and its actual tab! It also is destroyed immediately after you close the tab where you were authenticated. Pretty damn nice thing to have :D
The point was to show the integration points to get you started; this is intended to be a launching point for building a more complex app using an API/JSON pipe to deliver things to a rich client MV* framework :)
Heh, I left the typo in cause I figured it would be valuable to show some debugging. Thanks for watching and I'm glad the videos have been useful to you :)
***** Hey David! Thanks for these helpful Angular JS videos! Two roadblocks I've hit while following along. 1) As of today, ngRoute (docs.angularjs.org/api/ngRoute) is now a separate module that must be be downloaded, included into your html, and added to your app as a dependency. var app = angular.module("app", ['ngRoute']); 2) When you start building routesThatRequireAuth at 25:55, you're using a conditional helper from underscore.js(documentcloud.github.io/underscore/#contains) that you never explain in the video. _.contains is not a function in Angular or Javascript. (underscore.js is actually using indexOf and returning a Boolean). These videos have been a great help to me. Thank you very much for making them! :)
Great video and nice resources, and so is the first episode, definitely worth watching a few times. BTW, I thought it was a E2E **testing** tutor at first sight, and I didn't even realize I was misreading the title until the video suddenly ends, which keeps me thinking of things like 'isn't it too much for the scaffoldin? there might not be enough time for the testing part, where is the karma thing' kind of stuff during this whole hour :)
A common setup for a single page app is to precompile all templates into Angulars $templateCache to avoid having any requests at all; if you combine this approach with a hybrid where you split the app into unauthenticated and authenticated versions, and hide all of the .js code behind a traditional login page that redirects then you can avoid any potential security issues with templates + devtools :)
Hey David, thanks for the video, that's a really helpful resource! I think it would be good to tell people that this type of client side access control is not secure. I will always be able to visit every page of the SPA without being authenticated since I can manipulate everything on the client side.
Great vid thanks! With respect to mcrypt issues for Laravel on the mac. If you have MAMP installed, you can also just use: export PATH=/Applications/MAMP/bin/php/php5.4.4/bin:$PATH Where php5.4.4 is the version of php from MAMP settings
Hi Aron, one of the steps in the README file is to generate the session migration using Laravels built-in command: `php artisan session:table`. However, this seems to be a common issue so I'll just add the migration and commit it to the repo :)
Yep! This is the technique I used in the `logsUserOutOn401` interceptor that is covered in the screencast that effectively determines if a user ever becomes logged out, hence listening for a 401. There are other ways to limit the permissions on views, another technique is to use the $routeProvider.resolve configuration property and have a resource that needs to be remote loaded before rendering the view; if the resource fails to load because the user is not authenticated the view doesn't load :)
I think you can use other js file easily by using require js and by the way thanks for awesome tutorials i am thinking of starting using angularjs with require for more maintainability and separation of code. Thanks once again
Thanks old9, in hindsight I probably should have avoided "End to End" in the title due to the conflict with Angulars test configuration in karma :P Would you be interested in a screencast that expanded on these examples to do end-to-end testing using Karma?
Another nice tutorial though not as clear for learning AngularJS as the first one. For someone like myself that has little prior exposure to web development it was a bit tricky figuring out just what was actually AngularJS and what was the backend stuff to support the AngularJS app.
I just wanted to add a general note on the topic of security relating to the AuthenticationService code shown here: it's definitely not production ready; there are numerous things you would have to do to make this more robust in a production setting. I have added a bunch of links in the "Resources Bundle" shown in the video description above that cover things like CSRF, and serving login forms over SSL. If there is sufficient interest I could produce a followup covering security :)
Really enjoying these videos. I was also excited to see the use of mysql since I come from a php world. In any or your videos or could you point me in the direction of performing CRUD operations from the Angular app and the mysql database? How would I add more users? What are the best steps to take when writing to a mysql database with Angular? Is Laravel still a good option for this?
I would use $location.path and just issue a redirect to the home page if they hit the login route, you can handle this in your by listening to $routeChangeStart and checking for the /login vs /home route to determine where to redirect. I would also implement an .isAuthenticated() method on my AuthService.
Hey krishyy20, thanks for watching. As far as "real world" this is about as far as I plan to take the AuthenticationService. If you are interested in learning more about security and things like CSRF in order to make a login form like this production ready I've included some good learning materials in the resources bundle linked in the video description above :)
Hi David. Thanks for an great screencast! I was thinking, would it be bad practice if you used app.run listening to $routeChangeStart to check the session server side instead of handling this on the client side?
Thank you for this great video, but I tried your way of implementation, if i go to the browser and add key and the value in the session storage then i'm able to access the secure pages. any way to handle this?
I assume this probably gets a little deeper than the scope of the video, but the most common way would be to use a tokenized auth system. On each request you would pass the token to the API service (in this case Laravel), the service would then check the current session's status and return either the response as an HTTP 200, or a "requires login" HTTP 401 (or whatever other HTTP status code you wish given the outcome). Edit: you can use filters in Laravel to check the status of the session on each request.
I cover a common way to configure this in "Frontend Workflows with Grunt and Angular JS", basically it involves a separate repo for your angular code and your laravel code, and a build process with Grunt for the client-side assets which you would then just copy (using grunt-contrib-copy, if you wanted) into the Laravel public folder. Give it a watch and see if this answers some questions on how you could get a workflow setup like this :)
Hi hernan, developing simple pages in this manner is indeed probably not worth the complexity; where Angular really shines is when you have more complex interactions that would traditionally involve a full page reload in the browser. Being able to manage complex pieces of state, and automatically update the DOM easily from data in memory is very powerful.
I just updated the link in the description above, try it again and see if that works. If you still can't get to it you can always click on my username and get to the list of videos I've published :)
Yes, angular works fine with jQuery and jQuery plugins; you'll probably want to wrap the jQuery plugins in custom directives instead of working with them in controllers. Typically if you need to manipulate the DOM, which is what most jQuery plugins do, you'll do it in an angular directive.
hi David, in the last commentary i forgot to say thanks a lot for this tutorials!!! actually i have a doubt, in my applicattion front-end Can i combine angular js with jquery plugins in a way to add glam to the scene while angularjs takes care of routes, apis, responses and further. BTW: i´m developing my web on top laravel 4 on the server-side!!
Thanks very much for the videos. Am new to singlepage apps and love your content and pace. Configure question: Laravel wants to live in folder /app/... I love the grunt test/build setup in angular-seed, but it wants front-end jive to live in /app/... Given that I'd like to be able to easily upgrade these moving parts, what's a happy way to configure bower.json/Gruntfile.js/package.json ?? If laravel gets to be boss and stay in /app, then what's the least trouble to config the rest?
hey @David Mosher.. again awsome vid!! for the security video its throwing an error when i click the link to view it (part 3 of screencast) ..is there a different link i could use to get to it or did you take it down?? jw..thanks
Thanks for the great job . i am a LINUX user who has just started using OSX after getting my new toy macbook Air , KINDLY show us how to set up the development environment , i will appreciate it and pray for you from the bottom of my heart -_-
Is there a way to prevent the home.html from being requested when you're not authenticated? Because now you'll load home.html and login.html so a malicious user can just check the contents of home.html from the network tab in developer tools.
Injecting the resolve key into the controller seems to work in that the value is accessible, but it still generates an error : Unknown provider: [[resolve key]]Provider
Ben Farrell has a good example on on his website on how he incorporated jQuery UI's draggable function into a directive. Google search 'Drag and Drop with AngularJS and jQuery UI - Benjamin Farrell'
Thanks, for video. It is awesome. I think in another video you show how to make testing for angularjs, And my question is that for testing purposes you start another web server with grunt-connect and apply livereload for your javascripts. if i am going to make e2e tests with protractor and some html pages are jrendered from server how i can mount my instrumented javascript files to that karma or grunt-connect standalone server? Thanks in advance
Thanks Timothy, there are probably a few areas that need tweaking to fit the right use case for each persons app, your approach with $locationChangeStart looks good :D
Great video! However I have some concerns about your auth method, and how you secure your routes. Basically it seems you just set a session 'authenticated' = 'true'. This is kind of easy to fake right? Do you have any opinions on a more secure login function? Or what would you recommend. I have been searching for good tuts on angularjs + rest api auth, but haven't found any.
Thanks! If you are interested in a more robust authentication method then I suggest looking at the next video in the series "Security with Angular JS"; it's shorter and introduces the concept of $http Interceptors as well as showing how you can tie in a CSRF token to auth requests. Security with Angular JS
This tutorial is excellent! I ran into one problem with blocking navigation to the routes that require authentication. I ended up having to use the $locationChangeStart along with event.preventDefualt() to get this to work. e.g.: $rootScope.$on('$locationChangeStart', function(event, next, current) { if(...) { event.preventDefault(); $location.path('/login'); } });
Thanks! You're pretty awesome did you know that? :) I have another question (no the compliment wasn't a bribe :P). How would you approach redirecting already logged in users back to the home page, if they accidentally get there (as opposed to just showing the login page again)? I'm thinking that since the when() function's template property is a function that takes precedence over the templateUrl, I could do something there... but not sure if that will prevent templateUrl from taking effect.
Hi @Davidmosher you are awesome , Can you please create a video to how to write test cases for angularjs application using protractor (with real backend services).....
10 років тому
Great video, so this interceptor will take care if some hacker injects authenticated:true in sessionStorage?
Hi, great tutorials. But I have a question: This is what I did: 1. I set up two vhost on a server, and I moved the Angular part to "app.com", and Laravel part to "auth.com". (and i remove the CSRF_TOKEN and turn on the Access-Control-Allow-Origin in .htaccess) 2. When i login from the app.com/login, no problem, i'm verified and redirect to the app.com/home. 3. But, when i go to auth.com/auth/status, or do another $http.get() to that url from app.com, I always get a false as return value. So, my question is, is this suppose to show false? or am I missing anything? If so, what do I have to do to make it show the proper status? Thanks.
Love this tutorial. Thank you so much for all this. Only thing I miss is a way to assign a user-variable that contains id, firstname, lastname, email, created_at etc. A variable i can retrieve info from wherever in my app. You get all this data on login. I've tried to make a scope variable there, its working but only if user logs in via angular app. If user is already logged in, and i refresh the page, that variable isnt working because its only active at login. Do you have a tip for me? Ive been told to make a rest-controller that gets user info via $http, wich would be doable but then again, how could I retrieve\know what user-id to retrieve?... confusing me. Also I miss a example on how i could do like, in the navbar section, like i would do in laravel;@if(Auth::check()) echo info if auth @endif..
thanks for the video, very helpful. I am having error with this line of code >> " if(_(routesThatRequireAuth).contains($location.path()) && !AuthenticationFactory.isLoggedIn()){ $location.path('/login'); } ". The underscore inside IF statement is throwing error. how do i resovle this?
I usually try to keep external libraries to minimum when learning a new framework so I replaced that underscore with a for loop: for(var i = 0, max = routesThatRequireAuth.length ; i < max ; i++){ if ( ($location.path() === routesThatRequireAuth[i]) && (!AuthenticationService.isLoggedIn() ) ) { $location.path('/login'); } }
In this particular instance loading a whole new external library for one small functionality felt... redundant and useless. If there had been more instances that was used I propably would have just gone with underscore.
I would definitely love to see a tutorial for that! Absolutely love you're screen-casts, nice quality and you move through everything at a very nice pace. You and John Lindquist gave me a huge headstart at college where we needed to develop a SPA.
You and
This is a common question when building a web app using the modern-client method, but the right answer is what you stated at the end of your question: we should always validate authentication, credentials and security related things on the server side :)
the moment I saw that typo I knew it will be trouble.
great tutorial, I'm trying to learn angularjs for a project and I got some good tips from you.
thanks for your effort!
Thanks for your kind words Timothy! I'm glad it worked out, stay tuned I'll be posting more web development (and Angular JS) screencasts in the future :)
Great tutorial! As a side note, since PHP 5.4, instead of using array('foo' => 'bar'), you can just use square brackets, i.e. ['foo' => 'bar']. Keeps things a little tidier.
Brilliant stuff, this is the jump between fun examples and real life application that I have been looking for. I can finally leverage this to start working with AngularJS.
This screencast has been a godsend! Thank you so much for putting this together! I'm going to be referencing this for quite some time.
Damn, I have strived so hard to find a tutorial on how to implement authorization with Angular+Laravel, at last I have jsut thrown away any attempts to learn Angular, because I didn't know how to implement this. This video answers to such Important questions that I had!
Thank you for doing this David. I'm learning Angular and plan to learn Laravel in the future so this is two birds killed with a stone! :)
I would! These are the best tutes for Ng I've seen by far. Thanks!
This is a really-really great video about Angular! Love your videos David! Thank you very much! You did a perfect job!
Thanks for this great video! It's so cool that something of this quality is available for free!
Hey Milan, you're welcome. Glad it could help you out :)
The browser is a pretty viable platform for real-time updates, and has been since XHR started being widely-used for this purpose. Now we have abstractions like websockets (and socket.io), that enable more of a persistent connection between client and server. Angular is well suited for dealing with apps where a persistent connections is feeding data in real time to the browser as it provides 2-way databinding by default.
Hi Dries, I only picked foundation for the screencasts to provide some sense of continuity with John Lindquists (egghead.io) screencasts in which he uses foundation. Your question is one of the first things people new to Angular ask: "how do i use angular in conjunction with other js frameworks?". The high level answer is to wrap pieces you need with directives but that doesn't get into specifics; I may do another screencast on this idea in the future. In the meantime, check out angular-ui :)
Hi David, very nice video learning so many things from your screencast. I am waiting for the video of real-world implementation of the AuthenticationService. Can't wait for it!!!
Just an addition to SessionStorage:
When you authenticated on a tab in your browser and open another with the same url you won't beauthenticated on the second :)
SessionStorage is tied to browser and its actual tab! It also is destroyed immediately after you close the tab where you were authenticated.
Pretty damn nice thing to have :D
The point was to show the integration points to get you started; this is intended to be a launching point for building a more complex app using an API/JSON pipe to deliver things to a rich client MV* framework :)
Heh, I left the typo in cause I figured it would be valuable to show some debugging. Thanks for watching and I'm glad the videos have been useful to you :)
Hi David, thanks for this really great tutorial. Its clear me some parts of processing authentication with angularjs.
Another masterpiece, David. Keep up the awesome performance with these videos!
Yep, the interceptors are pretty powerful as is most of Angular; it's worth investing time into though, it's a great framework :)
Also, definitely interested in the security follow-up screen-cast.
***** Hey David! Thanks for these helpful Angular JS videos! Two roadblocks I've hit while following along. 1) As of today, ngRoute (docs.angularjs.org/api/ngRoute) is now a separate module that must be be downloaded, included into your html, and added to your app as a dependency. var app = angular.module("app", ['ngRoute']); 2) When you start building routesThatRequireAuth at 25:55, you're using a conditional helper from underscore.js(documentcloud.github.io/underscore/#contains) that you never explain in the video. _.contains is not a function in Angular or Javascript. (underscore.js is actually using indexOf and returning a Boolean). These videos have been a great help to me. Thank you very much for making them! :)
Hey David, really dug the intro video as well as this one! Would love to see a followup on security if you have time! :) cheers
Glad you found the casts useful :)
Great video and nice resources, and so is the first episode, definitely worth watching a few times.
BTW, I thought it was a E2E **testing** tutor at first sight, and I didn't even realize I was misreading the title until the video suddenly ends, which keeps me thinking of things like 'isn't it too much for the scaffoldin? there might not be enough time for the testing part, where is the karma thing' kind of stuff during this whole hour :)
A common setup for a single page app is to precompile all templates into Angulars $templateCache to avoid having any requests at all; if you combine this approach with a hybrid where you split the app into unauthenticated and authenticated versions, and hide all of the .js code behind a traditional login page that redirects then you can avoid any potential security issues with templates + devtools :)
Hey David, thanks for the video, that's a really helpful resource! I think it would be good to tell people that this type of client side access control is not secure. I will always be able to visit every page of the SPA without being authenticated since I can manipulate everything on the client side.
gr8 tutorials. I am trying out Spring MVC REST with AngularJS. Security is one thing that I am struggling with.
Great vid thanks!
With respect to mcrypt issues for Laravel on the mac. If you have MAMP installed, you can also just use:
export PATH=/Applications/MAMP/bin/php/php5.4.4/bin:$PATH
Where php5.4.4 is the version of php from MAMP settings
Hi Aron, one of the steps in the README file is to generate the session migration using Laravels built-in command: `php artisan session:table`. However, this seems to be a common issue so I'll just add the migration and commit it to the repo :)
Very usefull..... Great tutorial
Thanks Kevin, I'll add your request to expand on security to my screencast backlog :)
Yep! This is the technique I used in the `logsUserOutOn401` interceptor that is covered in the screencast that effectively determines if a user ever becomes logged out, hence listening for a 401. There are other ways to limit the permissions on views, another technique is to use the $routeProvider.resolve configuration property and have a resource that needs to be remote loaded before rendering the view; if the resource fails to load because the user is not authenticated the view doesn't load :)
Hi Markus, I cover this concern a little bit in this video and a follow up video called "Security with Angular JS" :)
Doh! Don't know how I missed that. Thanks!
I think you can use other js file easily by using require js and by the way thanks for awesome tutorials i am thinking of starting using angularjs with require for more maintainability and separation of code.
Thanks once again
Thanks! these two videos helped a lot!
Thanks old9, in hindsight I probably should have avoided "End to End" in the title due to the conflict with Angulars test configuration in karma :P
Would you be interested in a screencast that expanded on these examples to do end-to-end testing using Karma?
Great video Dave!
Another nice tutorial though not as clear for learning AngularJS as the first one. For someone like myself that has little prior exposure to web development it was a bit tricky figuring out just what was actually AngularJS and what was the backend stuff to support the AngularJS app.
I just wanted to add a general note on the topic of security relating to the AuthenticationService code shown here: it's definitely not production ready; there are numerous things you would have to do to make this more robust in a production setting. I have added a bunch of links in the "Resources Bundle" shown in the video description above that cover things like CSRF, and serving login forms over SSL. If there is sufficient interest I could produce a followup covering security :)
Absolutely, that would be even great! But as for E2E testing, I doubt if you have that much things to talk in order to fill another hour :)
Really enjoying these videos. I was also excited to see the use of mysql since I come from a php world. In any or your videos or could you point me in the direction of performing CRUD operations from the Angular app and the mysql database? How would I add more users? What are the best steps to take when writing to a mysql database with Angular? Is Laravel still a good option for this?
I would use $location.path and just issue a redirect to the home page if they hit the login route, you can handle this in your by listening to $routeChangeStart and checking for the /login vs /home route to determine where to redirect. I would also implement an .isAuthenticated() method on my AuthService.
Thanks David. Great video.
Hey krishyy20, thanks for watching. As far as "real world" this is about as far as I plan to take the AuthenticationService. If you are interested in learning more about security and things like CSRF in order to make a login form like this production ready I've included some good learning materials in the resources bundle linked in the video description above :)
Hey @viz, if you are interested in some discussion security you can check out the next screencast in this series "Security with Angular JS" :)
Hi David. Thanks for an great screencast! I was thinking, would it be bad practice if you used app.run listening to $routeChangeStart to check the session server side instead of handling this on the client side?
David! You are awesome. Many thanks to you. This tutorial make my life easier. God bless you. Take a lot +++ to your karma.
Yep, this one is a little more advanced as it covers integrating with a real backend :)
Thank you for this great video, but I tried your way of implementation, if i go to the browser and add key and the value in the session storage then i'm able to access the secure pages. any way to handle this?
I assume this probably gets a little deeper than the scope of the video, but the most common way would be to use a tokenized auth system. On each request you would pass the token to the API service (in this case Laravel), the service would then check the current session's status and return either the response as an HTTP 200, or a "requires login" HTTP 401 (or whatever other HTTP status code you wish given the outcome).
Edit: you can use filters in Laravel to check the status of the session on each request.
Oh.. My bad. But thanks and actually clears up following the tutorial. Awesome tutorial, thank you!
Nice tutorial! Thanks for sharing :)
thnaks, great intro video
I cover a common way to configure this in "Frontend Workflows with Grunt and Angular JS", basically it involves a separate repo for your angular code and your laravel code, and a build process with Grunt for the client-side assets which you would then just copy (using grunt-contrib-copy, if you wanted) into the Laravel public folder. Give it a watch and see if this answers some questions on how you could get a workflow setup like this :)
Im just a little confused, all of this is client side? meaning i can just alter the js and access the home page bypassing the login system?
Hi hernan, developing simple pages in this manner is indeed probably not worth the complexity; where Angular really shines is when you have more complex interactions that would traditionally involve a full page reload in the browser. Being able to manage complex pieces of state, and automatically update the DOM easily from data in memory is very powerful.
I just updated the link in the description above, try it again and see if that works. If you still can't get to it you can always click on my username and get to the list of videos I've published :)
Yes, angular works fine with jQuery and jQuery plugins; you'll probably want to wrap the jQuery plugins in custom directives instead of working with them in controllers. Typically if you need to manipulate the DOM, which is what most jQuery plugins do, you'll do it in an angular directive.
Nice tutorial! But do you really need a full scale PHP framework for a couple of simple services (login and logout)?
Thanks for the answer david,
do you think that developing this way we can make a real time applicattion just like could be made in nodejs for example
hi David, in the last commentary i forgot to say thanks a lot for this tutorials!!!
actually i have a doubt, in my applicattion front-end Can i combine angular js with jquery plugins in a way to add glam to the scene while angularjs takes care of routes, apis, responses and further.
BTW: i´m developing my web on top laravel 4 on the server-side!!
Thanks very much for the videos. Am new to singlepage apps and love your content and pace. Configure question: Laravel wants to live in folder /app/... I love the grunt test/build setup in angular-seed, but it wants front-end jive to live in /app/... Given that I'd like to be able to easily upgrade these moving parts, what's a happy way to configure bower.json/Gruntfile.js/package.json ?? If laravel gets to be boss and stay in /app, then what's the least trouble to config the rest?
hey @David Mosher.. again awsome vid!! for the security video its throwing an error when i click the link to view it (part 3 of screencast) ..is there a different link i could use to get to it or did you take it down?? jw..thanks
The security screencast is available, it's part 3 of 5 in this series, check the video description for links to the other parts :)
Thanks for the great job . i am a LINUX user who has just started using OSX after getting my new toy macbook Air , KINDLY show us how to set up the development environment , i will appreciate it and pray for you from the bottom of my heart -_-
Is there a way to prevent the home.html from being requested when you're not authenticated? Because now you'll load home.html and login.html so a malicious user can just check the contents of home.html from the network tab in developer tools.
Great video, thanks!
Injecting the resolve key into the controller seems to work in that the value is accessible, but it still generates an error : Unknown provider: [[resolve key]]Provider
Why there is no records in my "sessions" table when I'm logging in? At the moment I',m using Laravel 4.2, if this can help to resolve the problem.
I might find an answer before you reply, but I'm sure your insight would be valuable!
Great video really helpful :)
Ben Farrell has a good example on on his website on how he incorporated jQuery UI's draggable function into a directive.
Google search 'Drag and Drop with AngularJS and jQuery UI - Benjamin Farrell'
Thanks, for video. It is awesome. I think in another video you show how to make testing for angularjs, And my question is that for testing purposes you start another web server with grunt-connect and apply livereload for your javascripts. if i am going to make e2e tests with protractor and some html pages are jrendered from server how i can mount my instrumented javascript files to that karma or grunt-connect standalone server?
Thanks in advance
Thanks Timothy, there are probably a few areas that need tweaking to fit the right use case for each persons app, your approach with $locationChangeStart looks good :D
Great video! However I have some concerns about your auth method, and how you secure your routes. Basically it seems you just set a session 'authenticated' = 'true'. This is kind of easy to fake right? Do you have any opinions on a more secure login function? Or what would you recommend.
I have been searching for good tuts on angularjs + rest api auth, but haven't found any.
Thanks! If you are interested in a more robust authentication method then I suggest looking at the next video in the series "Security with Angular JS"; it's shorter and introduces the concept of $http Interceptors as well as showing how you can tie in a CSRF token to auth requests. Security with Angular JS
This tutorial is excellent! I ran into one problem with blocking navigation to the routes that require authentication. I ended up having to use the $locationChangeStart along with event.preventDefualt() to get this to work.
e.g.:
$rootScope.$on('$locationChangeStart', function(event, next, current) {
if(...) {
event.preventDefault();
$location.path('/login');
}
});
Thanks! You're pretty awesome did you know that? :)
I have another question (no the compliment wasn't a bribe :P). How would you approach redirecting already logged in users back to the home page, if they accidentally get there (as opposed to just showing the login page again)? I'm thinking that since the when() function's template property is a function that takes precedence over the templateUrl, I could do something there... but not sure if that will prevent templateUrl from taking effect.
Thanks for this great video. Gog bless you
Hi @Davidmosher you are awesome ,
Can you please create a video to how to write test cases for angularjs application using protractor (with real backend services).....
Great video, so this interceptor will take care if some hacker injects authenticated:true in sessionStorage?
The repo I found on GitHub only has users_table migration.
Hi, great tutorials. But I have a question:
This is what I did:
1. I set up two vhost on a server, and I moved the Angular part to "app.com", and Laravel part to "auth.com". (and i remove the CSRF_TOKEN and turn on the Access-Control-Allow-Origin in .htaccess)
2. When i login from the app.com/login, no problem, i'm verified and redirect to the app.com/home.
3. But, when i go to auth.com/auth/status, or do another $http.get() to that url from app.com, I always get a false as return value.
So, my question is, is this suppose to show false? or am I missing anything? If so, what do I have to do to make it show the proper status?
Thanks.
Love this tutorial. Thank you so much for all this. Only thing I miss is a way to assign a user-variable that contains id, firstname, lastname, email, created_at etc. A variable i can retrieve info from wherever in my app.
You get all this data on login. I've tried to make a scope variable there, its working but only if user logs in via angular app. If user is already logged in, and i refresh the page, that variable isnt working because its only active at login.
Do you have a tip for me? Ive been told to make a rest-controller that gets user info via $http, wich would be doable but then again, how could I retrieve\know what user-id to retrieve?... confusing me.
Also I miss a example on how i could do like, in the navbar section, like i would do in laravel;@if(Auth::check()) echo info if auth @endif..
Thank you!
how would you take into consideration of using a remember feature using angularjs
Goood question. Im wondering too...
Христо Дживторов indeed my friend
Neat, thanks!
Yes please!
hi, nice tutorial
however it seems too complicated to develop a simple page, I wonder what brings benefits thereby develop
Awesome =)
use requirejs to include as many as scripts you want..
Cool! :)
thanks for the video, very helpful. I am having error with this line of code >>
" if(_(routesThatRequireAuth).contains($location.path()) && !AuthenticationFactory.isLoggedIn()){
$location.path('/login');
} ".
The underscore inside IF statement is throwing error. how do i resovle this?
You'll need underscore.js as part of the project; the github repo includes all the code from the video and is linked in the video description :)
I usually try to keep external libraries to minimum when learning a new framework so I replaced that underscore with a for loop:
for(var i = 0, max = routesThatRequireAuth.length ; i < max ; i++){
if ( ($location.path() === routesThatRequireAuth[i]) && (!AuthenticationService.isLoggedIn() ) ) {
$location.path('/login');
}
}
Tka Griever Thank you! I coudn´t get rid of the error at all. I also try to keep the external libraries away when learning.
In this particular instance loading a whole new external library for one small functionality felt... redundant and useless. If there had been more instances that was used I propably would have just gone with underscore.
yes!
Did anybody else here encounter problems playing the mp4 file for this(at 720P) after downloading it..??