i have code like this
<div ng-app="">
<script type="text/ng-template" id="/tpl.html">
I am from a template.
</script>
<div ng-include="'/tpl.html'"></div>
</div>
<script> angular.module('a', []);</script>
<div ng-app="a">
<script type="text/ng-template" id="/tpla.html">
I am from a template a.
</script>
<div ng-include="'/tpla.html'"></div>
</div>
<script> angular.module('b', []).controller('myCtrl', function ($scope) {});</script>
<div ng-app="b" ng-controller="myCtrl">
<script type="text/ng-template" id="/tplb.html">
I am from a template b.
</script>
<div ng-include="'/tplb.html'"></div>
</div>
the output is :
I am from a template.
why when i use "ng-include" inside a module it doesn't work? do i missing anything?
Angular considers only the first found ng-app attribute when it bootstraps the application. The second one ng-app="a" is simply ignored.
If you want to have multiple Angular applications on the same page, you will need to bootstrap them manually (without using ngApp directive) using angular.bootstrap method.
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>
I am trying to create nested KendoGrid using Angular template but for some weird reason Child Grid is not getting created when used inside Angular Template
<script type="text/ng-template" id="my-tmpl">
<div k-detail-template>
<kendo-grid options="childOption"></kendo-grid>
</div>
</script>
<kendo-grid options="mainGridOptions">
<span ng-include="'my-tmpl'"></span>
</kendo-grid>
Here is the plunker for the same http://embed.plnkr.co/fLwZrSaNZwLn0RRYanOU/
I believe you can make it work if you include only the SUB GRID in the template and leave the k-detail-template directive in the main HTML like this:
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<script type="text/ng-template" id="my-tmpl">
<kendo-grid options="childOption"></kendo-grid>
</script>
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<span ng-include="'my-tmpl'"></span>
</div>
</kendo-grid>
</div>
</div>
I tried in your plunker and it works.
Hope it helps (even though is somewhat late)
I am passing ng-controller attribute in my ng-template script tag as,
<script type="text/ng-template" id="dirTemplate.html" ng-controller="tmplCtrl">.
But the variables inside controller scope are not available inside the template.
Jsfiddle for the above code is available at, http://jsfiddle.net/HB7LU/21925/
You can do it one of 2 ways but not how you're currently doing it.
add the ng-controller to the div consuming the ng-include
<body ng-app="myApp">
<script type="text/ng-template" id="dirTemplate.html">
{{tmplValue}}
</script>
<span ng-include="'dirTemplate.html'" ng-controller="tmplCtrl"></span>
</body>
http://jsfiddle.net/HB7LU/21927/
OR
add the ng-controller in a nested div inside your template
<body ng-app="myApp">
<script type="text/ng-template" id="dirTemplate.html">
<div ng-controller="tmplCtrl">{{tmplValue}}</div>
</script>
<span ng-include="'dirTemplate.html'"></span>
</body>
http://jsfiddle.net/pkpbwee9/1/
I have just created a very simple app.
It only contains one function which is used in ng-click.
Somehow, ng-click is not firing.
Can anyone take a look for me?
Plunker:
http://plnkr.co/edit/DxwX5sJVaKABeC2JBF8M?p=preview
HTML
var app = angular.module('myApp');
app.controller('createController', ['$scope', function($scope){
$scope.submitProject = function(){
alert('wahaha');
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="form-group text-right">
<button class="btn btn-primary btn-lg" ng-click="submitProject()">Submit</button>
</div>
</body>
</html>
Add an ng-controller, so ng-click will know which controller is the function.
<div class="form-group text-right" ng-controller="createController as create">
<button class="btn btn-primary btn-lg" ng-click="create.submitProject()">Submit</button>
</div>
I recommend using controllerAs, try reading about this in this article.
you need to bind your controller by adding an ng-controller attribute like
<body ng-controller="createController">
to an element that encompasses the html that you would like to bind the scope of your createController to.
Adding the controller to an outer Div will solve your problem.
<div ng-controller='createController' class="form-group text-right">
Hope it helps.
It looks like the module 'myApp' is not correctly instantiated. It should be:
var app = angular.module('myApp', []);
This is because you need to pass in an array which is the list of modules myApp depends on. In this case, it is an empty array.
You will also need to add the controller to the view as suggested by previous answers.
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.