I am trying to build a login page and a functionality page using angularjs SPA.
I have following controller:
- LoginController
- PredictionController
And following single page:
- Home.html : Binded to LoginController
- trend.html : Binded to PredictionController
- index.html : Has no controller
I have navigation panel in index.html and I want to modify(add or remove) number of tabs based on login. I don't want to write navigation panel logic in each page as it is reusable. I am unable to figure out way to do this using additional controller because I am using ng-route which I guess won't allow me to use multiple controller for same page.
Here is my html code snippet for index.html:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">MyProject</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Trend</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div ng-app="chartApp">
<div ng-view></div>
</div>
</body>
Here is the code for controller:
var app = angular.module('chartApp', ['ngRoute']);
app.factory('UserVerified', function() {
return
{bool: false};
});
app.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'pages/home.html',
controller: 'LoginController'
})
.when('/Trend', {
templateUrl: 'pages/trend.html',
controller: 'PredictionController'
})
});
app.controller('LoginController', ['$scope', '$http', 'UserVerified', function($scope, $http, UserVerified){
$scope.hasPermission = UserVerified.bool;
$scope.getAuthentication = function(){
console.log($scope.userId, $scope.pwd)
$http.get('/getAuth', {
params: { user_id: $scope.userId, pwd: $scope.pwd }
}).success(function (response){
console.log(response);
UserVerified.bool = response;
$scope.hasPermission = UserVerified.bool;
});
}
}]);
I'm not sure if the information is enough please edit or let me know if i'm missing some information.
I believe you're going to have to move your ng-app directive up to the body, and create a NavigationController which can require your UserVerified factory and help maintain the state of the navigation.
You could add the ng-controller directive to your navbar explicitly, and your router should work the same.
The HTML might look something like this.
<body ng-app="chartApp">
<nav ng-controller="NavigationController" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Only display if $scope.loggedIn -->
<a ng-show="loggedIn" class="navbar-brand" href="#/">MyProject</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Trend</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div ng-view></div>
</body>
NavigationController
app.controller('NavigationController', function($scope, UserVerified) {
$scope.$watch(function() {
return UserVerified.bool;
}, function(state, oldState) {
$scope.loggedIn = state;
});
});
Related
I have problems getting the bootstrap navbar + angular routing to work. I don't understand what is going on since a very similar code on another app is working.
I have the following html in my index.html
<div ng-controller="CoreController as core">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">myApplication</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-class="core.navHome">Home <span class="sr-only">(current)</span></li>
<li ng-class="core.navStatistic">Statistic</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
my app.js:
$routeProvider.when('/', { templateUrl: 'templates/home.html', controller: 'MainController', controllerAs: 'main' });
$routeProvider.when('/statistic', { templateUrl: 'templates/statistic.html', controller: 'StatisticController', controllerAs: 'statistic' });
// Default route
$routeProvider.otherwise({ redirectTo: '/' });
When I hit the statistic link, my URL shows:
http://localhost/myApplication/#!/#statistic
and I get see the home template.
The home button then shows "http://localhost/myApplication/#!/"
Is the #! the reason for this?
Ok after some research I found out that I this code worked for angular < 1.6.
To make the above code work in 1.6 you have to get ridd of the #! by adding this to the config:
$locationProvider.hashPrefix('');
Here is the original Post.
I'm newbie to angular world. I'm trying to create a login page.When the user login, i want to show some contents in the navbar.
Currently i'm using ng-show and ng-route. When i'm not using ng-route, ng-show works fine but when i use ng-route, ng-show is not working .I don't want to use angular-ui-router. What i'm doing wrong. Can anyone help me
Angular Config
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'ctrl'
})
.when('/logged', {
templateUrl: 'logged.html',
controller: 'ctrl'
})
otherwise({
redirectTo: '/'
});
}]);
app.controller("ctrl",['$scope','$http','$location',function($scope,$http,$location){
$scope.myvalue2=false;
$scope.login = function()
{
//here i making the $http.post to login on success im changing $scope.myvalue2=true;
}
}]);
HTML
<nav class="navbar-default navbar-dark bg-primary">
<div class="navbar">
<div class="container-fluid navi">
<div class="navbar-header" style="padding-bottom:10px">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="navbar-brand " style="list-style:none;padding-top:10px;"><li>name</li></ul>
</div>
<div ng-show="myvalue2" class="ng-cloak">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top:10px">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:14px;">Settings</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
I don't think that ngRoute would have any impact on ng-show. It's working fine check this working demo :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.myvalue2 =false;
$scope.login = function() {
$scope.myvalue2=true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<a ng-click="login()">Login</a>
<div ng-show="myvalue2">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top:10px">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" style="font-size:14px;">Settings</a></li>
</ul>
</div>
</div>
</div>
You're going to want to use the digest cycle here, and do away with ng-show, since its use gets easily mistaken for the more elegant and simpler-to-understand ng-if.
In short:
AJAX calls will trigger a digest cycle.
ng-if will actively remove DOM if its condition is not met, thus drawing less DOM.
Changing the value on an AJAX call in an ng-if will work instead of hiding the DOM element, since it'll be eligible to be visible anyway.
The ng-cloak class is throwing me off; you probably don't need that there, since with ng-if, it won't be anywhere in the DOM until you actually need it.
What your controller might look like:
app.controller("ctrl", [
'$scope',
'$http',
'$location',
function ($scope, $http, $location) {
$scope.myvalue2 = false;
$scope.login = function () {
$http.get('/path/to/your/request', function(data) {
$scope.myvalue2 = true;
});
}
}]);
What your DOM would need to change to (and yes, I prefer absolute truth to truthiness):
<div ng-if="myvalue2 === true">
This will help you,
<div ng-app="myApp" ng-controller="myCtrl">
<button class="btn btn-success" type="text" ng-model="firstName" ng-show="display" ng-click="display=!display"> BUTTON 1</button>
<br />
<button class="btn btn-warning" ng-click="display=!display" ng-model="lastName" ng-show="!display"> BUTTON 2
</button>
</div>
DEMO
I want to convert my angular pages, I am using ng-includes but my pages has .html extensions, I would like have just /mypage
sample:
www.mypage.com/projects.html
I want archive this:
www.mypage.com/projects
html
<!-- header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="index.html">logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- header -->
<div>
<div ng-include="'app/pages/projects.html'"></div>
</div>
<footer class="footer">
<div class="container text-center">
footer
</div>
</footer>
js:
var App = angular.module('App', []);
App.controller('ProjectCtrl', function($scope, $http) {
$http.get('app/projects.json')
.then(function(res){
$scope.projects = res.data;
});
});
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/projects', {
templateUrl : 'projects.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
js fiddle: https://jsfiddle.net/3ww49zq7/
how can make it?
thanks.
At the first you will need to use ngRoute and declare it as a dependency in your module
var App = angular.module('App', ['ngRoute']);
Then you can use routeProvider
Second :
You should use the ng-view directive to tell the angular that this div will be used to load the views.
<div ng-view></div>
Third :
You should change your links to the same in the routeprovieder
<li class="active">Home</li>
<li>Projects</li>
should be
<li class="active">Home</li>
<li>Projects</li>
and you should make sure that these links match the case in the routeProvider Object.
You should declare the controller you are using in the routeProvider
here is a plunker to demonstrate :.http://plnkr.co/edit/DrPG9WtLg8abpLQpVj0W?p=preview
I have the below HTML file:
<header ng-include="'app/partials/includes/header.html'"></header>
<div class="container" ng-controller="LoginCtrl">
</div>
The above is for the login page, the below is for the register:
<header ng-include="'app/partials/includes/header.html'"></header>
<div class="container" ng-controller="RegisterCtrl">
</div>
This is the header:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Curve
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Sign Up</li>
<li>Sign In</li>
</ul>
</div>
</div>
</div>
How can apply the .active class to the list element dependent upon the route?
If the route is /register, I want the active class applied, and same for login.
How can this be done in Angular?
Use ng-class on any element to conditionally apply to an element. Using the object notation the key is the class name, and the value is an expression when evaluates to true the class is added to that element's class attribute.
<div class="header" ng-controller="HeaderController">
<div ng-class="{ active: registrationOrLogin }">
</div>
And in a controller:
app.controller("HeaderController", [ "$scope", "$location", function($scope, $location) {
$scope.registrationOrLogin = $location.hash() == "/login" || $location.hash() == "/registration";
} ] );
I have started learning angularjs for two days, there a lot of new concepts that are new to me, i'm building a test project to my final project testing all the new different things so far,
I'm stuck in the logout, i have implement the ng-if directive in the login controller and it works great i have test it the success method of login request, but i want to move my logout html to the navbar which is in the index.html, so i'm not sure where to put my logic to test against the cookie ?
that's my index.html
<div ng-controller="HomeController">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Register</li>
<li>Login</li>
<li>Articles</li>
<li ng-if ="isAuth" ng-click="LogOut()">LogOut</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div data-ng-view=""></div>
HomeController
app.controller('HomeController', function ($scope, Auth) {
$scope.isAuth = Auth.IsAuth;
});
Auth service
app.service('Auth', function ($cookieStore) {
var auth = function myfunction() {
if ($cookieStore.get('token')) {
return true;
}else{
return false;
}
}
return{
isAuth : auth()
}
});