Working with multiple modules in different files in Angular js - javascript

Hello and excuse my english.
My problem is this: I'm a beginner to Angular js (currently learning with version 1.4) and I want to separate my application in two modules like this:
app.js
(function(){
var app = angular.module('store', ['store-products', 'ngAnimate', 'ui.bootstrap']);
app.controller('StoreController', function(){
...
});
app.controller('ReviewController', function(){
...
};
this.rateOnClick = function(){
...
};
this.addReview = function(product){
...
};
});
.
.
.
})();
products.js
(function(){
var app = angular.module('store-products', []);
app.directive('productTitle', function(){
...
});
app.directive('productPanels', function(){
...
});
})();
index.html
<html>
<head>
<title>My Angular App!</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<link href="styles.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
<script src"products.js"></script>
...
</html>
All of my files are in the same folder. app.js is the primary module, so as far I understand the includes are fine, but I still get the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module store due to:
Error: [$injector:modulerr] Failed to instantiate module store-products due to:
Error: [$injector:nomod] Module 'store-products' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Can't someon figure out why this is happening ?

LOL, just figured out, the problem was the line:
<script src"products.js"></script>
Fixed like this:
<script src="products.js"></script>

You need to include your products script before your app script.

Do not include store-products in your app.js code because in this [ ] we add directives and there is no directive name 'store-products'

Related

AngularJS [$injector:modulerr] no mod 'testApp' is not available

Here is my html file:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.js"></script>
</head>
<body>
<div ng-controller="TileController" class="finder-info-square">
// code....
</div>
</body>
</html>
And here is my Javascript file:
(function(){
var app = angular.module("testApp", []);
var TileController = function($scope){
// do stuff....
};
app.controller("TileController", ["$scope", TileController]);
})();
And this is the error I keep getting...
Uncaught Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:nomod] Module 'testApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Does anybody know why this error is occurring? I'm trying to create my own testApp module, but for some reason it keeps throwing this error when creating the module.
You need to include your javascript file as well as the angular library
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.29/angular.js"></script>
<script src="path/to/myscript.js"></script>

Unable to load ui.bootstrap module

I have a problem loading ui.bootstrap module in angular - I get the following error message and angular won't start:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mailingexchangeApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This is how I load the module:
var exampleApp = angular.module('exampleApp', ['ui.bootstrap']).config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[[').endSymbol(']]');
});
And this is what libraries I include, all in head section:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="/js/controllers.js"></script>
<script src="/js/ui-bootstrap-tpls-0.13.2.min"></script>
<script src="/js/modernizr-2.6.2.min.js"></script>
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/tablesorter/jquery.tablesorter.js"></script>
<script src="/js/tablesorter/tables.js"></script>
<script src="/js/jquery-ui.min.js"></script>
What's wrong? How can I solve this?
You are loading the actual js file, in your html, after you are attempting to access it:
<script src="/js/controllers.js"></script>
<script src="/js/ui-bootstrap-tpls-0.13.2.min"></script>
Any code you want to reference in controller.js, needs to be loaded before controllers.js.
So the easiest fix is to swap their position in your HTML. But it's likely that the other files will also need to be loaded first.

Angular unable to instantiate module when loaded using RequireJS

There is something really weird going on when I'm using RequireJS with AngularJS. I managed to load all my angular dependencies through RequireJS. I can see those scripts downloaded when I open up the Sources pane in Chrome's developer tool. But Angular keeps throwing an error in the console that it failed to instantiate the module:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyTestApp due to:
Error: [$injector:nomod] Module 'MyTestApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure...<omitted>...0)
It seems like Angular, when loaded with RequireJS, cannot bind with the ng-app tag in the HTML page. I'm not sure if this is the case but it seems like so to me because when I import angular.min.js manually into the HTML page, it all works fine.
Did I do anything wrong when using RequireJS with Angular? How should I use the two together? Here's how my code look:
index.html
<!doctype html>
<html lang="en" ng-app="MyTestApp">
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<link rel="stylesheet" href="css/style.css"/>
<script data-main="main" src="js/require.js"></script>
</head>
<body>
<div ng-controller="TestController">{{helloMessage}}</div>
</body>
</html>
main.js
require.config({
baseUrl: "scripts/app",
shim: {
"angular": {
exports: "angular"
},
"angular.route": {
deps: ["angular"]
},
"bootstrapper": {
deps: ["angular", "angular.route"]
},
},
paths: {
"angular": "../angular",
"angular.route": "../angular-route",
"bootstrapper": "bootstrapper"
}
});
require(["angular", "angular.route", "bootstrapper"],
(angular, ngRoute, bootstrapper) => {
bootstrapper.start();
}
);
bootstrapper.js
function run() {
app = angular.module("MyTestApp", ["ngRoute"]);
app.controller("TestController", TestController);
console.log(app); //Prints object to console correctly, ie, angular was loaded.
}
Here is how I would do it (DEMO).
In main.js, require angular, your app and maybe a controllers.js and other files:
require(['angular', 'app'], function (app) {
angular.element(document).ready(function () {
angular.bootstrap(document, ['MyTestApp']);
});
});
In app.js, require angular and angular route:
define(['angular', 'angular.route'], function() {
var app = angular.module("MyTestApp", ["ngRoute"]);
return app;
});
This is manual bootstraping and therefore does not need the ng-app tag at all.
I'm currently working on a pretty big application with angular and requirejs and I prefer to load the "big" libraries that are used by the whole app anyway independently from requirejs.
So I load one big file which includes angular, angular-route, requirejs, main.js in the beginning. Or if it makes sense to use a CDN version, load it from there. On the other hand I load every controller, directive, filter and service on request. I currently have 50+ controllers which allready makes a difference in initial load time.
But that all depends on the size of your app.
First you does not need to get a variable from the load of "angular.route". The module will be directly loaded in angular.
I think you should also wait for the dom ready event and also make a requirejs app module that will be in charge of loading all app dependencies:
app/app.js:
define([
"angular",
"angular-route",
"app/controllers",
"app/directives",
[...]
], function(angular){
var app = angular.module('app', [
"ngRoute",
"app.controllers",
"app.directives",
[...]
])
.config([function(){
// app configuration goes here
}]);
return app;
})
main.js
require(["angular", "app/app"],
function (angular, app){
angular.element(document).ready(function() {
angular.bootstrap(document, [app.name]);
});
}
);

