quick question, kinda dumb. Let's say you have your web app with an index.html and app.js where you want to place all your angularjs modules. Does the app.js need to be located to the same place the angular library is?
Or it doesn't actually matter since you will be loading both angularjs and your app.js at the index.html?
app.js would contain something like:
var app = angular.module("myApp", []);
Is the message var app undefined just a matter of letting js know that this var is a global var?
It doesn't matter. You just include the correct script source paths in the script tags.
Related
I am working on a React project. I have a file script.js which I want to use in every component of my application. This script.js has multiple plugins and codes in it. For example, there is a plugin code for portlet (a jquery plugin) in it. Each part of scripts code is used by some components. I want declare this script.js globally and then each component should refer to this script if there is some code relevant to that component.
I have included this script.js in my index.jade file.
script(src="/public/scripts.js")
How should I include it in every component or how should every component refer to it?
At the top of each file you need the methods in, declare each method you need
import {functionName, functionName1, functionName2} from '../folder/filename.jsx'
Then you can use the functions anywhere in that file like this
var number = functionName();
The code from official website is not working, getting blank at Plunker, only two places modified:
script.js, var module = angular.module to var m = angular.module
as Plnkr complains about "Redefinition of module".
index.html, explicitly declare height for gridOptions.
You have <script src="scripts.js"></script> when your file is named script.js
Make sure the file reference is the same as in this plnkr
As a side note, it is best to debug your applications by tackling the errors in the order that they appear, sometimes fixing the 404 not found will fix anything that angular wants to complain about...
I was following a tutorial for creating a MEAN stack project with Google Maps integration. I finished the project without any problems, thus, I stopped working on it. When I came back to check on it, it just doesn't work anymore. I didn't change anything with the code. I even pulled a previously working commit from my repository but the error
[$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=scotchApp&p1=Error…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387)
is still there. I really don;t have an idea what went wrong because this was previously working fine. I hope someone could help.
EDIT. Here's a part of the 'gservice' service of my project.
// Creates the gservice factory.
// This will be the primary means by which we interact with Google Maps
angular.module('gservice', [])
.factory('gservice', function($rootScope, $http) {
The problem is here: components.html
<!-- Client Scripts -->
<script src="../app/client/routes/script.js"></script>
<script src="../app/client/service/gservice.js"></script>
<script src="../app/client/service/aservice.js"></script>
Your scotchApp module is defined in script.js as:
var scotchApp = angular.module('scotchApp', ['ngRoute',
'ngCookies',
'controllerStoreDetail', 'controllerStoreCategory',
'controllerStoreQuery', 'controllerUserDetail',
'controllerUserAuthentication', 'geolocation',
'gservice', 'aservice',
'datatables'
]);
It has a dependency on gservice, aservice etc. But those files are loaded after script.js. So while loading your module (script.js), angular is not able to find definition for those services. You need to make sure that all dependencies are loaded before script.js.
#devqon had asked this question:
Is your js file which declares the gservice module included before the
js file which declares the scotchApp module?
To which you answered:
#devqon Yes it is. I really find this case weird as it was really working perfectly for weeks until now.
Which doesn't seem to be the case.
Rectify the sequence in which you are loading JS files and the error will be gone.
I fixed the problem. The cause was a missing 'v=3' in the src of the script for loading the Google Maps API. I still don't why that's the case as the project was previously working properly.
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 want to use $templateCache service to add some html into the cache. In Angular documentation example, it only shows the case of using it in run:
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
However, when I am trying to add some templates through myApp config, there seems to be injector error. Is there a way to use templateCache not in RUN?
Thanks
run is the correct place to use the $templateCache. Since $templateCache is a service, it's not accessible in the configuration phase, because it hasn't been created yet. config is used to configure services (like $templateCache) using their providers. You can only inject providers to config.
My opinion is that, most of the time, you shouldn't be writing code that accesses $templateCache directly at all. What you should be doing is using a build system such as gulp and a plugin such as gulp-angular-templatecache.
Then your templates are simply a bunch of .html files, your editor recognises them as html and does the appropriate linting while you edit, and all you have to do is ensure your app declares a dependency on the template module.
So the code you gave above would become:
var myApp = angular.module('myApp', ['myappTemplates']);
and the use of $templateCache inside .run() is pushed down to automatically generated code that you never see.