I am trying to display a cesium globe with a timestamp and legend in AngularJS. However I only see the timestamp and everything else is blank however if I comment out and move what ng-app is not commented out it will show other divs but I cant get all three to show at the same tim:
<div class="timeStamp" ng-app="myApp">
<div ng-controller='TimeCtrl'>
<p>{{ clock | date:'MM-dd-yyyy HH:mm:ss'}}</p>
</div>
</div>
<div class="cesium" ng-app="ngCesium" ng-controller="appCtrl as appCtrl">
<div cesium-directive="" id="cesium" class="cesiumContainer"></div>
</div>
<div ng-app="" class="categoryBox" data-ng-init="planes=['Commercial Planes','Private Planes']">
Legend
<li data-ng-repeat="x in planes" ng-style="{ background: x == 'Commercial Planes' ? 'red' : 'blue' }">
{{x}}
</li>
</div>
You can use like this:
<!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>
Refer the following url it will help for you:
AngularJS Multiple ng-app within a page
Related
I am trying to print scope value from 2 controllers. It is not printing the value from the second controller. What is my mistake?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-app="myApp" ng-controller="Ctrl2">
{{carname}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
</script>
You defined two ng-app, angular will bootstrap the first app it finds on the page and not the second one. Therefore second one doesn't work.
Define app on the element covering all the controller elements.
Example Snippet:
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</div>
You don't need ng-app for each div, change your html like this:
<body ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</body>
Because you defined your app twice. Try to use this code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
</script>
Two ng-app on single page doesn't work, it will compile only the 1st instance of ng-app and the other will get ignored.
It seems like you wanted to use two controllers on the same page. What you can do is you can move ng-app directive on body level & have ng-controller on two different divs.
<body ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</body>
I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h4>{{ "data.message"}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js file is
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h4>{{data.message}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
Note: You should not have quotes("") in your expressions or else, it will be treated at string.
Move these links inside tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script type="text/javascript" src="main.js"></script>
and you cannot use $scope with module and controller this must be
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = {"message": panel};
});
and in html
<div ng-app="myApp">
to first div
and use
{{data.message}}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Azhar";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Khan";
});
</script>
</head>
<body>
<div id="AgeCalc">
<h1>Age Calculator</h1>
<div ng-app="MyModuleA" ng-controller="MyControllerA">
{{name}}
</div>
</div>
<div id="Currency Converter">
<h1>Currncy Converter</h1>
<div ng-app="MyModuleB" ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div id="App1" ng-app="myApp1" ng-controller="MyControllerA">
<h1>My Name</h1>
<div >
<span>{{name}}</span>
</div>
</div>
<div id="App2" ng-app="myApp2" ng-controller="MyControllerB">
<h1>My Surname</h1>
<div >
<p>{{name}}</p>
</div>
</div>
<script>
angular.module("myApp1", [])
.controller("MyControllerA",
function($scope) {
$scope.name="sagar";
}
);
angular.module("myApp2", [])
.controller("MyControllerB",
function($scope) {
$scope.name = "chopada";
}
);
angular.bootstrap(document.getElementById("App2"),['myApp2']);
</script>
</body>
</html>
Hope It Will Help You...
You need to manually bootstrap the Angular apps as below. Check out the link: https://plnkr.co/edit/iW8GzBgexjylXiq1IWtp?p=preview
<div id="AgeCalc">
<h1>Age Calculator</h1>
<div ng-app="MyModuleA" ng-controller="MyControllerA">
{{name}}
</div>
</div>
<div id="Currency Converter">
<h1>Currncy Converter</h1>
<div ng-app="MyModuleB" ng-controller="MyControllerB">
{{name}}
</div>
</div>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) { $scope.name = "Azhar"; });
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) { $scope.name = "Khan";});
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyModuleA','MyModuleB']);
});
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script type="text/javascript">
angular.bootstrap(document, ['myApp1','myApp']);
</script>
</body>
</html>
Although i can see the expected output, but at the same time facing console error.
here is the description of error
(while i click on the url)
it says it already bootstrapped so i remove the 'myApp' from .bootstrap function, but that didnt work.
Please help.
You are doing both ng-app declarations and angular.bootstrap(document, ['myApp1','myApp']);.
You need to choose only one method, otherwise you get the well descripted error of multiple bootstrapped applications.
The problem is as explained in the previous comments, the automatic and manual initialization of modules.
Since you want to initialize them separately for each elements then try an approach like
<div data-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name"/>
</p>
<h1>Hello {{name}}</h1>
</div>
<div data-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
then
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
var els = document.querySelectorAll('[data-app]');
for (var i = 0; i < els.length; i++) {
angular.bootstrap(els[i], [els[i].dataset.app]);
}
Demo: Fiddle
HTML:
<section>
<!-- <div ng-controller="Ctrl"> -->
<div nt-attr-dir></div>
</section>
script.js
angular.module('docsSimpleDirective', [])
.directive('ntAttrDir', function factory() {
var directiveDefinitionObject = {
template: "<div> Test </div>",
replace:false,
restrict:"A"
};
return directiveDefinitionObject;
});
So expected result is the html-code should look like
<section>
<!-- <div ng-controller="Ctrl"> -->
<div nt-attr-dir><div> Test </div></div>
</section>
But it looks always as below
<section>
<!-- <div ng-controller="Ctrl"> -->
<div nt-attr-dir></div>
</section>
What am I missing so that Test is not being displayed.
The only thing I can think of is the ng-app directive missing:
<html ng-app="docsSimpleDirective">
Why?
This directive is 100% valid.
I Assume there is no hidden error in the console which wasn't reported.