I have a SPA and the body of the index.html is something like below:
<body>
<div id="wrapper">
<div data-ng-include src="'partials/header.html'"></div>
<div data-ng-view=""></div>
<div data-ng-include src="'partials/footer.html'"></div>
</div>
<script src="js/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
</body>
The header partials has many links which are mapped to controllers and the ng-view is populated with the corresponding partial file. Now I have to display the logged in username in the header.html file but I am not able to access the scope data inside the header.html file. I am populating the username inside all the controllers and putting the same inside the scope.
Please let me know how to access the scope data inside the header.html so that I can display the username.
Code snipper inside the controller:
controllers.BagsCtrl= function($scope, $location, $route){
console.log('Inside the leather bags controller..');
$scope.username = 'Pradeep';
}
Regards,
Pradeep
You can either create a controller that wraps all your application (on <div id="wrapper"> for example) and declare the username on its $scope or put your username on the $rootScope and use it directly in your templates.
The first way seems to be cleaner.
Related
I have a html pages i have included a header in all html page
header contains menu and there i am using a tag
header.jsp
<div class="navbar navbar-default navbar-fixed-top" role="navigation"<ng-app="myApp" ng-controller="headerController">
.....
</div>
and in another html pages I am including this menu like
<html>
<body>
<div id="header">
<jsp:include page="/pages/common/header.jsp"/>
</div>
<div class="container" ng-app="myApp" ng-controller="bodyController" >
..............................
</div>
</body>
</html>
This is general structure for all my pages
My problem is at a time both controller is not running for any page if header page controller is working then bodyController is not running, when i comment to header controller the body controller works.
I am using angular 1.6.5
How to resolve this problem?
I would suggest this:
<body ng-app="myApp">
Then remove the ng-app from everywhere else.
Your header.jsp file has spelling mistakes in it which is why you have the problem, and you have two ng-app's (which is why I suggest putting it in one location, on the body tag).
I am developing a web application. In my application, I am using Angular JS. I am new to Angular JS. But now I am having a problem my declaring controller. Here is my code.
<html>
<head>
//files references
</head>
<script>
var app = angular.module('memeApp',['ngRoute','ui.bootstrap']);
</script>
<nav class="nav-bar">
Home
Account
</nav>
<div class="content" ng-app="memeApp" ng-controller="DefaultController">
//content
</div>
</div>
</body>
</html>
As you can see I did nothing yet. I declare a controller named DefaultController. So when I check log, it is giving me following error:
So my controller is totally not working. When I add js code for controller as well. If I removed controller directive, errors gone. Why is my controller not working?
You need to define a controller function 'DefaultController' before you use it in html div tag.
Add below code in your script tag.
app.controller('DefaultController', ['$scope', function($scope){
}]);
You need to define your controller somewhere and add it as a dependency to the app first.
Example:
angular.module('app.controllers', [])
.controller('DefaultController' function() {
//do stuff
};
and in your app definition:
var app = angular.module('memeApp',['ngRoute','ui.bootstrap', 'app.controllers']);
I am new to angularJS and I was going through the AngularJS services tutorial.
I understood that Services are Singleton in AngularJS. Now my intention is
I will set a value to Service and that value should be able to access anywhere.
I created a service in one page and set the value from one Controller.
Now I accessed this service in anotherpage. I am getting the below error.
Uncaught Error: [$injector:modulerr]
I tried the below code.
page1.html
<html>
<head>
<title>Angular JS Services</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Services</h2>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
Set name: <input type="text" ng-model="test">
<!-- <button ng-click="next('page2.html')">next</button> -->
<button ng-click="next()">Set the value</button>
</div>
<div ng-controller="SecondCtrl">
<button ng-click="next()">Go to next page</button>
</div>
</div>
<script>
var myApp = angular.module('myApp', []);
myApp.service('HelloService', function() {
var value ='';
this.setValue = function(a) {
value = a ;
};
this.getValue= function(){
return value ;
}
});
myApp.controller('FirstCtrl', function($scope, HelloService) {
$scope.next= function() {
alert("Value "+$scope.test);
HelloService.setValue($scope.test);
$scope.answer = HelloService.getValue();
alert($scope.answer);
}
});
myApp.controller('SecondCtrl', function($scope, HelloService,$window) {
$scope.next= function() {
$scope.newvalue = HelloService.getValue();
alert($scope.newvalue);
$window.location.href = 'page2.html';
}
});
</script>
</body>
</html>
page2.html
<html>
<head>
<title>Angular JS Services</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Service test</h2>
<div ng-app="myApp">
<div ng-controller="SecondCtrl">
<button ng-click="retrieve()">Retrieve the value</button>
</div>
</div>
<script>
var myApp = angular.module('myApp', ['HelloService']);
myApp.controller('SecondCtrl', function($scope, HelloService) {
$scope.retrieve= function() {
alert("2nd page");
$scope.newvalue = HelloService.getValue();
alert($scope.newvalue);
}
});
</script>
</body>
</html>
Angular is a single page applications framework, your two pages are two different angular applications and services (and other resources) can't be shared between them.
You can create a multi-view application using routes. please check angular tutorials
When the page reloads, e.g., from page1 to page2, everything resets. The singleton value will persist if you inject it into controllers in the current page-load. The most common way to do this is to use ng-view / Routing. In that instance, you'd create a skeleton page of html, body, etc, and remove the content that's different between page1 and page2. Put those differences into .html "partial" files and then use ng-view / Routing to load each partial based on URL state and it'll use the same service singleton.
https://docs.angularjs.org/api/ngRoute/directive/ngView
Angular service is just javascript object. It is stored inside angular as well as your module, controllers, directives etc.
In simple case your application is "single page" (however may be quite reach), which means that you have i.e. index.html, where you include angular.js and your custom components.
When people talk about views and pages in angular, they usually mean 'part of page', not real 'pages' like index.html/#home, index.html/#view1, ... (this urls may look like /home, /view1 in html5 mode) -- however if you inspect html source of any such page you will see that it is the same.
You can say that angular singleton is an object that is created once per angular load.
When you change real browser page, browser will discard all js objects: angular itself as well as your factories, etc.
If you just use a value to share across your app, you should use a type service value:
angular.module('myValue')
.value('myShareValue', 123);
and then inject into your module app and controller.
myApp = angular.module('myApp', ['myValue']);
myApp.controller('myController', [
'$scope', 'myShareValue',
function($scope, myShareValue){
$scope.valueShare = myShareValue;
}
]);
You can read this slides in spanish and see the differences between types of services angular. Also this video
Inside my AngularJS app index.html page I have three main divs (top, footer and ) which display different views depending on current route. The problem I am facing now is that I need to display some data in the footer area, including data that will require loop (ex. list of States, Cities...etc) but I am not sure how to display data in index.html outside of the ng-view. So can someone tell me how this can be accomplished? Any example code is highly appreciated. Thanks
Below is my index.html structure, App.js
app.js
var myApp = angular.module('myApp', ['ngRoute', 'ngSanitize']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/',
{ templateUrl: 'templates/home.html',
controller: 'HController',
title: 'Home',
});
}]);
Index.html
<html lang="en" ng-app="myApp">
<head>...</head>
<div id="header">....</div>
<div ng-view></div>
<div id="header">
<!-- Here is where I need to loop to display data -->
</div>
Using ngRoute and ng-view does not preclude using ng-controller and other angular constructs in your code as long as the code resides inside an element which has ng-app attribute (or has been bootstrapped).
So, since you have ng-app attribute on html, you can define a new controller and use it in #header:
index.html:
<div id="header" ng-controller="headerController">
{{myData}}
<!-- Here is where I need to loop to display data -->
</div>
app.js:
myApp.controller('headerController',
[ '$scope', function ($scope) {
$scope.myData = 'Stuff.';
}]
);
My website follow the following template:
<html lang="fr" ng-app="myApp">
<head>
<meta charset="UTF-8"><title>{{title}}</title>
</head>
<body>
<navbar>
// My menu and other links
</navbar>
<section role="main" ng-controller="car-controller">
<ul>
<li ng-repeat="car in car">
{{car.state}}
</li>
</ul>
</section>
// Footer
</body>
</html>
All my different pages should have a different main section with a different controller to manage them.
My question is : how can I update my {{title}} statment from all my controllers like the car-controller on this exemple?
You can modify the document title from inside the controllers by injecting $window or $document, without binding any value to it.
angular.module('myApp')
.controller('car-controller', function($scope, $window){
$window.document.title = "Title from Car Controller";
});
You can move the logic to a callable function if required and this can be done for all the controllers you are planning to use for each section.