Writing a Massive Angular App at Google NG Conf
Why Stack Overflow recommends it
Stack Overflow users link it when answering AngularJS questions about authorization, conditional module loading, sharing code between controllers, and going beyond $resource.
Recommended by 17 people across 12 different months, 2014 to 2017.
What it is
A 2014 ng-conf talk by Ido Sela of Google's DoubleClick team on building a very large AngularJS application. It covers code reuse patterns, extending $resource for custom server communication, authorization and conditional loading of features, and sending user data in the initial HTML.
What people said
Strong rec Todd Richardson · 2014-05 · Stack Overflow · on “How can I add a module to my application after it has started up without using require.js?”
Ido Sela talks about authorization in an Angularjs app and how they handle loading (or unloading) of modules here: [this video] I would definitely look at this as it will give you some of the best guidance I have seen for how to handle authorization and loading of modules conditionally. (It's how I should have been handling it in my prototype, and will in future versions once I have some time to clean it up.) If you do need to authorize after bootstrapping the application and then need to conditionally load modules, you might consider making this a server concern. For instance, using a script loading mechanism of some sort, only render the logic based on the authorization of the request. For exam
Strong rec EricC · 2015-05 · Stack Overflow · on “Alter $resource default methods”
I found a talk at ng-conf 2014 [this video] by Googles DoubleClick team that was a real good answer to this question and beyond. Basically they create a apiProvider that uses and extends $resource. They also have a github gist [LINK] that would be too long to include here.
Recommends Beyers · 2014-01 · Stack Overflow · on “Recommended authentication UX in AngularJS SPA with own and external (Google, FB...) profiles”
I can only comment on my own experience, maybe it is helpful. We use the same stack as you, Asp.net MVC + Web API + AngularJS. We use server-side MVC for authentication (Microsoft.AspNet.Identity), since we are not exposing a public API at this stage and the only consumer of the API will be our SPA this works perfectly with the least amount of effort. This also enables us to set a UserContext Angular service on the server once logged in that can be shared through your entire Angular app, the Google Doubleclick Manager guys goes into some of the benefits of this approach during there ng-conf presentation [this video] . Since Web Api supports Asp.Net Identity, authentication and authorization works
Recommends vucalur · 2014-01 · Stack Overflow · on “Recommended authentication UX in AngularJS SPA with own and external (Google, FB...) profiles”
By no means am I familiar with Microsoft backends, but still I'll give it a try ;-) : Good resources on how the authentication/authorisation should be done in Angular-based SPA: [LINK] live demo: [LINK] As you requested there are 2 methods of authenticating: own profile external providers. It redirects to the provider website though :-/ NodeJS on the backend Good ng-conf talk on how authorisation is done in Google Doubleclick Manager application: [this video] It's not quite what you want (authentication), but the solution begins to kick in on the authentication phase. Furthermore it may be useful later and the approach Ido is presenting seems really sound. Slides: [LINK] Last but not least: Maste
Recommends calebboyd · 2014-01 · Stack Overflow · on “Returning User Roles to an AngularJS app from ASP.NET Identity using OAuth and bearer tokens”
ng-conf happened a few days ago and a nicely thought out solution was presented. Here is the link to the video [this video] . He talks about authorization for ~10 minutes. Basically it involves providing an activeUser service to your app and then conditionally loading directives based on features described in that service. As for getting roles... var userRoles = await UserManager.GetRolesAsync(User.Identity.GetUserId()); // or if not async var userRoles = UserManager.GetRoles(User.Identity.GetUserId()); update Since your conclusion, I might suggest something like this: - link [LINK] - It is basically the solution spoken about at ng-conf but it's rendered inside a web-api controller. Forgoing the
Recommends Alexander Puchkov · 2014-01 · Stack Overflow · on “Create a service to change the username on screen when logging in using angularjs”
Check this video [this video] from Google Double Click team how they approached various various challenges building Angular App. At the very beginning they explain how they send user information from server and store it Angular. Short summary: include user details as JSON payload to HTML document itself, then use service to store and access this data.
Recommends rob · 2014-02 · Stack Overflow · on “Update controller $scope on factory change”
I know this isn't really the problem your having but another way create multiple instances of a class (e.g. your Call class) is to use the $controller service. This approach was recommended in the Writing a Massive Angular App at Google NG Conf [this video] Talk. Here is an example: html: <div ng-app="myApp" ng-controller="myCtrl as ctrl"> instance1: {{ctrl.instance1}} instance2: {{ctrl.instance2}} </div> JS: var myApp = angular.module('myApp', []); myApp.controller('Foo', function() { var Foo = function($log) { this.$log = $log; this.sampleField = 1; } Foo.prototype.increaseSampleField = function() { this.sampleField++; this.$log.info('sample field is now: ' + this.sampleField); }; return Foo; }
Recommends Pieter Herroelen · 2014-02 · Stack Overflow · on “AngularJS (Restangular CRUD , Simplify / DRY Controllers?)”
There was a presentation on code organisation at ng-conf. They also talk about sharing code between controllers. You should check it out: [this video]
Recommends SimplGy · 2014-02 · Stack Overflow · on “The Angular Way to Organize and Compose Objects”
Paraphrased from @jelbourn [LINK] in this slideshow [LINK] , there are 3 ways: Inheritance Mixins Object Composition Pages 14, 15, and 16 in the slides talk about these options in more depth. What he ends up recommending (if I understand correctly) is using #3 Object Composition most of the time and treating controllers and services like classes: app.ZipCodeFieldController = function(){} app.ZipCodeFieldController.prototype.autocomplete = function() {} You can then mix in prototypal controllers: app.PaymentFormController = function($scope, ZipCodeFieldController, $controller) { $scope.zipCode = $controller(ZipCodeFieldController) } And use them in the template neatly: <input type="text" name
Recommends Busata · 2014-03 · Stack Overflow · on “Best practices for authentication and authorization in Angular without breaking RESTful principles?”
Not entirely relevant, but this might interest you: [this video] (The first part handles authentication, they generate the index.html server side & include the profile there, I'm using the same technique in my app)