Is there a way to define an angular module inside another module ? I have a template in my web application which is called for almost every page of the application. In the template definition I set the ng-app. So for this ng-app I can declare the modules I need in all pages of the application (or almost every page). Now there are some modules I want to add only on specific pages. The problem is that in those pages I already have the ng-app of the template.
So is there a way to keep the ng-app as some kind of root ng-app which declared the modules I need everywhere and then add specific modules inside specific pages too ?
That means is it possible to do something like this:
<div ng-app="rootApp">
<div ng-app="specificApp">
...
</div>
</div>
The rootApp contains the module that are declared in my template, that are use in all the pages, and the specifiApp contains the modules I need only in one specific page.
Thanks !
[EDIT] Bootstrap attempt:
var reportHolidaysByEmployeeApp = angular.module('reportHolidaysByEmployeeApp', ['fitnetApp', 'ui.bootstrap']);
angular.bootstrap(document.getElementById("reportHolidaysByEmployeeApp"), ['reportHolidaysByEmployeeApp']);
reportHolidaysByEmployeeApp.controller('ReportHolidaysByEmployeeCtrl', function($scope, $filter, $timeout) {
fitnetApp is the global Module I load on the html tag in every page
Only one AngularJS application can be auto-bootstrapped per HTML
document. The first ngApp found in the document will be used to define
the root element to auto-bootstrap as an application. To run multiple
applications in an HTML document you must manually bootstrap them
using angular.bootstrap instead. AngularJS applications cannot be
nested within each other. --
http://docs.angularjs.org/api/ng.directive:ngApp
See also
https://groups.google.com/d/msg/angular/lhbrIG5aBX4/4hYnzq2eGZwJ
http://docs.angularjs.org/api/angular.bootstrap
If you are having separate controllers for your pages[views] , add dependency in your controller module to [rootApp] or [spcificApp] as your page needs.
$routeProvider.when('/view1',{
template:
controller:view1controller
})
if u need rootApp as dependency in view1 page
in your controller module
angular.module('GlobalCtrl',['rootApp'])
.controller('view1controller')
'
You cannot have two ng-app in a single web page.
If you need to add dependency module on specific page use
angular.module('reportHolidaysByEmployeeApp').requires.push('thirdpartymodule');
This will dynamically inject dependency in your already running angular application.
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.
How and why is <body ng-app> used? How can we assign controllers, directives etc to this nameless module. Also explain how this is related to manually bootstraping the Angular App.
Fiddle
This is actually three separate questions, but I'm happy to tackle each one.
How and why is used?
Angular will not and cannot properly bootstrap the application unless there is an entrance point to that application. According to the documentation, if a parameter is not passed that names the app instance, angular will attempt to auto-bootstrap the application for you by crawling the DOM and using the first ngApp directive instance that it is encountered.
We typically want to place our entrance point on the <body> element to encompass all the potential DOM we need without cluttering it with <head> elements, such as loading scripts and css. That said, if you are auto-bootstrapping your application, the recommended placement is on the HTML element.
How can we assign controllers, directives etc to this nameless module?
Modules, controllers, etc MUST be attached to something in order for Angular to pick them up and interopt with them correctly.
Once the application is bootstrapped, Angular will begin parsing the DOM, looking for directives. If you have an application instance (and you do), your controllers will be automatically be added to that instance. If you look at the bootstrap documentation -> Automatic Initialization, you'll find the following:
Angular initializes automatically upon DOMContentLoaded event or when
the angular.js script is evaluated if at that time document.readyState
is set to 'complete'. At this point Angular looks for the ng-app
directive which designates your application root. If the ng-app
directive is found then Angular will:
load the module associated with the directive.
create the application
injector compile the DOM treating the ng-app directive as the root of
the compilation. This allows you to tell it to treat only a portion of
the DOM as an Angular application.
How the heck is the fiddle working?
This one is actually smoke and mirrors that really shouldn't count :). If you look at the network traffic for JSFiddle, you'll find that AngularJS is actually being loaded. As a result, your interpolation is actually getting automagically bound to the JSFiddle Angular instance, not one that you provide yourself (or in this case didn't), parsed, and subsequently rendered into the DOM as 2.
Per angularjs.org:
"The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags."
In other words, ng-app is what makes your html become an Angular application, thus being able to use the {{ }} in your code. These brackets are able to carry out operations, which is why you're able to calcuate 1 + 1. If you were to use variables, however, you would need to attach an ng-controller to a container div and initialize a Controller.
It's the equivalent of ng-app="". However, you need a namespace to attach controllers, directives. etc too. Angular can interpolate {{ 1 + 1 }} without a namespace, but you won't be able to bind anything to the views scope. Interestingly enough ng-app=" " is a namespace you can bind to.
https://jsfiddle.net/n3hygcnd/3/
if you have the following:
<html ng-app="outerApp">
<head ng-app="innerApp"></head>
<script>
var outerApp = angular.module("outerApp", []);
var ACtrl = outerApp.controller("ACtrl", function($scope){console.log($scope.name);});
var BCtrl = outerApp.controller("BCtrl",function($scope){console.log($scope.name});
var CCtrl = innerApp.controller.("CCtrl", function($scope){ console.log($scope.name);});
var innerApp = angular.module("innerApp", []);
</scope>
Is this ok? is angular a global variable that will work for declaring modules out of both innerApp and outerApp? Also are there limits to number of ng-app's on a page? And do both ACtrl, and BCtrl have reference to the same $scope?
Thanks
This won't work because:
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
See documentation
$rootscope,$scope are conceptually global variables, whom you can implement to achieve as global variables for sharing data between the modules,directives,controllers,views.
you should read conceptually DI(Dependency Injection) and how the conceptual framework implements in angular. you can inject the dependencies.
angular.module('modulename',[]);
[] is an array in which you define that module is dependant on the other module. in Other words.
Angular framework concepts works the injectable way DI(Dependency Inject).
however i strongly suggest you, what you trying to achieve is the right path is, you should make a simple custom directive and inject it as a dependency in the angular app.
I am trying to introduce myself into angularjs.
Although i have worked through the tutorial and watched the basic building videos, i am still struggling with the behaviour and architecture of a more-or-less large scale application.
My application has a menubar that includes an add-button. If the user clicks the button, i want a dialog to pop-up. That dialog is not part of the menu:
<!-- The menu -->
<header class="mod modHeader" ng-controller="HeaderCtrl">
<div class="modHeader__addProject" ng-click="openAddDialog()">
<i class="icon-plus icon-2x"></i>
</div>
</header>
<!-- the dialog -->
<div class="modNewProject" ng-show="properties.AddDialogVisibility" ng-controller="HeaderCtrl">
<!-- content stripped out -->
</div>
My intention was to create a properties object inside the scope of my HeaderCtrl controller, then change a boolean value on click of the said button.
// HeaderCtrl
function HeaderCtrl($scope){
$scope.properties = {
"AddDialogVisibility": false
};
$scope.openAddDialog = function () {
$scope.properties.AddDialogVisibility = true;
};
}
Now, there are multiple issues and questions:
I have to apply HeaderCtrl to my dialog in order to get access to the properties object. This is nasty to me, HeaderCtrl should control only my header module, shouldn't it?
The dialog won't show up on click. I found out that this is because the property gets checked only once, on page load, and that i would have to use a function. What is a proper way to achieve my goal?
Conclusion:
I would say that i can summarize my question to:
I use a Controller for each section of my page. How do they communicate?
In the sample code you provided, two HeaderCtrls will be created. Each use of ng-controller will create a controller.
To share data in Angular, use a service. Inject that service where needed – into controllers, directives, etc.
When designing an Angular app, try to think in terms of models (which are often contained in services, and those services then expose model APIs to the rest of the application) and views. A controller is just the glue that allows us to project the relevant parts of our models into a view.
Dialogs are a special/unique case, since they don't take up a specific place in the rest of the application. Listen to a few minutes of Misko regarding this subject.
I would also recommend looking at how the Angular-UI team implemented dialogs: http://angular-ui.github.io/bootstrap/#dialog
angular structure
app->
assets->
css -> all css file
js -> all js file
partials-> all html files
vender -> third party file (like angular.js , jquery.js)
router.js
services.js
filter.js
directives.js
controllers.js
index.html
New to Angular. I feel like I'm missing something obvious: Shouldn't I easily be able to run to separate AngularJs apps (modules) in the same html page? Something like this:
<section ng-app="HelloWorldApp" ng-controller="HelloWorldController">
Hello {{name}}!
</section>
<br />
<section ng-app="MyNameIsApp" ng-controller="MyNameIsController">
My Name is {{FirstName}} {{LastName}}!
</section>
Javascript:
var HelloWorldApp = angular.module('HelloWorldApp', []);
HelloWorldApp.controller('HelloWorldController', function($scope) {
$scope.name = 'World';
});
var MyNameIsApp = angular.module('MyNameIsApp', []);
MyNameIsApp.controller('MyNameIsController', function($scope) {
$scope.FirstName = 'John';
$scope.LastName = 'Smith';
});
This only runs the first module, while the second doesn't appear to do anything. I want to do this so that I can build reusable, encapsulated directives for multiple pages that don't have to name their modules the same thing.
Live Example: http://plnkr.co/edit/cE6i3ouKz8SeQeA5h3VJ
We ended up building small hierarchy of modules, however my original question can done, with just a bit of work (see below).
It is possible, but it requires a little bit coding by hand. You need to bootstrap the angular apps on your own. Don't worry, it is not that complicated
Do not add ng-app attributes in your HTML
Make sure you can fetch the DOM elements holding the app
When DOM is loaded you need to start the apps on your own: angular.bootstrap( domElement, ['AppName']);
Fork of you plunker which works: http://plnkr.co/edit/c5zWOMoah2jHYhR5Cktp
According to the Angular docs for ngApp:
Use this directive to auto-bootstrap an application. Only one
directive can be used per HTML document. The directive designates the
root of the application and is typically placed at the root of the
page.
Seems it's by design.
You can specify any nested apps in the module def of the main one.
angular.module("myapp", ['statusapp', 'tickerapp']).controller(....
and in a separate file, you have the other apps defined. We're using a template engine which hides some of this, but you'll end up with HTML that contains nested ng-apps and javascript for each one that defines the module/controller. The code above is the trick to getting more than one bootstrapped.