RequireJS paths not work

I'm new to RequireJS and trying to use it. I followed an example in RequireJS docs but there is some problem. I can load the jquery but not app/shell.
Root
|__index.html
|__javascripts
|__main.js
|__libs
| |__jquery.js
| |__require.js
|__app
|__shell.js
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-main="javascripts/main.js" src="javascripts/libs/require.js"></script>
</head>
<body>
</body>
</html>
main.js
requirejs.config({
baseUrl:'javascripts/libs',
paths:{
app:'../app'
}
});
require(['jquery','app/shell'],function($,shell){
if($ && shell){
console.info('Scripts loaded');
}
});
shell.js
define(function(){
"use strict";
return{
initModule:function(){
console.info('Module init');
}
}
});
Web Console Errors
"NetworkError: 404 Not Found - http://localhost:3000/javascripts/app../default.htmshell.js"
Error: Script error for: app/shell http://requirejs.org/docs/errors.html#scripterror
Node.js Express Console Error
GET /javascripts/app../default.htmshell.js 404
Because you have multiple folder levels, you have to set your baseUrl as the root of your application. If you want to use require(['jquery']) instead of require(['libs/jquery']), you have to specify the "alias" of it in your configuration.
requirejs.config({
baseUrl:'javascripts',
paths:{
jquery: 'libs/jquery'
}
});
Try adding your main.js file explicitly after your requirejs script tag:
<script src="javascripts/libs/require.js"></script>
<script src="javascripts/main.js"></script>
This will load your configuration file synchronously after loading requirejs thus making sure the paths are set before a module is called.
Hope it helps.

Check Backbone/requireJs project with Jasmine

I have a project loaded using RequireJS and I would like to test the models.
I have the following test :
require(['../../js/models/lead_sharing'], function(Lead_sharing_Model) {
describe('when instantiated', function () {
it('should exhibit attributes', function() {
var test = new Lead_sharing_Model({
attribute : 3
});
expect(test.get('attribute')).toEqual(3);
});
});
});
But I have a error " failed with error: SyntaxError: Unexpected token"...
In reality , I don't know if it's possible to test a backbone/requireJs project with Jasmine. Indeed, how can I include my views/Models... without require config (like definition of the paths...)
Thanks you
Ps : just a small edit to specify that I would like test with a a js cmd. no in a browser. :)
It is certainly possible to test a backbone/requirejs project with jasmine. Pull the same require config used by the app into the html page that drives the unit tests. For example:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="vendor/jasmine.css">
</head>
<body>
<script src="vendor/jasmine.js"></script>
<script src="vendor/jasmine-html.js"></script>
<script src="../assets/js/libs/jquery.js"></script>
<script src="../assets/js/libs/underscore.js"></script>
<script src="../assets/js/libs/backbone.js"></script>
<!-- This points to the require config that is also used by the main app. -->
<script data-main="../app/config" src="../assets/js/libs/require.js"></script>
<script>
require({ paths: { spec: "../test/spec" } }, [
// Pull in all your modules containing unit tests here.
"spec/lead-sharing-specs"
], function() {
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().execute();
});
</script>
</body>
</html>
Since you want to run this outside of the browser, check out PhantomJS, grunt, and grunt-jasmine-task.

Categories