In a very basic Angular app we have
<head>...
<script src="app.js"></script>
<script src="maincontroller.js"></script>
App defines the app module, and controller then hangs off app as app.controller("MainController..") If the order of the two scripts is reversed, the app will throw an error "app is not defined".
Is there a way around this load order dependency? My fear is that as it becomes more complex, I will get script order dependencies. And perhaps I might want to load my scripts async as well.
Thank you.
See, for example, this plunker: http://plnkr.co/edit/kqVqTHxl4tc6mIV5bDbQ
I've defined SomeService in an own file, svc.js. I've defined the module and the main controller in app.js. And even though the MainController depends on that service that "loads later", the dependency is figured out, and injected. All you should worry about is: put the module definition first.
Also: Don't store the application inside a global variable called app, instead, use angular.module with the name of the module to retrieve a reference to it:
angular.module('SomeModuleName').controller(...)
Any kind of global variables are generally not a good practice.
Look at using Angular and Browserify or Angular and RequireJS. Browserify and RequireJS are module loaders that let you keep 1 script reference in your index.html.
Browserify is based on a build step that will bundle all your JS into 1 file.
RequireJS is an Asynchronous Module Definition (AMD) loader, that can load your files asynchronously.
Related
I found a nodejs module that I would love to be able to include in my Angular app. I read around and saw that I can do this by running browserify on it. After doing this, I have referenced the new file in my html, but I don't know what to do after that. Where do I need to reference it to get it in angular scope? Here is the github repo I want to be able to access
https://github.com/whatadewitt/yfsapi
After I browserify the files in the node_modules folder, I have one big js file. The usage for this in Node is
var YahooFantasy = require('yahoo-fantasy');
// you can get an application key/secret by creating a new application on Yahoo!
var yf = new YahooFantasy(
Y!APPLICATION_KEY,
Y!APPLICATION_SECRET
);
It seems it needs a require here, but isn't that the whole reason I ran browserify in the first place? What am I missing here?
From the Browserify website:
Browsers don't have the require method defined, but Node.js does. With
Browserify you can write code that uses require in the same way that
you would use it in Node.
The point of Browserify is to give you a module system in the browser and to allow you to require files. It's incredibly useful and allows you to easily include Node modules and modularize your own app.
To use the Node module you're referencing in an Angular app, you would do basically exactly what the demo shows in either a controller or service. Personally, I'd probably recommend creating a service that wraps the Node module and exposes methods to interact with the Yahoo Fantasy servers; I probably wouldn't put it on $scope unless you absolutely had to for some reason.
Here's some pseudo-ish code:
var yf = require('yahoo-fantasy');
function YFantasyService (<dependencies>) {
this.someMethod = function () {
return yf.doStuff();
}
}
YFantasyService.$inject = [<dependencies>];
module.exports = YFantasyService;
Register your service (this is how my app is structured...there are plenty of other ways to write and register services but you get the idea):
angular.module('YFantasyApp', [<dependencies>])
.service('YFantasyService', require('./YFantasyService'));
Then inject it into other services and controllers and do whatever you want with it.
If you want to build a bundle that contains yahoo-fantasy - so that you can use it with minimal changes to your existing code - you can use the Browserify API:
var browserify = require("browserify");
browserify()
.require("yahoo-fantasy", { expose: "yahoo-fantasy" })
.bundle()
.pipe(process.stdout);
That will generate a bundle that contains yahoo-fantasy module and all of its dependencies and will expose a global require function that you can call to access said module:
<!doctype html>
<html>
<head>
<title>so-40120643</title>
</head>
<body>
<script src="./bundle.js"></script>
<script>
console.log(require("yahoo-fantasy"));
</script>
</body>
</html>
If you want to use a different name for the global require function, you can use Browserify's externalRequireName option.
I am trying to use angular-chart.js in my application, though i'm getting the following error:
Error: [$injector:nomod] Module 'chart.js' is not available
I have followed suggestions from other questions to include Chart.js before angular-chart.js in the html file, though this didn't work for me.
Here are the versions of the libraries i've installed:
Here is my directory structure:
app/
----libs/
------Chart.js/
----------src/
------------chart.js
------angular-chart.js/
--------dist/
----------angular-chart.js
----------angular-chart.css
--index.html
Here is the link to the libraries installed with bower in my index.html:
<!-- Import the graph library -->
<script src="../libs/Chart.js/src/chart.js"></script>
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
<!-- CSS too -->
<link rel="stylesheet" href="../libs/angular-chart.js/dist/angular-chart.css">
I am trying to inject chart.js module into my controller like so:
angular.module('DeviceCtrl', ['chart.js']).controller('DeviceController', function($routeParams, $scope, $http) { }
Any suggestions? Thanks!
The error seems to indicate that angular-chart.js is not loaded before your script is executed, you need to load it after angular and chart.js are loaded but before your script is executed.
Nit: css should be loaded at the top of the html whereas javascript files should be loaded at the bottom after the body close tag.
Can you provide a complete repro step using this template?
I'm not familiar with the angular-chart library, but I see a few issues with what you've got so far. First, the script tag for the angular-chart has a stray "xmlns" attribute that must have come from an xml document:
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
It probably isn't hurting anything, but I'd remove it just to make sure you're not giving the browser heartburn.
Next, you state
I am trying to inject chart.js module into my controller
The chart.js module only contains directives. You can't really inject it into your controller, you can only state the dependency at the module level. The readme on GitHub has a good basic setup example for this set of directives. There is one factory, ChartJsFactory, that you could inject into a controller, but it looks like it's mostly meant to be used by the directives.
The next thing I noticed is that you're including a dependency for $routeParams in the controller, but your module, DeviceCtrl, doesn't have a dependence for ngRoute included. You could either include angular-route.js, and a dependency for 'ngRoute' in the configuration of your module, or remove $routeParams.
I've developed a commenting plugin for Umbraco that uses angular. As such the main angular app for the site has to inject the comment systems module for it to work.
E.g.
var theirSite = angular.module('someApp', []);
Injected
var theirSite = angular.module('someApp', ['theCommentSystemModule'];
In my comment system,
angular.module('theCommentSystemModule']....;
Is there any way my module can automatically detect the angular app and inject itself without the code for the site having to be updated? I want it to just work with nothing but the script link.
For Example: say these are the scripts
<script src="...angular.js">
<script src="...services.js">
<script src="...directives.js">
<script src="...commentsPlugin.js">
<script src="...theirApp.Js">
So what I basically need, is some kind of callback from angular when the app is being bootstrapped, so I can inject the comment systems module into the app as a depedency module so that it will initialize in their bootstrap layer.
Or maybe, alternatively, I bootstrap the page myself in the plugin for itself? Can there be two apps running at once, e.g. if I bootstrap and their app also bootstrap's .
It can be done by using undocumented requires module property. This way new dependencies can be added to the module after it was defined but before it was bootstapped.
Since 'ng' is the only known and defined module ATM (it also has already defined requires array), tamper it:
angular.module('ng').requires.push('theCommentSystemModule');
Though it is more appropriate to let the users load the module by themselves.
Yes, I know this has been asked ad infinitum here, and I already know the general rule that when using requirejs, everything that calls define() must be loaded through a single script tag as in:
<script src="js/lib/require.js" data-main="js/main"></script>
but I find myself in a position where the general advice offered with respect to this common error is not sufficient for solving my particular problem, which on the surface seems pretty simple.
I am working on an angular, requirejs, and WinJS (just to keep things interesting) app, and have run into a problem with this error. My main html file does indeed load several other JavaScript source files using separate script tags but none of them call define(). I checked. Twice. Okay, three times. All other JS source files in the app are loaded through a single script tag similar to the above. Yet I still get this error.
I tried giving each of my app modules a requirejs identifier:
define('myModule', ['dep1', 'dep2', etc.], function(dep1, dep2) {
return angular.module('app.mymod', ['winjs', etc.]);
});
but with this approach angular modules that depend on the angular module defined as above cannot resolve that dependency (although requirejs is now perfectly happy).
The three JS files being loaded outside requirejs are:
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<script src="js/lib/dynamic-content-shim.js"></script>
Where the latter patches the WinJS runtime to allow dynamic content creation. The WinJS runtime does actually expose a define function in its own namespace, but it is completely unrelated to requirejs.
So what gives?
Today I've adopting Browserify for my AngularJS project, but there is something that's very unclear to me. In all examples and blog posts I've seen stuff like this:
/app.js:
require('./messages');
angular.module('sling', ['sling.messages']);
/messages/index.js:
exports = angular.module('sling.messages', [])
.controller('MessagesListCtrl', require('./MessagesListCtrl'));
/messages/MessagesListCtrl.js:
module.exports = function() {
// ...
});
Sure, this works, but why do this? I've implemented it like this and that works absolutely fine too and feels more normal for an AngularJS project:
/app.js:
require('./messages');
angular.module('sling', ['sling.messages']);
/messages/index.js:
angular.module('sling.messages', []);
require('./MessagesListCtrl');
/messages/MessagesListCtrl.js:
angular.module('sling.messages').controller('MessagesListCtrl', function() {
// ...
});
In other words, I'm completely skipping the exports/module.exports, only using require to basically include the files with the controllers, services, filter, etc.
Am I doing this right? I mean it all works, but am I going to be in trouble later on?
The main (and honestly only) reason to use Browserify is if you want to have CommonJS modules (i.e. NodeJS modules) in the browser. A CommonJS module stays out of the global scope by having an implicit 'module' scope. You choose what to expose from the module scope (usually the entry point or primary function of your module) into by augmenting the 'exports' object that every module has.
So a 'real' CommonJS module looks like this.
File A:
// a.js
function doSomething() {
console.log("I am doing something");
}
module.exports = doSomething
File B:
// b.js
doSomething();
// Exception - attempt to call a non-existent function
File C:
// c.js
var doSomething = require('a');
doSomething();
// logs "I am doing something"
In the browser which has no module scope, a.js would be augmenting the global scope with the doSomething function, since it's declared as a global. Browserify works around this by wrapping each bundled module into a function wrapper, and supplying an 'exports' object to the included modules as an argument to this wrapper.
Enter AngularJS. You've got two approaches you can use here, of which I'm assuming from the fact that you're not using require('angular') is the first:
Include AngularJS as a hard-coded script available in your index.html before your Browserify-transpiled bundle script.
Shim AngularJS so that it is attached to an exports object rather than the window (using something like browserify-shim), then importing it using require like any other module.
I tend to prefer the second approach because it's kind of weird to use Browserify to give you module scope and then make the major dependency of your project a window global.
However, AngularJS already has its own dependency-injection driven module system. When you declare angularJS components, you're attaching them to module objects which themselves have been attached to the angular object. This means that the exports object for your angularJS module files is essentially redundant in the case of Angular, since as long as the file executes then the angular object will be augmented with your module and components.
You still need to 'require' the files since otherwise Browserify won't bundle them, they'll never execute, and they'll never augment the angular object with your modules. But you don't need to add anything to the exports for Angular, since the angular object is your exports.
So why did I spend all this time explaining how CommonJS modules and exports work? Because hopefully the other reason why you are using Browserify is to allow you to make use of modules hosted on NPM in your browser application. Most of those modules are non-angular commonJS modules, meaning their functionality is exposed via an exports. In this case it's important to capture their exports in a variable when you require them, such as I'm doing in c.js above. Similarly, if you write some modules and release them to NPM, your users are going to expect you'll be adding the entry point to your module to the exports object of the file declared as main in your package.json.