I am trying to do angular js routing application its works fine but i have facing an error that was i am clicking [View Students List] that is not working and page is not navigating to another page..
below is my code..
main.js
var app = angular.module("mainApp", ['ngRoute']);
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'StudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.hashPrefix('');
$locationProvider.html5Mode({
enabled:true,
requiredBase:false
});
}]);
app.controller('StudentController', function($scope) {
$scope.students = [
{name: 'Mark Waugh', city:'New York'},
{name: 'Steve Jonathan', city:'London'},
{name: 'John Marcus', city:'Paris'}
];
$scope.message = "Click on the hyper link to view the students list.";
});
below is my home.html
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a ng-href="/viewStudents"> View Students List</a>
</div>
below is my viewStudents.html
<div class="container">
<h2> View Students </h2>
Search:
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li>
</ul>
<a ng-href="/home">Back</a>
</div>
below is my index.html code
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<script src="js/angular.min.js"></script>
<script src="js/angular.route.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="mainApp">
<ng-view></ng-view>
</body>
</html>
You need to change the Home.html as,
<div class="container">
<h2> Welcome </h2>
<p>{{message}}</p>
<a ng-href="#/viewStudents"> View Students List</a>
</div>
DEMO
change
<a ng-href="/viewStudents"> View Students List</a>
to
<a ng-href="#/viewStudents"> View Students List</a>
try it
If you want to enable html5 mode, make sure you include your base tag AFTER your scripts are loaded. Like this
<!DOCTYPE html>
<html>
<head>
<script src="js/angular.min.js"></script>
<script src="js/angular.route.js"></script>
<script src="js/main.js"></script>
<base href="/" />
</head>
<body ng-app="mainApp">
<ng-view></ng-view>
</body>
</html>
And it should work fine.
Take a look at working plunk
Related
I'm trying to construct a "click and read" AngularJS website. I have a header that works that takes the user between a directory, contact page and the home page. That works fine. My question is:
How do I code this so that from the Home page the user can click a button or link that will take him/her to page2 then from page 2 another click will take them to page 3 and so on? I would also like them to be able to move the other direction as well.
Here is my file/folder structure:
app/app.js
app/lib
content/css/styles.css
header.html
index.html
views/contactMe.html
views/directory.html
views/home.html
views/page1.html
app.js
angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/directory', {
templateUrl: 'views/directory.html',
//since this page requires a controller
controller: 'myController'
})
.when('/contactMe', {
templateUrl: 'views/contactMe.html',
//since this page requires a controller
controller: 'myController'
})
.otherwise({
redirectTo: '/home'
});
}]); //.config
angular.module('myApp')
.controller('myController', function($scope) {
$scope.message = ("Hello World");
}
});
header.html
<div id="menu-bar">
<h1>My Sample App</h1>
<ul>
<li>Home</li>
<li>Directory</li>
<li>Contact Me</li>
</ul>
</div>
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Sample app</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular-route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<header ng-include="'header.html'"></header>
<main ng-view></main>
</body>
</html>
You can add in each page button to go back: Go Back and also button to go to next page (if you do not have a lot of pages, you can do it manually) - Go to page1
Here is my example:
<div id="menu-bar">
<h1>Header</h1>
<ul>
<li>Home</li>
<li>Directory</li>
<li>Contact Me</li>
</ul>
</div>
Body
<div ng-view=""></div>
home.html:
<a style="float:right" href="#page1">Go to page1</a>
<a style="float:left" href="javascript:history.back()">Go Back</a>
<br />
<div style="text-align:center">home</div>
working plunker: http://next.plnkr.co/edit/1cBb8TzSX5mDJy4v
EDIT: http://next.plnkr.co/edit/Gm0TkOZCIxwxDerQ
i created home.html, about.html,app.js,and index.js. i want to show about.html and home.html views in the index.html page. but when i click on the about it shows the home page. the url changes but nothing changes in the browser window.below is the code for app.js
app.config(function($routeProvider) {
$routeProvider.when("/home", {
templateUrl: "home.html",
controller: "HomeController"
})
.when("/about", {
templateUrl: "about.html",
controller: "AboutController"
})
.otherwise({
redirectTo: "/home"
});
});
app.controller("HomeController", function($scope) {
$scope.title = "I'm in home"
});
app.controller("AboutController", function($scope) {
$scope.title = "I'm in about"
});
}
this is the code for the index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
<div>
<ng-view>
</ng-view>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
this is code for home.html
<div>
{{title}}
</div>
this is code for about.html
<div>
{{title}}
</div>
I remember link format changed from angular 1.6.0.
You may try following link.
<li>About</li>
instead of
<li>About</li>
command promt errorIn home.html, the value of {{message}} is not displayed .Infact it displays {{message}}
node.js is used to run the application.I guess there is a problem in connecting to the controller or the server.Please help to find the solution.
var app=angular.module('Demo',["ngRoute"])
.config(function ($routeProvider,$locationProvider)
{
$routeProvider
.when("/home",{
templateUrl:"home.html",
controller:"homeController"
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
})
$locationProvider.html5Mode(true);
})
.controller("homeController",function($scope)
{
$scope.message="hey home page";
})
<!DOCTYPE>
<html >
<head>
<title>angular</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="router.js"></script>
<base href="./" />
</head>
<body ng-app="Demo">
<div>
<h1>website header</h1>
</div>
<div>
<ul>
<li>home</li>
</ul>
</div>
<div class="mainContent">
<ng-view></ng-view>
</div>
<h1>footer</h1>
</body>
</html>
<h1>{{message}}</h1>
<div>
message from controller will be displayed here
</div>
Try to use this <li>home</li> Maybe you missed the #in the a tag
I am posting my code can you please whats wrong in the code.
when i click on anchor tag "contacts" it will not change the view...
i already define the to separate controllers.
Thanks In advance......):
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="scripts/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
<!--<script src="scripts/angular-route.js"></script>-->
<script src="js/app.js">enter code here</script>
</head>
<body ng-app="myModule">
<h1>Welcome to ITYX</h1>
<p>Home</p>
<p>Contact</p>
<div ng-view></div>
</body>
</html>
app.js
var app =angular.module("myModule",['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/',{
templateUrl:'templates/main.html',
controller:'mainController'
}).
when('/contact',{
templateUrl:'templates/contact.html',
controller:'contactController'
}).
otherwise({
redirectTo:'/'
});
}]);
app.controller('mainController',function($scope){
$scope.message ="hi am in main section";
});
app.controller('contactController',function($scope){
console.log("contact controller");
$scope.message ="hi am in contact section";
});
main.html
<h1>Main Section</h1>
{{message}}
contact.html
<h1>Contact Section</h1>
{{message}}
You need to have it as,
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Welcome to ITYX</h1>
<div class="nav">
Main
Contact
</div>
</div>
</div>
</div>
DEMO
It must be your paths to either your files or angular. I've made a plunker to verify that your code works if you reference files correctly.
Plunker implementation of your code
With the only different to be:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
Hello guys i am trying to use angular ui-router for nested routing in my website but i don't know where i am going wrong
this is my code
app.js
var faqApp = angular.module('faqApp', ['ui.router']);
faqApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('home.contactform', {
templateUrl: 'templates/contactform.html',
})
});
home.html
<div class="faq_head clearfix">
<img src="images/backbtn.png">
<h1>Help</h1>
</div>
<div ui-view></div>
<div class="faq_inner">
<h2 class="faq_heading">FAQs</h2>
<ul>
<li ng-repeat="option in faqoptions">
<a href="{{option.url}}" class="clearfix">
<span class="icon">
<img ng-src="{{option.image}}">
</span>
<span class="faq_name">{{option.name}}</span>
<span class="arrow">
<img src="images/right_arrow.png">
</span>
</a>
</li>
</ul>
</div>
<div class="bottom_btn_box">
Terms & Conditions
Credits
</div>
index.html
<!doctype html>
<html>
<head>
<title>Frequently ask questions</title>
<link rel="stylesheet" type="text/css" href="css/libs/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div ng-app="faqApp">
<div ui-view></div>
</div>
<script src="js/libs/jquery-1.12.3.min.js"></script>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/homeCtrl.js"></script>
</body>
</html>
In the above code i am calling 'home.html' in index.html through ui-view and then calling contactform.html in home.html but contactform.html is not loaded.
You need to define the url too,
.state('home.contactform', {
url: "/contactform",
templateUrl: 'templates/contactform.html',
})
DEMO