My index.html looks like this:
<div ng-include src="'common/header.html'"></div></div>
<div id="view" ng-view></div>
However, I don't want the header.html to show up when the user is not logged in. AuthenticationService.isLoggedIn() is available to use. How do I make this work?
Do I need to broadcast the login event from the LoginController so that HeaderIncludeController can update itself or something? Seems really messy...
html
<div ng-include src="'common/header.html'" ng-if="loggedIn()"></div>
controller
$scope.loggedIn = AuthenticationService.isLoggedIn;
Related
https://plnkr.co/edit/U9tL95qS5AgsPu6nNwVD/
I am able to change ng-view with templateUrl. But it is not updating {{msg}} when I am updating it using $scope.msg in every new controller.
Is there a way to update it without using $rootscope. Since I have heard that $rootScope practise is bad.
I guess I Am not registering the controller ??
I am new to Angular.
I dont know how to use services
in index.html
app.controller("redCtrl", ['$scope', '$route', function($scope, $route) {
$scope.msg = "I love red"; //NOT WORKING **************
}]);
check out this plnkr https://plnkr.co/edit/rvIZouNydPpwFgsIiVaf
#Rohitas Behera The reason is simple you are using
<div ng-app="myApp" ng-controller="mainController">
<p>Main</p>
Red
Green
Blue
<div ng-view>
</div>
{{msg}} <!-- why using here !>
</div>
so this time the msg is in scope of maincontroller . There are not other controller in scope
To do so remove {{msg}} from index.html and place it in there respective page.
Like this.
blue.html
<div style="background-color:#2196f3;">
<h1>Blue {{msg}}</h1>
</div>
same for all html page.
To alter the value {{msg}} in different context/controller, you will need to write {{msg}} in individual .html files where you have set the scope of respective controller.
As of now the variable is accessible only to your mainController as it is seen in index.html only, hence the value never changes.
You need to remove it from index.html and put it in every html.
here is the fixed plunkr
you have to add {{msg}} in every template.like this
<div style="background-color:#f44336;">
<h1>Red</h1>
{{msg}}
</div>
and remove {{msg}} form index.html page because maincontroller is working for index page and the modified page like this
<div ng-app="myApp" ng-controller="mainController">
<p>Main</p>
Red
Green
Blue
<div ng-view>
I have a single page angular application and this is my index.html file:
<html ng-app="myApp">
...
<div id="bash">...</div>
...
<div id="menu">...</div>
...
<div ng-view></div>
...
</html>
Then I have a home controller with its template and an about us controller with its own template as well. And I want their templates to come up in the ng-view which is happening already but I want the #bash to only come up when the url ends with /home and hide when the url ends with anything else.
I can't do that through the home controller because it's outside the ng-view
and I can't do this through a normal JS file as well because the application loads once.
I can go through each controller and have a js function that changes #bash's css and turns display into false but I'd rather just have a condition in one place and I'm sure it's doable. Any ideas?
Why couldn't you do that from the home controller?
<div id="bash" ng-show="bashShown()">...</div>
...
$scope.bashShown = function() {
return $location.path().endsWith('/home');
};
What is the best way to handle the functionality of html that is global to an application? Should I just put an ng-controller on the navigation element to handle the logout and login?
<body>
<div class="nav"></div>
<div class="view-container" ng-view></div>
</body>
Controller is a set of javacscript functions bound to scope that refers to app model. If you want the navigation to have the particular control you can just define it there.
<div class="nav" ng-controller="YourController"></div>
I want to have a login view outside ng-view, but is it even possible with angular.js? couldnt find any examples of folowing on the internet. Example is descibed below.
<div class="container">
<div class="header">
<div class="loginView"> my huge login view</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
Yes. Assign a controller to the loginView and treat it like any other view.
ng-view is just used when using the $routeProvider to define routes.
This is perfectly valid. ngView is used to complement the router. This means it is just a directive as any other. You can put anything around it.
It sounds like you want something like this: Live demo here (click).
<div class="container">
<div class="header">
<div class="loginView" ng-include="'login.html'"></div>
</div>
</div>
You could also include your file from a $scope property like this:
$scope.foo = 'login.html';
<div ng-include="foo"></div>
I have a login.html and dashboard.html. Login.html contains the login form and I want users to go to dashboard.html after successful login.
The Problem:
login.html is not a view so we can't use routes to navigate to dashboard.html. But I want to maintain the angular control over both files.
How can I do that.
Shall I same ng-app on both files.
Currently: I am using:
window.location.href='http://sid.dev/dashboard.html';
Please guide the best way for doing so.
Controller:
getLoginDetails().then(function(response,status){
// check if successful
$scope.isLoginSuccessful = true;
});
HTML:
<div ng-show="!isLoginSuccessful">
<!-- Login Form -->
</div>
<div ng-if="isLoginSuccessful">
<div ng-include src="'dashboard.html'"></div>
</div>