Thomas Burleson Angular and RequireJS

AI Dev Craft · 35K views · 2014 · 20:06

Open on YouTube

Web developmentSoftware architecture & designtalkdated

Why Stack Overflow recommends it

Stack Overflow users link it when asked whether and how to use RequireJS with AngularJS, treating it as the canonical conference talk on the topic.

Recommended by 5 people across 4 different months, 2014 to 2017.

What it is

A 20-minute talk from ng-conf 2014 in which Thomas Burleson explains how to combine AngularJS with RequireJS for asynchronous module loading. It covers why the two tools complement each other and how to wire them together in a larger single-page app.

What people said

Strong rec gskalinskii · 2014-10 · Stack Overflow · on “Does it make sense to use Require.js with Angular.js?”

here is a great video that explains why it's a good idea and shows how to use requireJS with angularJS [this video]

Recommends Eugene Kostrikov · 2014-03 · Stack Overflow · on “Differences between AngularJS injector and NodeJS require module”

Well... They have nothing in common. Node's require() synchronously loads file contents when Angular's $injector manages services. If i understand correctly what you want to do, you may find this video helpful [this video]

Recommends Yahya KACEM · 2014-03 · Stack Overflow · on “How to re-use code between AngularJS client and Node.js server”

Using RequireJS [LINK] for this make sense here. Instead of defining your model/service inside of Angular like this: (function (angular) { "use strict"; angular.module('myModule').factory('MyModel', function (Deps) { var Model = function () { // do things here }; return Model; }); }(window.angular)); You would do it this way splitting it in 2 files: model.js: (function (define) { "use strict"; define([], function () { var factoryConstructor = function (deps) { var Model = function () { // do things here }; return Model; }; return factoryConstructor; }); }(window.define)); whatever.js (function (define, angular) { "use strict"; define(['Model'], function (Model) { angular.module("myModule").f

Recommends Gaute Løken · 2014-07 · Stack Overflow · on “Embedding AngularJS in existing jquery/bootstrap based website”

To chunk up your appliation so that only the relevant parts are instantiated etc. what you need is angular ui-router [LINK] . You would then set up a parent state for your tab-control with child states for each of your tabs. That way you both get deep linking and the performance you want with loading only the relevant tab. As for requirejs, I encourage you to firstly consider if you really need it. In my opinion the javascript making up an angular application is usually much terser than a jquery application due to the declarative nature of the technology. Therefore loading all of the javascript at boot-time is ok. Your templates however may not be as simple, but by using templateUri referenc

Recommends SDH · 2017-05 · Stack Overflow · on “Using require js with angular js”

Require JS will give you a package dependency manager, concatenator/uglifier, javascript file loader, and an injector. Require JS injectors are used for injecting classes versus Angular, which is used to inject instances. The big advantage is that RequireJS is going to speed up your application by managing your load and runtime dependencies. It's useful for big SPA's. You can set up your file structure by defining all of your dependencies using "define". For functions to execute, you will need to use "require". Here is a helpful video: [this video]

Cites Dalorzo · 2014-01 · Stack Overflow · on “Does it make sense to use Require.js with Angular.js?”

Short answer is, it make sense. Recently this was discussed in ng-conf 2014. Here is the talk on this topic: [this video]

Cites Victor · 2014-08 · Stack Overflow · on “ng-view doesn't evaluate bootstrap javascript (css and so on)”

My problem is, when Angular load templateUrl (through $routeProvider) inside ng-view it doesn't evaluate all javascript as well. I tried to figure it out, but now i'm really confused. During my search i found a lots of new topic, and i've lost in them. Any idea? Tale I tried to figure it out if anybody else met this problem before, or if there are any solution for this problem. The way i've found was something like "lazy-loading" directives or using requirejs, but i'm not sure if those tools are really solves this problems. As Buu Nguyen mentioned in this thread [LINK] That's the way jqLite works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is