Why is my javascript file not loading?

Why is my javascript file not loading? - javascript

I'm new to both JavaScript & AngularJS. I'm building an app which talks to a building management system: it has a module called 'JaceMod' containing a service to contact the BMS and retrieve data from it. I'm adding functionality to graph data using Dygraphs, and I've created a directive to instantiate a graph and populate it with data.
I would like to put my Dygraphs directive into a module called 'dygraphs', in a separate file 'angular-dygraphs.js', so I can re-use it later, and require this module as a dependency in 'JaceMod'. Like this:
'use strict';
console.log('Loading angular-dygraphs.js');
angular.module('dygraphs', []);
angular.module('dygraphs').directive('mrhDygraph', function ($parse) {
return {
...etc ...
};
});
And then the main file 'app.js':
'use strict';
console.log('Loading app.js');
angular.module('JaceMod', ['dygraphs']);
angular.module('JaceMod').factory('JaceData', function ($http, $timeout) {
var JaceDataService = {};
...etc ...
return JaceDataService;
});
angular.module('JaceMod').controller('myCtrl', function myCtrl($scope, JaceData) {
JaceData.initialise($scope);
JaceData.subscribe($scope);
});
The html looks like this:
<html lang="en" ng-app="JaceMod">
<head>
<meta charset="utf-8">
<title>AngularJACE</title>
<style type="text/css">
body {font-family: Trebuchet MS,Helvetica,Arial,sans-serif; }
</style>
</head>
<body ng-controller="myCtrl">
<div mrh-dygraph="graphData"
mrh-dygraph-options="{xlabel: 'Local Time', legend: 'always',
showRangeSelector: true, labels: ['Time', 'Outside'],
ylabel: 'Temperature (ºC)', height: 420}"
style="width: 100%; height 420px;"/>
<script src="dygraph-combined.js"></script>
<script src="angular.js"></script>
<script src="angular-dygraphs.js"/>
<script src="app.js"></script>
</body>
But when I load this html, I see my console message 'Loading angular-dygraphs.js', followed by an eror 'Error: No module: JaceMod'. I never see the log message in app.js. If I switch the load order of the last 2 javascript files round, I see that app.js loads and the error message is 'Error: No module: dygraphs'. The second listed file seems never to be loaded.
If I copy the code from angular-dygraphs.js into app.js, leaving the directive in its own module, it works.
Why is this happening? Is it not possible to put modules in their own files, or something? The documents haven't been much help...
EDITED TO ADD
The html & js files are all in the same directory, including the dygraphs & angular libraries. I'm loading the html from file, no server involved.
UPDATE
I copied everything from angular-dygraphs.js into app.js, and commented out the entirety of angular-dygraphs.js: still getting the problem, app.js does not load.

Your angular-dygraphs.js script tag isn't closed so it never reads app.js. Script tags cannot be self-closing:
<script src="angular-dygraphs.js"/>
should be
<script src="angular-dygraphs.js"></script>

Related

Issue with angular-route.min.js | Error Chrome Console [$injector:modulerr]

!!Total beginner here!!
I have run into an error - chrome console gives me an error regarding:
[$injector:modulerr]
The problem is that I have not installed angular-route.min.js which is what you're supposed to do in all angular versions after 1.2. My trouble began when I installed angular-route.min.js, put it in the same file as angular and my HTML files, referenced it in the code with <script src="angular-route.min.js"></script> but nothing happened.
I also put angular.module('app.js', ['ngRoute']); into my js file.
There are no typos in my code, I checked for those. On top of all that the console gives me an error saying angular-route.min.js was not found.
All help welcome, I have spent a long time googling but nothing came of it.
(function () {
'use strict';
angular.module('MSgApp', []);
controller:('MsgController', MsgController);
angular.module('app.js', ['ngRoute']);
MsgController.$inject = ['$scope'];
function MsgController($scope) {
$scope.name = "Chris";
$scope.stateOfBeing = "hungry";
$scope.sayMessage = function () {
return "chris likes to eat cookies";
};
$scope.feedChris = function () {
$scope.stateOfBeing = "fed";
};
}
})();
<!DOCTYPE html>
<html ng-app='DIApp'>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
<title>custom attributes</title>
</head>
<body>
<div ng-app="app.js"></div>
<h1>expressions and interpolation</h1>
<div ng-controller='MsgController'>
{{name}} has a message for you: <br>
{{sayMessage()}}
<div>
<button ng-click="feedChris()">Feed chris</button>
<br>
<img ng-src="D:/stuff/coursera angular/chris_{{stateOfBeing}}.png">
</div>
</div>
</body>
</html>
Errors after unminified both angular and angular-route

