Techniques for authentication in AngularJS applications — Opinionated AngularJS. The magic of $resource (or simply a client-side Active Record) At first sight AngularJS seems like a magical framework, which does some weird but awesome things like dependency injection, data binding only by setting a single property to the magical object named $scope and many other things.
If you look at the source code of Angular you’ll see a lot of smart and simple solutions for these magical problems. In this blog post I’ll describe the magic which stays behind $resource. I decided to write this blog post because of my recent experience in StackOverflow. One of the most misunderstood components of AngularJS was exactly the $resource service.
$resource is two levels of abstraction above the XMLHttpRequest object (ok, may be three if we count $httpBackend). Before continuing with $resource I’m going to explain few important concepts. Active Record This is architectural pattern named by Martin Fowler. For example: In the example above we have User constructor function, which also has methods query and save. Lexical functional scope. Pretty URLs in AngularJS: Removing the # By default, AngularJS will route URLs with a hashtag.
For example: It is very easy to get clean URLs and remove the hashtag from the URL. There are 2 things that need to be done. Configuring $locationProviderSetting our base for relative links $location Service In Angular, the $location service parses the URL in the address bar and makes changes to your application and vice versa. I would highly recommend reading through the official Angular $location docs to get a feel for the $location service and what it provides.
$locationProvider and html5Mode We will use the $locationProvider module and set html5Mode to true. We will do this when defining your Angular application and configuring your routes. What is the HTML5 History API? Setting For Relative Links To link around your application using relative links, you will need to set a <base> in the <head> of your document. There are plenty of other ways to configure this and the HTML5 mode set to true should automatically resolve relative links. AngularJS Best Practices: Directory Structure. Let’s get to best practices and what you should be doing to build scalable and maintainable AngularJS apps that your coworkers will love you for.
An ideal AngularJS app structure should be modularized into very specific functions. We also want to take advantage of the wonderful AngularJS directives to further compartmentalize our apps. Take a look at a sample directory structure below: app/----- shared/ ---------- sidebar/--------------- sidebarDirective.js --------------- sidebarView.html ---------- article/--------------- articleDirective.js --------------- articleView.html ----- components/ ---------- home/--------------- homeController.js --------------- homeService.js --------------- homeView.html ---------- blog/--------------- blogController.js --------------- blogService.js --------------- blogView.html ----- app.module.js ----- app.routes.js assets/----- img/ ----- css/ ----- js/ ----- libs/ index.html index.html The index.html lives at the root of front-end structure.
Service, factory et provider dans AngularJS. AngularJS est un framework difficile à prendre en main.
Pas parce qu’il est particulièrement compliqué, mais parce que ses concepts sont vraiment différents de ceux qu’on a l’habitude de rencontrer dans les frameworks habituels. Le pire, c’est quand on vient de jQuery, car Angular est un peu l’anti-jQuery et il faut littéralement désapprendre ses habitudes. Généralement, les gens s’en sortent avec les contrôleurs. Ils ne mettent pas le bon code dedans, ils ne savent pas comment rendre les bouts de code indépendants et réutilisables, mais ils arrivent à en faire quelque chose.
Les directives, ils n’y touchent pas, mais ils peuvent s’en passer pendant un certain temps et juste réutiliser du code trouvé sur Github. Par contre le côté service/factory/provider, ça c’est un gros problème. Article long = musique, évidement. Que font ces trucs là ? Techniquement, un service, une factory ou un provider, dans AngularJS, ça sert à la même chose. Oui, oui, c’est vraiment tout. Et c’est tout. Du coup :