I am confused. If I can use ng-app only once per page how can I use directives that sit in different modules, in different .js files. Look:
<script src='mainModule.js'/>
<script src='secondModule.js'/>
<body ng-app='mainModule'>
<my-thingy/>
<div>
<other-thingy/>
</div>
</body>
mainModule.js:
angular.module("mainModule",[]).directive("myThingy",function(){ ... })
secondModule.js:
angular.module("secondModule",[]).directive("otherThingy",function(){ ... })
So, how do I now point to the secondModule on the page, without referencing it from mainModule.js
#Agzam, just create a third, top-level, application module that will have dependencies on your sub-modules containing directives:
<script src='mainModule.js'/>
<script src='secondModule.js'/>
<script>
angular.module('app', ['mainModule', 'secondModule'])
</script>
<body ng-app='app'>
<my-thingy/>
<div>
<other-thingy/>
</div>
</body>
There is a solution to bootstrap several angular modules on a page programmatically ( docs ).
You have to remove ng-app attribute from html.
Define several modules:
var app1 = angular.module('myApp1', []);
var app2 = angular.module('myApp2', []);
app1.controller('MainCtrl', function($scope) {
$scope.name = 'App1';
});
app2.controller('MainCtrl', function ($scope) {
$scope.name = 'App2';
})
And then in index.html do:
<html>
<head></head>
<body>
<!-- Module 1 -->
<div id="myApp1">
<div ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
</div>
</div>
<!-- Module 2 -->
<div id="myApp2">
<div ng-controller="MainCtrl">
<h1>Hello {{name}}</h1>
</div>
</div>
<!-- Bootstrap modules -->
<script>
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('myApp1'), ['myApp1']);
angular.bootstrap(document.getElementById('myApp2'), ['myApp2']);
});
</script>
</body>
</html>
Here is a working plnkr with this solution.
Related
I am trying to add more than one ng-app in a application ,how to register the both ng-app and let me know what is the use of using more than one ng-app?
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.
var app1 = angular.module('app1', []);
app1.controller('Ctrl1', function ($scope)
{
$scope.name = "Angular";
});
var app2 = angular.module('app2', []);
app2.controller('Ctrl2', function ($scope)
{
$scope.name = "Developer";
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="app1">
<div ng-controller="Ctrl1">
<span>{{name}}</span>
</div>
</div>
<div id="app2">
<div ng-controller="Ctrl2">
<span>{{name}}</span>
</div>
</div>
</body>
</html>
Why am i getting an injection error?
https://jsfiddle.net/pvaq1ywh/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Controller">
{{greeting}}
</div>
</div>
JS
var myApp = angular.module('myApp',["firebase"]);
myApp.controller('Controller', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
On the JS pane, click settings, and set the load type to No wrap - in <body>.
It probably wasn't working because the script was executed before your dependencies were loaded.
Here i am trying to call partial view from controller using angular js.
here is my code
<div ng-repeat='t in tabs'>
<div ng-include='t.templateUrl'></div>
<div>
when i try to include like ng-include="'/home/menutemplate'" it will includes the content. How can i dynamically do this? . Help me
t.templateUrl should be valid scope variable and should hold a string(path for the template):
$scope.t.templateUrl = "/home/menutemplate"
And in your template:
<div ng-include="t.templateUrl"></div>
It's exactly like what you did like this example
angular.module("app", []);
angular.module("app").controller("ctrl", function ($scope, $rootScope, $filter) {
$scope.templates = [
{url: "/Application/Partials/home.html"},
{url: "/Application/Partials/page2.html"}
]
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
</head>
<body>
<div class="container">
<div ng-repeat="temp in templates">
<div ng-include="temp.url"></div>
</div>
<script type="text/ng-template" id="/Application/Partials/home.html">
<h1>home.html is here</h1>
</script>
<script type="text/ng-template" id="/Application/Partials/page2.html">
page 2 is here
</script>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</body>
</html>
I have the following angular sample app:
<html ng-app="theapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
</head>
<body>
<div ng-controller="bootstrapper">
<p>This is the bootstrapper</p>
<p><button ng-click="loadtemplate1()">Load Template1</button></p>
<p><button ng-click="testalert()">Test Alert</button></p>
</div>
<script type="text/html" id="template1">
<div ng-controller="template1">
<p>This is template one {{1+5}}</p>
</div>
</script>
<script type="text/javascript">
angular.module('theapp',[])
.controller('bootstrapper',function($scope){
//alert('bootstrapper controller');
$scope.testalert=function(){
alert('call from testalert');
};
$scope.loadtemplate1=function(){
var html=document.getElementById('template1').innerHTML;
document.getElementsByTagName('body')[0].innerHTML=html;
};
})
.controller('template1',function($scope){
alert('template1 controller');
});
</script>
</body>
</html>
All I'm trying to achieve is to dynamically load a controller from some html string which resides in the same page.
However, I need some help, as this current setup doesn't seem to work.
Here is my code there are two different applications in which two different controllers but the later one is not running. Why is this happening both of these are two different modules?
<!DOCTYPE html>
<html>
<head>
<title>EggHead IO</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/lib/angular.js"></script>
<script>
var app=angular.module('ctrldemo', []);
app.controller('FirstCtrl', function($scope){
$scope.name="yashdeep",
$scope.age="21"
});
var papa=angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function($scope){
$scope.name="yamini";
$scope.age="22"
});
</script>
</head>
<body>
<div ng-app="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting"/>
<div>
{{greeting+" "+name+" "+age}}
</div>
</div>
<div ng-app="anodemo" ng-controller="anoFirstCtrl">
<input type="text" ng-model="greeeting">
<div>
{{greeeting+" "+name+" "+age}}
</div>
</div>
</body>
</html>
If you want to run multiple angular apps, you will need to manually bootstrap the apps using angulars .bootstrap()
var app = angular.module('ctrldemo', []);
app.controller('FirstCtrl', function ($scope) {
$scope.name = "yashdeep",
$scope.age = "21"
});
angular.bootstrap(document.getElementById('ctrldemo'), ['ctrldemo']);
var papa = angular.module('anodemo', []);
papa.controller('anoFirstCtrl', function ($scope) {
$scope.name = "yamini";
$scope.age = "22"
});
angular.bootstrap(document.getElementById('anodemo'), ['anodemo']);
You will also need to remove the ng-app from the HTML
<div id="ctrldemo" ng-controller="FirstCtrl">
<input type="text" ng-model="greeting" />
<div>{{greeting+" "+name+" "+age}}</div>
</div>
<div id="anodemo" ng-controller="anoFirstCtrl">
<input type="text" ng-model="greeeting">
<div>{{greeeting+" "+name+" "+age}}</div>
</div>
Fiddle: http://jsfiddle.net/03qj5pwf/
Whether or not this is a good idea, I'm not too sure. I think it would be better to inject the modules into the app.
There can only be one ng-app in a page and angular can only be bootstrapped once.
In order to use separate modules you need to have one master module and inject other modules into it as dependencies
var app=angular.module('ctrldemo', ['anodemo']);
<html ng-app="ctrldemo">
Now you can use controllers, services, directives etc from either module
If you are going to do it at all the best way would be by using a directive. Which is what I did. It's called ngModule. Here is what your code would look like using it:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>