I have two ng-app but it's not working simultaneously. If I'd comment-out, then the other section is working and vice versa.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Angular</title>
</head>
<body>
//first section
<div id = "section1" ng-app="myapp" ng-controller="myctrl" ng-init="company='Example'; location = 'Earth'">
<input ng-model="name">
<h1 ng-bind="name"></h1>
<h1>Welcome {{name}} to {{company}} at {{location}}</h1>
<p>{{site}} {{setting}}</p> //running from controller myapp
</div>
//second section
<div id = "section2" ng-app="myapp2" ng-controller="myctrl2"> {{x}} {{y}} </div>
<script>
var app = angular.module("myapp",[]);
app.controller("myctrl", function($scope){
$scope.site = "www.example.com";
$scope.setting = "Bliktzgreig";
});
var app2 = angular.module("myapp2",[]);
app2.controller("myctrl2", function($scope){
$scope.x = "Afforestation";
$scope.y = "Deforestation";
});
</script>
</body>
</html>
Nature
Welcome Nature to Example at Earth
www.example.com Bliktzgreig
Afforestation Deforestation
The ng-app directive is used to auto-bootstrap an AngularJS application. And according to AngularJS Documentation, only one AngularJS application can be auto-bootstrapped per HTML document. I'd like to quote a section from the documentation here:
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.
You can try some alternatives for bootstrap second app http://shrestha-manoj.blogspot.com/2014/06/can-angularjs-have-multiple-ng-app.html
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 had a Single Page Application developed in angular-js and i need to open a printside under a new url. At present, printtext.html loads its content but on the inside of the index.html. What i want is to load the content of the printtext.html alone without any Content from the index.html. Basically if i click on the link in my index.html i just want to see in the browser the text printtext. And not something like Some headertext which is curretnly the case. Is that possible or do i break the SPA rules? My Main goal is to create a Printsite where i just see the content without any header or footer information. Or should i user ng-hide for this?
I am not including the logic here, but if required will provide.
Index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Myapp</title>
<script src="libs/js/angular.js"></script>
<script src="libs/js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<h1> Some headertext </h1>
<ng-view></ng-view>
</body>
app.js
var app = angular.module('myapp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/text', {
templateUrl: "template/text.html"
})
.when('/print', { //actually the parameter is /print/:object but i left the logic out here
templateUrl: "Print/printtext.html"
})
}])
text.html
<p> Some text </p>
<a ng-href="#!/print">Print </a> <!-- The right link would be something like #!/print/marc -->
printtext.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html ng-app="myapp">
<head><title>
Printview
</title>
<script src="../libs/js/angular.js"></script>
<script src="../libs/js/angular-route.js"></script>
<script src="../js/app.js"></script>
<body>
<p>printtext</p>
</body>
</html>
You directly use target = "_blank" in your anchor tag.
<p> Some text </p>
<a ng-href="#!/print" target="_blank">Print </a> <!-- The right link would be something like #!/print/marc -->
Otherwise, you can create a dynamically custom directive in angular.
custom directive generally uses to set target according to a dynamic condition.
<p> Some text </p>
<a ng-href="#!/print" ng-attr-target="_blank">Print </a> <!-- The right link would be something like #!/print/marc -->
<a ng-attr-target="_blank">
...
</a>
ng-attr-xyz lets you dynamically create #xyz, and if the value is undefined no attribute is created.
I have a node.js application running Express and express handlebars as the templating framework. I have recently started learning Angular and integrating it in my node.js app.
The only issue is, the markup for express-handlebars and angular is same. Both framework use {{}}. I did some research and found this Stackoverflow question: Using Express Handlebars and Angular JS
The accepted answer suggests changing the markup symbols using the interpolateProvider. I implemented this and it does not work for me (I have commented under that answer).
My code looks like this:
main.handlebars
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GETTING STARTED WITH Angular</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="/css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
app.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
</script>
</head>
<body>
{{{body}}}
<input ng-model="name">
<h3>Hi, //name// how are you doing</h3>
<div ng-controller="DemoController as demo">
//demo.label//
</div>
</body>
</html>
The above code is from the main.handlebars layout file. I even tried to put that code in the actual view but it did not work. What am I missing?
Thanks.
This issue is occurring because of an incorrect app name reference or a simple typo. Change ng-app="myapp" to ng-app="myApp".
I have been learning angularjs for 2 days and I can't have it working when dealing with ng-controller / ng-repeat
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Angular test </title>
</head>
<body ng-app>
Angular test
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
function menuCtrl($scope) {
$scope.menus = [
{title:"wiki",img:"../images/profil.png"},
{title:"list",img:"../images/profil.png"},
{title:"find",img:"../images/profil.png"},
{title:"exp",img:"../images/profil.png"},
{title:"stat",img:"../images/profil.png"},
{title:"param",img:"../images/profil.png"}
];
}
</script>
<div ng-controller="menuCtrl">
<div ng-repeat="menu in menus">
<img src={{menu.img}}>
<h3>{{menu.title}}</h3>
</div>
</div>
</body>
This way of coding is not supported by angular 1.4.7 however it is supported by angular <1.3.0.
I recommend you to follow this style of coding https://docs.angularjs.org/api/ng/directive/ngController
ngApp: ng-app description
<body ng-app>
Or
<html ng-app>
Use this directive to auto-bootstrap an AngularJS application. 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.
This automatically bootstraps your angular application and then all is good to go. But I like to bootstrap it manually on DOM ready event.
It's upto you. If you are building a sample app and trying to learn then ng-app is fine for you, but in case of large application you should need to make Modules.
I downloaded the seed project from git. Basically, changed the code in following three files -
app.js
angular.module('app', []);
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-controller="MessageController">
<div class="container">
<h1>{{title}}</h1>
</div>
</body>
</html>
MessageController.js
angular.module('app').controller("MessageController",function(){
alert("inside message controller");
var vm = this;
vm.title = 'AngularJS Tutorial Example';
});
When I run http://localhost:8000/app/index.html, it displays {{title}} and not the value inside controller.
I am new bie in angular and trying to learn but unable to figure out whats wrong here.
You appear to have two different things happening.
First you appear to have missed adding your javascript dependencies to your html file.
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="MessageController.js"></script>
</head>
An additional note
Because you are using multiple files (which is fine), make sure you include the app.js file before the MyController.js file.
You also need to correctly access the scope. Even if you add the javascript dependencies you will get a blank page if not bound correctly.
Because you are using var vm = this; format you need to be sure to use the control as annotation
<body ng-controller="MessageController as myctrl">
<div class="container">
<h1>{{myctrl.title}}</h1>
</div>
</body>
Working Plunker Example
Another options is to directly extend $scope in your controller. You could then just have {{title}} on your page and it should bind correctly.
angular.module('app').controller("MessageController",['$scope',function($scope){
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
}]);
var yourapp = angular.module('app', []);
yourapp .controller('MessageController', function ($scope) {
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
});