As per StackOverflow --> Angular JS Uncaught Error: [$injector:modulerr]:
EDIT: This is what ultimately solved the issue and what Chris B did to make it work :
I have come across another code in the Coursera course and this one seems to be working after putting the three links from the answer by #ulmer-morozov into the head tag instead of referencing files on my pc. I guess that's it,
From Answer of #ulmer-morozov:
In development environments I recommend you to use not minified distributives. And all errors become more informative! Instead of angular.min.js, use angular.js.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">
From Accepted Answer #Lauri Elias:
Try adding this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
From Answer of #Khanh TO:
Try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js">
and:
angular.module('MyApp', ['ngRoute','ngResource']);
function TwitterCtrl($scope,$resource){
}
You should call angular.module only once with all dependencies because with your current code, you're creating a new MyApp module overwriting the previous one.
From angular documentation:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.

Angular 4 how to lazy load controller/module js files from S3?

I don't have a backend to run angular, just static js/html files in S3, how to lazy load controllers/modules that are stored as static files inside S3?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="https://raw.githubusercontent.com/ocombe/ocLazyLoad/master/dist/ocLazyLoad.js"></script>
</head>
<body>
<h3>Lazy load succeded if you can see 'Hello world' below</h3>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController"></div>
<script>
angular.module("LazyLoadTest", ["oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile) {
$ocLazyLoad.load("https://github.com/ocombe/ocLazyLoad/raw/master/examples/simpleExample/js/testApp.js").then(function() {
console.log('loaded!!');
var el, elToAppend;
elToAppend = $compile('<say-hello to="world"></say-hello>')($scope);
el = angular.element('#example');
el.append(elToAppend);
}, function(e) {
console.log('errr');
console.error(e);
})
});
</script>
</body>
</html>
I know about ocLazyLoad but only works for angular 1

Angular 4+ has a lazy loading option built into the routes. The Angular.io docs help explain how to accomplish that here.
https://angular.io/guide/lazy-loading-ngmodules
Keep in mind, Angular 4+ talks about "preloading", which may be the solution you are showing above. That would mean that after the initial load, all of the other modules will be queued up to load as well. You can read up on that here.
https://angular.io/guide/router#preloading-background-loading-of-feature-areas
As far as serving it from an AWS s3 bucket - You can create an angular app using the Angular CLI, then use "ng build --prod" to build dist files, and throw them in the bucket. Then whenever your index file is called it will bootstrap the rest of the Angular 4+ app with lazy loading.
The getting started guide can be found here.
https://angular.io/guide/quickstart

Extjs 5 class not found when lunch application

I am using Extjs 5.0.1, trying to implement basic app. This is my folder structure:
Project
app
controller
model
store
view
MainView.js
app.js
OtherFolder
index.html
Note: index.html file is in other location than app.js
This is my index.html file
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script type="text/javascript" src="../Project/app.js"></script>
</head>
<body>
<div id="tables"></div>
</body>
</html>
this is my app.js file:
//app.js
Ext.define('GestioneTit.app.Application',
{
extend: 'Ext.app.Application',
name: 'GestioneTit',
launch: function(){
Ext.create('GestioneTit.view.MainView');
}
});
Ext.application('GestioneTit.app.Application');
This is my MainView.js file:
//MainView.js
Ext.define('GestioneTit.view.MainView',
{
extend: 'Ext.tab.Panel',
tabPosition: "left",
tabRotation: 0,
width: 900,
height: 1000,
activeTab: 0,
items: [
{
title: 'Tab 111111111111111111111111111111 22111221',
html: 'A simple tab'
}],
renderTo: "tables"
});
The problem is when I lunch my application I view this error in console:
[W] [Ext.Loader] Synchronously loading 'GestioneTit.view.MainView'; consider adding Ext.require('GestioneTit.view.MainView') above Ext.onReady
SCRIPT5022: [Ext.create] Unrecognized class name / alias: GestioneTit.view.MainView
I have follow the guides in the official Sencha website, but it seems not working.
I analyzed the http request and I noticed a 404 when the loader try to load the MainView.js file. It produce a wrong url.

In a typical ExtJS application, you place your source code in a folder called app directly under the folder you put the index.html file in. You haven't done that – as a result, the Ajax request to load the view class goes to the wrong place (as you've seen).
What you need to do is tell ExtJS where your code lives. And for that, Ext.Loader.setPath is your friend.
For example: Ext.Loader.setPath('GestioneTit', '../Project/app')
http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.Loader-method-setPath

Try adding the view to the views config in Application.js:
Ext.define('GestioneTit.app.Application',
{
extend: 'Ext.app.Application',
name: 'GestioneTit',
views: [
'GestioneTit.view.MainView'
],
launch: function(){
Ext.create('GestioneTit.view.MainView');
}
});
Ext.application('GestioneTit.app.Application');

Adding angular directive with javascript files as package

