I have my test example in this plunkr link
My question is NOT DUPLICATE of this one
Also the Google Result and Github Bug was about the bug reporter not defining the module which he was trying to bootstrap in the first place
I have 3 modules grandParentModule, parentModule and nestedModule.
I have bootstrapped parentModule and nestedModule to 2 nested div elements and they are working fine.
But as soon as I try to bootstrap grandParentModule to document, it is throwing a console error.
This is my HTML
<div id="parent" ng-app="parentModule">
<div id="nested">
</div>
</div>
And this is my SCRIPT
angular.module('grandParentModule', []);
angular.module('parentModule', []);
angular.module('nestedModule', []);
var nestedElem = document.getElementById("nested");
angular.bootstrap(angular.element(nestedElem), ['nestedModule']);
//comment / uncomment this line to toggle the error at console
angular.bootstrap(document, ['grandParentModule']);
Only this line angular.bootstrap(document, ['grandParentModule']); is causing the error
Uncaught Error: [ng:btstrpd] http://errors.angularjs.org/1.5.5/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22parent%22%20ng-app%3D%22parentModule%22%26gt%3B
Can anyone explain to me why is it happening?
This isn't how works angular bootstrapping.
You're supposed,to bootstrap only one module.
If you use multiple independant module, the DOM element where you bootstrap them must not be nested.
Furthermore what are those module supposed to be ?
If they're linked then they must have dependencies between them ie :
angular.module('parentModule', ['grandParentModule']);
If you want to have some nested views with their own controller use either multiple ng-controller or check ui-router on the net.
Related
In the tutorial:
http://www.w3schools.com/angular/angular_modules.asp
"A module is created by using the AngularJS function angular.module."
However, the module is already existent in the div tag defined before
<div ng-app="myApp">...</div>
Then what is the significance of the quoted statement above?
Danke / Dhonnobad (I hope it doesn't get deleted :) )
angular.module in fact creates module - your app configuration, so when angular process html and found ng-app directive - it will instantiate your app using that configuration.
In terms of i.e. Java you can say angular.module creates Class,
when <div ng-app="myApp"> creates instance.
The module is a container for the application controllers and directives, in general.
Incase you mention in index.html as,
<div ng-app="myapp"> ..</div>
And you maintain a separate javascript file for controller codes and directive codes, to avoid messing up in html file in between script tags, consider in index.js, You give it as
var app=angular.module("myapp",[])
And then you can add controllers like ,
app.controller("mycontroller",function($scope){
//javascript code
});
This is how controller functions act upon module specified. Hope this suffice.
I am working on an application, Where multiple ng-app are defined and used. Initially ng-app on different pages were not conflicting as all the pages were independent but now I have to include a header and header has its own ng-app defined.
I am using two different methods to avoid conflict of header app with other pages app.
First method:
Bootstrapping an app manually on each page:
angular.bootstrap($('#mycontact_container'),['contactsApp']);
OR
angular.element(document).ready(function() {
angular.bootstrap($('#topNavigation'),['headerApp']);
});
Second method:
angular.module("rootApp", ["headerApp", "contactsApp"]);
Where rootApp is an App defined in body tag that will include entire application within it. headerApp is an app defined on header of each page and contactsApp is app of one custom html page.
First method error:
Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=headerApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fmodulerr%3Fp0
Error on OR part of First method:
Error: [ng:btstrpd]
http://errors.angularjs.org/1.4.8/ng/btstrpd?p0=%26lt%3Bsection%20id%3D%22topNavigation%22%20class%3D%22top-navigation%20ng-scope%22%20ng-app%3D%22headerApp%22%26gt%3B
...f e?JSON.stringify(e):e;d+=c(e)}return Error(d)}}function
za(a){if(null==a||Xa(a...
i.e app is already bootstrapped.
Second Method issue:
No errors but when I try to use interpolate provide in one of my app which is included in header i.e it will be included throughout application using below code:
headerApp.config(['$interpolateProvider',
function($interpolateProvider) {
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
}
]);
app.controller('MainController', ['$scope', '$http',function MainController($scope, $http) {
$scope.first_name = "abc";
});
I get nothing printed using {$ first_name $} in my view. Ultimately my app is misbehaving. I have posted this issue in different post SO question
Can Anyone guide me what exactly I need to follow to correct the behaviour of my application with existing architecture.
I guess only angular experts can guide me well here.
Please let me know if more detailing is required.
Update
I was facing following error when I was manually bootstrapping app:
Error: [ng:btstrpd]
because I was using ng-app within html. When manually bootstrapping app then ng-app is not required.
I am trying to experiment with examples and tutorials at http://docs.angularjs.org/guide/expression and the examples are not working in plunker and jsfiddle. I am getting this error in the console
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=App&p1=Error%3A%…eapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0rc1%2Fangular.min.js%3A27%3A198)
Is this a known error?
JSFiddle in particular has always been difficult to get working with AngularJS. The HTML section isn't meant to take an entire HTML document. Instead, you need to configure the workspace to work with Angular following these steps:
Under external resources, add the Angular script (remember to click the + icon)
Under Fiddle Options change the body tag to include ng-app like so: <body ng-app>
That should get you started. If you don't mind using an older version of Angular (1.1.1), you can select it from the "Frameworks & Extensions" drop down and change the 2nd drop down from onLoad to No wrap - in <body>.
See here for a working example from the docs: http://jsfiddle.net/jPtb3/
And here for the optional approach using 1.1.1: http://jsfiddle.net/5nA2H/
Update
There's some misinformation in the comments.. The docs ARE actually creating angular.module for you, but they're passing in an empty dependency. So you can either remove ="App" (not best), or you fix the angular.module declaration by removing the empty dependency (best) like so:
angular.module('App', []);
I do not truly understand why it is necessary to do an angular.bootsrap document, ['MyApp'] at the end of my CoffeeScript code that manages the module and controllers in the following test application:
This is the HTML:
<div ng-app='InventoryModule' ng-controller='InventoryController'>
<ul ng-repeat='item in items'>
<li>{{item.title}}</li>
<li>{{item.price | currency}}</li>
</ul>
</div>
And the CoffeeScript:
inventoryModule = angular.module 'InventoryModule', []
inventoryModule.factory 'Items', ->
items = {}
items.query = () -> [{title: 'Hello', price: '5'}]
items
inventoryModule.controller 'InventoryController', ($scope, Items) ->
$scope.items = Items.query()
angular.bootstrap document, ["InventoryModule"]
If you remove the last line, the applicatoin won't work. Why is that? This is not truly explained anywhere else.
This is a fiddle of the code:
http://jsfiddle.net/dralexmv/8km8x/11/
As you can see the application actually works. If you remove the bootstrap it will stop working.
Tl;dr
Set the second drop-down in jsFiddle to "No wrap - in <head>" and you won't need angular.bootstrap line.
FIDDLE
Explanation
When Angular library is loaded it will scan the DOM looking for element with ng-app directive. When it finds one it will begin the bootstrapping proces.
In that process Angular will take the value of ng-app attribute (in your case that's InventoryModule) and will try to find an angular module with the same name. If it fails it will throw: Uncaught Error: No module: <module name>.
In your fiddle you have set the "Code Wrap" select box to "onLoad".
This drop-down instructs jsFiddle when to initialize the JS code that you've put in JS frame. When it's set to "onLoad", the code will run in onLoad window event.
On the other hand, Angular bootstrapping process will run on $(document).ready(), and because $().ready event is fired before "onLoad" event, Angular will try to init the InventoryModule module before the module is even defined, and that's where the dreaded "No module" error will be thrown.
angular.bootstrap() is a manual way of doing the same thing that Angular already does in it's $().ready() handler.
Take a look at the error console. Your code throws an exception:
Uncaught Error: No module: InventoryModule
I think it has something to do with it. Manually bootstrapping by calling angular.bootstrap seems to workaround the actual problem.
In the project of Vojta about testing directives What does this code do ?
// load the tabs code
beforeEach(module('tabs'));
It says it loads the tabs code but, why ? Isn't the tabs module already defined next here ?
var tabs = angular.module('tabs', []);
Can some one give a brife explanation of what should be loaded why and how in angular test ?
I tried to call this function in my tests, like this
beforeEach(module('utils')) ;
and I get this error :
TypeError: Property 'module' of object [object Object] is not a function
Also when I try load my templates like this
beforeEach(module('templates/loadingBar.html'));
I get this error :
Error: No module: templates/loadingBar.html
I am really confused about the whole process.
Thanks for helping ...
The code you listed
var tabs = angular.module('tabs', []);
creates the tabs module, but in order to load it you probably put something like ng-app="tabs" on an element in your DOM. This instructs Angular to load the tabsmodule and make its definitions available to the injector that the app uses to resolve dependencies. (See the Bootstrap guide for more information.)
In your tests, there is no ng-app directive to initialize the injector or load your module; the module function (which exists on angular.mock from the angular-mocks.js file) does this for you in tests. If you use the Karma Jasmine or Mocha adapter for testing, it makes module available to you, otherwise you may need to call angular.mock.module instead.