I am using angular-route.min.js and I have two designs for my navbar.
The First one is the landing page navbar that will appear first on my index.html.
The second navbar is when the user is routed to the /signin page.
I am unsure on how to go about this. I see a lot of different ways that this could be done, but none really that explain how I could change the entire header view when another route is chosen. They just show how to change the links that are contained inside of it. Like this Stack
how can I switch out the header when it is routed to the /signin page?
also, I am working with another person who is doing the backend with Django. That is why I changed the "{{ }}" to "[[ ]]".
var app = angular.module('app', ['ui.bootstrap', 'ngRoute']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl: 'pages/LandingPage.html',
})
.when('/signin', {
templateUrl: 'pages/SignIn.html'
})
.when('/contact', {
templateUrl: 'pages/contact.html'
});
});
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js">
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I think ng-include directive could solve the situation you are facing.
In controller code.
.controller('HeaderCtrl', function($scope, $location) {
$scope.$on('$locationChangeSuccess', function(/* EDIT: remove params for jshint */) {
var path = $location.path();
//EDIT: cope with other path
$scope.templateUrl = (path==='/signin' || path==='/contact') ? 'template/header4signin.html' : 'template/header4normal.html' ;
});
})
In Html.
<body>
<div ng-controller="HeaderCtrl">
<div ng-include="templateUrl"></div>
</div>
<div ng-view></div>
</body>
I hope this could help you. :)
The difference of your two navbars are not significant. An alternative is just use ng-class and ng-show to give different styles.
For example, in the navbar.html:
<nav>
<span ng-show="isNormalPage">Inn</span>
<img ng-class="{align-center: isNormalPage}">Logo</img>
<span ng-show="isNormalPage">Sing in</span>
</nav>
In your JS file, add a flag to mark singin page:
.when('/signin', {
controller: [$scope, function ($scope) {
$scope.isNormalPage = false;
};
}]
})
Related
I am new to Angular JS and stuck in an issue...i dont know what is happening.Please help to fix it.
I have index file and app.js is connected ,app is using ngRoute...see code below.
var app = angular.module('routedapp',['ngRoute']);
//app.config("$routeProvider",function($routeProvider)) also tried this
app.config(function($routeProvider) {
$routeProvider.when("/",{
templateUrl: "views/home.html"
})
.when("/post",{
templateUrl: "views/post.html"
})
.when("/contact",{
templateUrl: "views/contact.html",
controller: "contactCtrl"
})
})
app.controller('contactCtrl', function($scope){
$scope.lalteen = function(){
console.log("clicked");
}
})
and have 4 pages... index.html , home.html , post.html and contact.html.
//index.html code
<html>
<head>
<title>Routed</title>
</head>
<body ng-app="routedapp" >
<div>welcome</div>
<div>
<p ng-click="lalteen()">click me</p>
</div>
<!-- views here-->
<div ng-view >
</div>
<script src="vendor/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
initially, when index.html page loaded it shows home.html content in view ,home.html has 3 links to home,post and contact page....when i click any one....it does not change view but keep changing url like:
http://localhost/route/#!/#%2F //for home <a> tag
http://localhost/route/#!/#contact //for contact <a> tag and other like that.
PS: following is structure of my content in post.html, home.html and contact.html looks like...
<div>This is post page</div>
<p><a href="#/">Home<a/></p><br>
<p>post</p><br>
<p>contact</p><br>
I am new...plz dnt mind my long explanition...thanks
UPDATE
OK, so I could figure out what you are trying to do and why your routing is not working.
First revert the change so you will have the link section as per your original format:
<div>This is post page</div>
<p><a href="#">Home<a/></p><br>
<p>post</p><br>
<p>contact</p><br>
And then in your script inject the $locationProvider service and set the default route prefix to an empty string.
app.config(function($routeProvider, $locationProvider) {
//note that this line does the magic ;)
$locationProvider.hashPrefix('');
//normal routing here
$routeProvider.when("/",{
templateUrl: "views/home.html"
})
.when("/post",{
templateUrl: "views/post.html"
})
.when("/contact",{
templateUrl: "views/contact.html",
controller: "contactCtrl"
})
})
Created a working plunker for you here.
Good Day,
I'm trying to create an SPA with Angular. Here is my index.html page:
<!DOCTYPE html>
<html lang="en" ng-app="onlineApp">
<head>
<meta charset="UTF-8">
<title>Online</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/mystyle.css">
<base href="/Client/">
</head>
<body ng-controller="mainController">
<div class="container"> <!--- This is the box login -->
<div ng-view></div>
</div>
<script src="components/angular/angular.js"></script>
<script src="components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>
and here is app.js:
var onlineApp = angular.module('onlineApp', ['ngRoute']);
onlineApp.controller('mainController', function($scope) {
$scope.message = 'Test Message';
});
onlineApp.controller('signupController', function($scope) {
$scope.message = 'Sign up Message';
});
onlineApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
.when('/signup', {
templateUrl: 'pages/signup.html',
controller: 'signupController'
})
.otherwise({
redirectTo: '/'
});
// use the HTML 5 History API
$locationProvider.html5Mode(true);
});
My problem is: Inside the contents of the ng-view (home.html), I have a button. When I click the button, I want to go to a signup page as defined in the route handler and it's not working. I think the problem is "inside" the ng-view.
EDIT:
Here's a snippet of pages/home.html:
<div class="pull-right col-md-4">
<label class="pull-right col-md-12 create-monthly">Create a Monthly Parker Account</label>
<a id="btn-create" class="btn btn-primary" href="#signup" >
Create Account
</a>
</div>
When I click on the button, I want the contents of pages/home.html to be replaced with the contents of pages/signup.html
END EDIT:
All of the examples I see of ng-view being used is when the links are outside of the ng-view.
Can I change the contents of ng-view while I'm inside the ng-view itself? Or is there some sort of project that would allow me to do that.
TIA,
coson
you just have to change the location of the browser to change the route. i do not really understand your problem, probably you will have to rephrase it or post a little bit more code (from inside your ng-view)
potentially either a link of the form
Click me to switch
or a manual location change with the $location service (inject it to your controller)
$location.path("/signup");
should do the job. im not sure what you mean by links inside and outside of ng-view.
The nice thing about using ui-router is that you can treat your view changes as simple page redirects. i.e. you can use an anchor tag to redirect the browser to the specified url and ui-router will catch that before the page refreshes and just update your ui-view without refreshing the page.
Click this link to go to signup.
could you please tell me why I am not able to navigate one page to another on button click .
I do like that
var loginCntrl=function($scope,$location){
$scope.testClick =function(){
alert('sss');
$location.path("/no");
}
$scope.name="naveen";
$scope.lastname="sharam";
$scope.fullname = function() {
return $scope.firstname + $scope.lastname;
};
}
here is plunker
http://plnkr.co/edit/gQcXe0Njvx6Iviu8Fjep?p=preview
I want to go on second page .
Thanks
When using ui-router you should be using $state to transfer from page to page. You should inject $state into your controller, then you can use $state.go('appaa') to transfer to that state.
See https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options for more information.
Not that much clear your question. Might you are try to make single page app using AngularJS.
We can create many HTML pages and call in single page without refreshing the page using AngularJS $routeProvider (https://docs.angularjs.org/api/ngRoute/provider/$routeProvider).
Find the below Example
1) Create three html pages home.html, about.html, services.html and save in 'pages' folder.
2) Create JS and add below script and save in 'js' folder (js/script.js).
var shanidkvApp = angular.module('shanidkvApp', ['ngRoute']);
// configure routes
spaApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html'
})
.when('/about', {
templateUrl : 'pages/about.html'
})
.when('/services', {
templateUrl : 'pages/services.html'
});
});
3) Create a index page and call angular.min.js, script.js
<!DOCTYPE HTML>
<html ng-app="spaApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<h1>AngularJS Routing</h1>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
<div class="contentwrap" ng-view>Loading...</div>
</body>
</html>
Download working example from Github
ngRoute not working while no errors are reported to console .
given no errors to console, how is it possible to follow execution of ngRoute procedures ?
i saw examples using $locationProvider.html5Mode(true), i don't understand when that should be used but i don't think it is required to make ngRoute work.
index.html has navigation links and ngView :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="bower_components/angular/angular.js"> </script>
<script src="bower_components/angular-route/angular-route.js"> </script>
<script src="main.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
main.js defines the router and the controllers :
var Main = angular.module('Main', ['ngRoute']);
function router($routeProvider) {
var route = {templateUrl: 'partials/default.html'};
$routeProvider.when('', route);
route = {
templateUrl: 'partials/first.html',
controller: 'first'
};
$routeProvider.when('content/first', route);
route = {
templateUrl: 'partials/second.html',
controller: 'second'
};
$routeProvider.when('content/second', route);
}
Main.config(['$routeProvider', router]);
Main.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
Main.controller('second', function($scope) {
$scope.list = [1,2,3];
});
partials simply make use of ngRepeat:
<header> First content </header>
<p ng-repeat="iter in list">
first
</p>
solved :
my problem was that my whole application is located under /ang/ prefix, and after adding that prefix to urls now it is working .
shouldn't there be a way to use relative urls ? i guess there should and i will try to fix it .
the problem is NOT with the different syntax as everyone suggested, and that is alarming to the fact many JS developer do not in fact understand the one line syntax that they are using everywhere .
Please check this code
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<script src="script.js"> </script>
</head>
<body ng-app="Main">
<ul>
<li> first partial </li>
<li> second partial </li>
</ul>
<div ng-view></div>
</body>
</html>
Js file
var app = angular.module('Main', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'second.html',
controller: 'second'
});
}]);
app.controller('first', function($scope) {
$scope.list = [1,2,3,4,5];
});
app.controller('second', function($scope) {
$scope.list = [1,2,3];
});
first page HTML
<header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>
here is your working code click
Do not reuse the route object as it might cause problems. Consider using it in the form (as suggested by the docs https://docs.angularjs.org/api/ngRoute/service/$route#example ):
$routeProvider
.when('content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
});
If you want to debug the routes that angular goes through, you might want to look at angular's interceptors: https://docs.angularjs.org/api/ng/service/$http#interceptors
Also, $locationProvider.html5Mode(true) is not needed to make ngRoute work. It is simply a way of defining how the URLs should look like and work. in HTML mode you can change the links to not use # anymore and simply be www.yoursite.com/app/content/second instead of www.yoursite.com/app#content/second
your route configuration is not correct, you assume route function is execute for each and every link u click but its not.
so your route function should be like
function router($routeProvider) {
$routeProvider.
when('/content/first', {
templateUrl: 'partials/first.html',
controller: 'first'
}).
when('/content/second', {
templateUrl: 'partials/second.html',
controller: 'second'
}).
otherwise({
templateUrl: 'partials/default.html'
});
}
note that urls should be like <a href="#/content/first"> // note the slash after #
to match that the routes in route function should be like when('/content/first', { note the leading slash
here is the working Plunker
Define your Routes in routes.js
var route = angular.module('route', ['ngRoute']);
route.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/home", {
templateUrl: "views/home.html",
controller : 'homeCtrl'
})
.when("/product", {
templateUrl: "views/product-info.html"
})
.otherwise({redirectTo :'/'});
});
Attach the router to your Main Module.
angular.module('myApp', ['route']);
Import both the scripts in your index.html
I configured a small angular app in tomcat its working fine, but when i tried to use route-Provider its not working.
I cannot route to my views.
I did not know why ?
Can any one give some small example for that.
My Code files
//this is controllers.js
var myapp = angular.module('sampleapp', []);
myapp.config('$routeProvider',function myRoute($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/admin.html',
controller: 'adminController'
})
when('/showdata', {
templateUrl: 'partials/data-view.html',
controller: 'dataController'
}).
otherwise({
redirectTo: '/'
});
});
adminController = function ($scope) {
$scope.message = "Welcome to Login Page";
}
dataController = function ($scope) {
$scope.message = "Welcome to Show Data Page";
}
myapp.controller(controllers)
my index.html
<html>
<base href="/advangularjs/" />
<head>
<link type="text/css" rel="stylesheet" href="css/default.css">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="demoweb_angular/controllers.js"></script>
</head>
<body ng-app="sampleapp" style="background-color: #E0EEE0">
Login |
Show Data
<div ng-view align="center" style="border: 1px solid red;">
</div>
</body>
</html>
admin.html
<b>{{ message }}</b>
data-view.html
<b>{{ message }}</b>
Make sure you have added angular-route.js
in your index.html file.
Also Please go through the documentation of ui router for the basic setup
var myapp = angular.module('sampleapp', ['ngRoute']);
u need to add ngRoute dependancy also. Because your sampleapp is depend on ngRoute .
<div ng-view></div>
you need to add this also. the partial are loading to this div. put this inside the body.