I am writing a directive that I want other people to reuse.
The problem I encounter is that my directive has several js files it uses, and if I want others to use it, they need to add the js files explicitly.
Is there a way to make the directive include those files so that other will only have to add the directive file?
The way it works today is by adding the js files in the main head html file.
Can I use tamplateUrl to load the js files? Iv'e seen in THIS post that loading scripts creates some problems.
Concrete Example:
index.html:
<body data-ng-app="example">
<test-dir></test-dir>
</body>
index.js:
(function(angular){
var app = angular.module('example', []);
app.directive('testDir', function(){
return{
restrict: 'E',
templateUrl: 'test-me.html'
}
});
})(window.angular);
test-me.html:
<script type="text/javascript" src="test.js"></script>
<div> TEXT </div>
test.js:
function testMe() {
console.log('blah');
}
This format will call the directive and I will see the div TEXT text. BUT, I can't call the function testMe and I don't see any transfer in the network for test.js which is included in the directive's template.
How can I make it work?

Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

This is my demo using angularjs, for creating a service file, and adding service to a controller.
I have two problems with my demo:
One is when I put <script src="HomeController.js"> before <script src="MyService.js"> I get this error,
Error: [ng:areq] Argument 'HomeController' is not a function, got undefined
The other is when I put <script src="MyService.js"> before <script src="HomeController.js"> I get the following error,
Error: [$injector:unpr] Unknown provider: MyServiceProvider <- MyService
My source:
File Index.html:
<!DOCTYPE html>
<html >
<head lang="en">…</head>
<body ng-app="myApp">
…
<div ng-controller="HomeController">
<div ng-repeat="item in hello">{{item.id + item.name}}</div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<!-- App libs -->
<script src="app/app.js"></script>
<script src="app/services/MyService.js"></script>
<script src="app/controllers/HomeController.js"></script>
</body>
</html>
File HomeController.js:
(function(angular){
'use strict';
var myApp = angular.module('myApp',[]);
myApp.controller('HomeController',function($scope,MyService){
$scope.hello=[];
$scope.hello = MyService.getHello();
});
})(window.angular);
File MyService.js:
(function(angular){
'use strict';
var myApp = angular.module('myApp',[]);
myApp.service('MyService', function () {
var hello =[ {id:1,name:'cuong'},
{id:2,name:'nguyen'}];
this.getHello = function(){
return hello;
};
});
})(window.angular);

This creates a new module/app:
var myApp = angular.module('myApp',[]);
While this accesses an already created module (notice the omission of the second argument):
var myApp = angular.module('myApp');
Since you use the first approach on both scripts you are basically overriding the module you previously created.
On the second script being loaded, use var myApp = angular.module('myApp');.

I experienced this error once. My problem was that I wasn't adding the FILE_NAME_WHERE_IS_MY_FUNCTION.js
so my file.html never found where my function was
Once I add the "file.js" I resolved the problem
<html ng-app='myApp'>
<body ng-controller='TextController'>
....
....
....
<script src="../file.js"></script>
</body>
</html>

Also ensure that your controllers are defined within script tags toward the bottom of your index.html just before the closing tag for body.
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>
provided everything is spelled "correctly" (the same) on your specific.html, specific.js and app.js pages this should resolve your issue.

Happened to me few times whenever I miss "," between list of injections and function
app.controller('commonCtrl', ['$scope', '$filter',function($scope,$filter) {
}]);

