How to display a navbar on every page except landingpage, so that not have to attach a navbar file on each of needed pages? Now I have enclosed navbar on main app layout, how it should be handled to keep it DRY?
Demo (with navbar on each page):
var App = angular.module('app', ['ui.router']);
App.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html'
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
}).state('landingpage', {
url: '/landingpage',
templateUrl: 'landingpage.html'
});
$urlRouterProvider.otherwise('/home');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-include="'navbar.html'"></div>
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="navbar.html">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="landingpage">LandingPage</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
<li ng-hide="signedIn()">Log In</li>
<li ng-show="signedIn()"><a ng-click="logout()">Log Out</a></li>
</ul>
</nav>
</script>
<script type="text/ng-template" id="home.html">
<h1>The Homey Page</h1>
</script>
<script type="text/ng-template" id="about.html">
<h1>The About Page</h1>
</script>
<script type="text/ng-template" id="landingpage.html">
<h1>Landing Page</h1>
<a ui-sref="home">Home</a>
</script>
</div>
Created named views like <div ui-view name="nav"></div> and set the templateUrl by view by state. For the landingpage state, just don't provide a templateUrl for the nav view and it won't render the navbar.
Update: hide on landingpage not home state.
var App = angular.module('app', ['ui.router']);
App.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
nav: {
templateUrl: 'navbar.html'
},
content: {
templateUrl: 'home.html'
}
}
})
.state('about', {
url: '/about',
views: {
nav: {
templateUrl: 'navbar.html'
},
content: {
templateUrl: 'about.html'
}
}
}).state('landingpage', {
url: '/landingpage',
views: {
content: {
templateUrl: 'landingpage.html'
}
}
});
$urlRouterProvider.otherwise('/home');
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ui-view name="nav"></div>
<div class="container">
<div ui-view name="content"></div>
</div>
<script type="text/ng-template" id="navbar.html">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="landingpage">LandingPage</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
<li ng-hide="signedIn()">Log In</li>
<li ng-show="signedIn()"><a ng-click="logout()">Log Out</a></li>
</ul>
</nav>
</script>
<script type="text/ng-template" id="home.html">
<h1>The Homey Page</h1>
</script>
<script type="text/ng-template" id="about.html">
<h1>The About Page</h1>
</script>
<script type="text/ng-template" id="landingpage.html">
<h1>Landing Page</h1>
<a ui-sref="home">Home</a>
</script>
</div>
Related
I'm having an issue with the ng-view not display the views when im selecting them from the nav bar. I have this installed on an IIS server, so I'm not sure if there is something I need to change their either.
Config:
angular.module('myApp.controllers').config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'MainWorkQueue.html',
controller: 'MainCtrl'
})
.when('/testingQueue', {
templateUrl: 'TestingQueue.html',
controller: 'testingQueueCntl'
}).otherwise({ redirectTo: '/' });
}]);
Index.html:
<head>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css">
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-animate.js"></script>
<script type="text/javascript" src="Scripts/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
</head>
<body ng-app="myApp.controllers">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#/">BuRT</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Main Work Queue</li>
<li>Testing Queue</li>
</ul>
</div>
</nav>
<div ng-view></div>
</body>
When the page loads it loads the MainWorkQueue.html. When I select TestingQueue, the url changes, but the view doesn't.
For some reason when I run a similar code in my browser Not Using IIS it worked notice that I added on <a href=#> is now <a href=#!/> I used !/ for links in angularjs
The first when condition is true because your URL of the /testingQueue has also a /. Changing the URL for your MainWorkQueue.html for example to /main should solve your problem.
And no, the IIS is not involved.
I'm doing a tutorial from https://thinkster.io/tutorials/mean-stack called flapper news. I have completed the tutorial and the system work fine. But, I was thinking doing an inline template in a single file is not a good practice specially if you're doing a big project. So I tried to separate those templates into files(.html). Unfortunately the html file cannot be displayed in the ui-view. There was no error in the console nor the server. I tried to change my index.ejs file in the view folder into the public folder and rename it to index.html. Still not working.
Here is my index.html:
<html>
<head>
<title>Flapper News</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularapp.js"></script>
<style>
.glyphicon-thumbs-up {
cursor: pointer
}
</style>
</head>
<body ng-app="flapperNews">
<nav class="navbar navbar-default pull-right" ng-controller="NavCtrl">
<ul class="nav navbar-nav">
<li ng-show="isLoggedIn()"><a>{{ currentUser() }}</a></li>
<li ng-show="isLoggedIn()">Log Out</li>
<li ng-hide="isLoggedIn()">Log In</li>
<li ng-hide="isLoggedIn()">Register</li>
</ul>
</nav>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
Here is one of the html file in the same public folder(home.html):
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
<div ng-repeat="post in posts | orderBy: '-upvotes'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span> {{post.upvotes}}
<span ng-show="post.author"> posted by <a>{{post.author}}</a> |
</span>
<span style="font-size:20px; margin-left:10px;">
<a ng-show="post.link" href="{{post.link}}">
{{post.title}}
</a>
<span ng-hide="post.link">
{{post.title}}
</span>
</span>
<span>
Comments
</span>
</div>
<form ng-submit="addPost()" ng-show="isLoggedIn()" style="margin-top:30px;">
<div ng-hide="isLoggedIn()">
<h3>You need to Log In or Register before you can add a post.</h3>
</div>
<h3>Add a new post</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
</script>
public/javascripts/angularApp.js:
var app = angular.module('flapperNews', ['ui.router']);
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'MainCtrl',
resolve: {
postPromise: [
'posts',
function(posts) {
return posts.getAll();
}
]
}
})
.state('posts', {
url: '/posts/{id}',
templateUrl: '/posts.html',
controller: 'PostsCtrl',
resolve: {
post: [
'$stateParams',
'posts',
function($stateParams, posts) {
return posts.get($stateParams.id);
}
]
}
})
.state('login', {
url: '/login',
templateUrl: '/login.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
})
.state('register', {
url: '/register',
templateUrl: '/register.html',
controller: 'AuthCtrl',
onEnter: ['$state', 'auth', function($state, auth) {
if (auth.isLoggedIn()) {
$state.go('home');
}
}]
});
$urlRouterProvider.otherwise('/');
}
]);
fyi, the ".state('home', { url:" was ".state('home', { url: '/home'" but it show an error so I change it to "url: '/'" and the error was gone. But still the ui-view cannot display the templates.
This is the output:
enter image description here
Anyone has any idea on how to solve this? Does bower has anything to do with this?
You don't need the script tag once you have the template on the separate file. Remove it and it should works. You can just use the path of the file for the templateURL then
Sometimes you will something like this just like you have,
<script type="text/ng-template" id="template.html">
... some template stuff
</script>
That script tag was actually for having the template on the same file as the main template file, and you can use templateUrl with the value of the id attribute just like usual. It will treat the body of the script tag as a file of template.html since the value of the id is template.html
my route is working perfectly in my localhost.
I am using this sample but in the sample works well in my local no: http://plnkr.co/edit/AK9uYfpgTIHt9HUdHsjJ?p=preview
If I click in the link: <li class="active"><a ui-sref="details" target="_blank">Details</a></li> the page opens blank with no content
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
html:
<ul class="nav nav-tabs">
<li class="active"><a ui-sref="details" target="_blank">Details</a></li>
<li><a ui-sref="users">users</a></li>
</ul>
<div class="tab-content">
<div id="details">
<div class="col-md-12">
<div ui-view></div>
</div>
</div>
</div>
angular:
var app = angular.module('app', ["ui.router"])
app.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/details")
$stateProvider
.state('details', {
url: "/details",
templateUrl: "app/details.html"
})
.state('users', {
url: "/users",
templateUrl: "app/users.html"
})
})
I am trying to migrate my Angular routing from routeProvider to stateProvider with below code, I don't see states content when click on navbar, any idea what's wrong?
app.js
angular.module('sampleApp', ['ui.router', 'MainCtrl', 'NerdCtrl', 'NerdService'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/home.html',
controller: 'MainController'
})
.state('nerd', {
url: '/nerd',
templateUrl: 'views/nerd.html',
controller: 'NerdController'
});
});
main.html
<body ng-app="sampleApp" ng-controller="NerdController">
<div class="container-fluid">
<!-- HEADER -->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" ui-href="home">Stencil: Node and Angular</a>
</div>
<!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
<ul class="nav navbar-nav">
<li><a ui-sref="nerd">Nerds</a></li>
</ul>
</nav>
<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>
</div>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</body>
Use ui-view instead of ng-view, in that element ui-router will put template based on $location changes.
<div ui-view></div>
Remove ng-controller from body. Using, ui-router, It handles injecting the right controller for the right templates that you have defined in your $stateProvider.
Like Pankaj has pointed out, change ng-view to ui-view.
Change ui-href="home" to ui-sref="home"
I have solution for this question. some time ago i was doing the same:
in app.js:
var app=angular.module('ppl_App',['ui.router','oc.lazyLoad','ngStorage','ngFileUpload'])
Provide UI-Routing content ( In app.js ):
angular.module('ppl_App').config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('root',{
views: {
'#':{
templateUrl:'index.html'
},
'header#':{
templateUrl: 'app/views/common/header.html'
},
'content_left#':{
templateUrl: 'app/views/common/content-left.html'
},
'content_right#':{
templateUrl: 'app/views/common/contentright.html'
},
'footer#':{
templateUrl: 'app/views/common/footer.html'
}
}
})
.state('root.login',{
url:'/login',
views:{
'contentRight#root':{
templateUrl:'app/views/login.html',
controller:'loginCtrl'
},
},
})
.state('root.register',{
url:'/register',
views:{
'contentRight#root':{
templateUrl:'app/views/register.html',
controller:'registerCtrl'
},
},
})
});
See the view name in the snapshot ( In red color shape) :
Now you can use these views in your html page. ( I have used in index.html )
<body ng-app="ppl_App">
<div class="navbar navbar-inverse navbar-fixed-top" ui-view="navigation">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="brand" href="">PPL</a>
<div class="pro_info pull-right">
<div class="pro_icn"><img src="app/assests/images/pic_small.png"></div>
<div class="pro_txt">Me<b class="caret"></b></div>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">My Profile</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="header header_fixed" ui-view="header">
<!-- //header goes here -->
</div>
<div class="container">
<div class="content_rgt" ui-view="content_right">
<!-- //right content goes here -->
</div>
<div class="content_lft" ui-view="content_left">
<!-- //left content goes here -->
</div>
</div>
<div class="clear"></div>
</div>
<div class="footr" ui-view="footer">
<!-- //footer goes here -->
</div>
<script type="text/javascript" src="app/app.js"></script>
</body>
See how to use in html in snapshot ( In red color box ):
You can redirect on this particular views using ui-sref, like this:
<div class="addtnal_acnt">
<a ui-sref="root.register">Create My Account Now !</a>
</div>
<div class="addtnal_acnt">
<br>
<a ui-sref="root.login"> Loging Again !</a>
</div>
You can redirect from controller code ( .js file ) using $state.go() :
$state.go('root.login');
or
$state.go('root.register');
I am new to angular js and following this tutorial http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/ for creating simple SPA page. In which, When I use Local and Session storage concepts in About page ,It is perfectly working in Firefox,IE except Chrome. I am not able to find the problem in Chrome. So Please need your help.
index.html
<html ng-app="scotchApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="./script.js" type="text/javascript"></script>
</head>
<body ng-controller="mainController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
pages/about.html:
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
<input type="button" value="Save" ng-click="Save()" />
<input type="button" value="Get" ng-click="Get()" />
</div>
pages/contact.html:
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
pages/home.html:
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>
scripts.js:
var scotchApp = angular.module('scotchApp',['ngRoute','ngStorage']);
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope, $localStorage, $sessionStorage, $window) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope, $localStorage, $sessionStorage, $window) {
$scope.message = 'Look! I am an about page.';
$scope.Save = function () {
$localStorage.LocalMessage = "LocalStorage: My name is Mudassar Khan.";
$sessionStorage.SessionMessage = "SessionStorage: My name is Mudassar Khan.";
$localStorage.$save();
$sessionStorage.$save();
}
$scope.Get = function () {
$window.alert($localStorage.LocalMessage + "\n" + $sessionStorage.SessionMessage);
}
});
scotchApp.controller('contactController', function($scope, $localStorage, $sessionStorage, $window) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
Thanks In advance.
you need to serve your html via a local server .
Now Your files are being served as file:/// it should be http://
refer this stackoverflow answer