I also experienced this error but in my case it was because of controller naming convention. I declared controller: "QuestionController" in .state but in controller definition I declared it like
yiiExamApp.controller('questionController' ...
but it should be
yiiExamApp.controller('QuestionController' ...
hope that helps to people facing this error because of this stupid mistake I wasted 4hour in identifying it.

I also encountered this same error and the fix for me was to include my child module in the main module array.
var myApp = angular.module('myApp', ['ngRoute', 'childModuleName']);

If ALL ELSE fails and your running locally on the MEAN stack like me with gulp...just stop and serve again! I was pulling my hear out meticulously checking everything from all of your posts to no avail till I simply re-ran gulp serve.

I got the same error. I defined java script like this
<script src="controllers/home.js" />
then I changed to the this
<script src="controllers/home.js"></script>
After this my problem is solved.

I had similar issue. The fix was ensure that your ctrollers are not only defined within script tags toward the bottom of your index.html just before the closing tag for body but ALSO validating that they are in order of how your folder is structured.
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/Administration.js"></script>
<script src="scripts/controllers/Leaderboard.js"></script>
<script src="scripts/controllers/Login.js"></script>
<script src="scripts/controllers/registration.js"></script>

I also encountered this problem in my project. It eventually worked after I inserted the my-controller.js into my karma.conf.js file, with the <script> tag.
Hope this will help. There are quite many reasons that can lead to this problem.

I also got this error.
I had to add my new controller to routing information.
\src\js\app.js
angular.module('Lillan', [
'ngRoute',
'mobile-angular-ui',
'Lillan.controllers.Main'
])
I added my controller to make it look like
angular.module('Lillan', [
'ngRoute',
'mobile-angular-ui',
'Lillan.controllers.Main',
'Lillan.controllers.Growth'
])
Cheers!

Obviously that previous posts are useful, but any of above are not helpful in my case. The reason was in wrong sequence of loading scripts. For example, in my case, controller editCtrl.js depends on (uses) ui-bootstrap-tpls.js, so it should be loaded first.
This caused an error:
<script src="scripts/app/station/editCtrl.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
This is right, works:
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/app/station/editCtrl.js"></script>
So, to fix the error you need first declare all scripts without dependencies, and then scripts that depends on previously declared.

Try this
<title>My First Angular App</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<h3>Adding Simple Controller<h3>
<div ng-controller="SimpleController">
Name:
<br/>
<input type = "text" data-ng-model = "name"/> {{name}}
<br/>
<ul>
<li data-ng-repeat = "cust in customers | filter:name | orderBy:'city'">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
<script>
var angularApp = angular.module('angularApp',[]);
angularApp.controller('SimpleController', [ '$scope', SimpleController]);
function SimpleController($scope)
{
$scope.customers = [
{name:'Nikhil Mahirrao', city:'Pune'},
{name:'Kapil Mahire', city:'Pune'},
{name:'Narendra Mahirrao', city:'Phophare'},
{name:'Mithun More', city:'Shahada'}
];
}
</script>
</body>

In my case, I was missing the name of the Angular application in the html file. For example, I had included this file to be start of my application code. I had assumed it was being ran, but it wasn't.
app.module.js
(function () {
'use strict';
angular
.module('app', [
// Other dependencies here...
])
;
})();
However, when I declared the app in the html I had this:
index.html
<html lang="en" ng-app>
But to reference the Angular application by the name I used, I had to use:
index.html (Fixed)
<html lang="en" ng-app="app">

I was getting the error because i had added the controller script before the script where i had defined the corresponding module in the app.
First add the script
<script src = "(path of module.js file)"></script>
Then only add
<script src = "(path of controller.js file)"></script>
In the main file.

Error: ng:areq Bad Argument has gotten me a couple times because I close the square bracket too soon. In the BAD example below it is closed incorrectly after '$state' when it should actually go before the final parenthese.
BAD:
sampleApp.controller('sampleApp', ['$scope', '$state'], function($scope, $state){
});
GOOD:
sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){
}]);

Yes. As many have previously pointed out,
I have added the src path to all the controller files in the index.html.
<script src="controllers/home.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/signup.js"></script>
This fixed that error.

I had the same problem, but I forgot to include the file into grunt/gulp minimization process.
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
}
}
}
});
Hope that helps.

In my situation this error appeared when I didn't declare function within an array argument.
The one with error:
taskAppControllers.controller('MainMenuCtrl', []);
The fixed one:
taskAppControllers.controller('MainMenuCtrl', [function(){
}]);

Also check for spelling mistakes.
var MyApp = angular.module('AppName',[]);
MyApp.controller('WRONG_SPELLING_MyCtrl', ['$scope', MyControllerCtrl])
function MyControllerCtrl($scope) {
var vm = $scope;
vm.Apple = 'Android';
}
<div ng-controller="ACTUAL_SPELLING_MyCtrl">
{{Apple}}
</div>

Check if your HTML page includes:
angular.min script
app.js
controller JavaScript page
The order the files are included is important. It was my solution to this problem.
Hope this helps.

sampleApp.controller('sampleApp', ['$scope', '$state', function($scope, $state){
Same thing for me, comma ',' before function helped me in fixing the issue -- Error: ng:areq Bad Argument

My controller file was cached as empty. Clearing the cache fixed it for me.

I accidentally moved my HomeController.js out of the directly, where it was expected.
Putting it again on original location.
After that my website started to load pages automatically every second, I was even unable to look at the error. So i cleared the browser cache. It solved the problem

For me the solution was to add a semicolon after one of the functions declared in my HomeController.js
//Corrected code is :
app.controller('HomeController', function($scope, $http, $log) {
$scope.demo1 = function(){
console.log("In demo");
} //Here i forgot to add the semicolon
$scope.demo2 = function(){
console.log("In demo");
};
});

Develop Reference

JavaScript is the programming language of the Web.

Why is my javascript file not loading? - javascript

Your angular-dygraphs.js script tag isn't closed so it never reads app.js. Script tags cannot be self-closing: <script src="angular-dygraphs.js"/> should be <script src="angular-dygraphs.js"></script>

Related

Issue with angular-route.min.js | Error Chrome Console [$injector:modulerr]

Angular 4 how to lazy load controller/module js files from S3?

Extjs 5 class not found when lunch application

Adding angular directive with javascript files as package

Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

Categories

Resources