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>
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 am trying to code this and just Jump form 1 page to another page using routes but doesn't why its not working i search and tricks a lot but still failed please any one?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Angular Js</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controller.js"></script>
<script src="angular-route.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
----------
Controler.js
var myRoute=angular.module('myApp',['ngRoute']);
myRoute.config(function($routeProvider){
$routeProvider
.when('/',{
template:'Welcome to Home'
})
.when('/NewPage',{
template:'This Is New Page Task'
})
otherwise('/',{
redirectTo:'/'
});
});
The order of references should be,
<script type="text/javascript" src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="controller.js"></script>
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "route/one"
})
.when("/one", {
templateUrl: "route/one"
});
});
templateUrl is the place where you define your view is...In here my view(one.cshtml) is in route folder. Try the following example. Its working example.
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li> Add New Order </li>
<li> Show Order </li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div>
</body>
<script>
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/AddNewOrder', {
templateUrl: '/viewStudents.html',
controller: 'AddOrderController'
})
.when('/ShowOrders', {
templateUrl: '/Home.html',
controller: 'ShowOrdersController'
})
.otherwise({ redirectTo: '/viewStudents' });
}]);
sampleApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is Show orders screen';
});
</script>
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
The index.html looks like:
<!DOCTYPE html>
<html lang="en" ng-app="HomeApp">
<head>
<link rel="stylesheet" href="css/general_style.css">
<script src="js/angular_core/angular.min.v.1.2.16.js"></script>
<script src="js/angular_core/angular-resource.min.v.1.2.16.js"></script>
<script src="js/angular_core/angular-route.min.v.1.2.16.js"></script>
<script src="js/home_apps.js"></script>
<script src="js/home_controllers.js"></script>
<script src="js/home_services.js"></script>
<title>AngularJS Routing example</title>
</head>
<body>
<div>
<ul>
<li> contact</li>
<li> login </li>
<li> home </li>
</ul>
</div>
<div ng-view></div>
</body>
</html>
The home_apps.js looks like:
var MyHomeApp = angular.module('HomeApp', [
'ngRoute',
'HomeControllers'
]);
MyHomeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'partials/login.html'
}).
when('/contactus', {
templateUrl: 'partials/contactus.html'
}).
when('/home', {
templateUrl: 'partials/home.html',
controller: 'WGHomeLanCtrl'
}).
otherwise({
redirectTo: 'partials/home.html',
controller: 'WGHomeLanCtrl'
});
}]);
Finally, under the /partials folder, there are 3 html files:
login.html:
<div>
<p class="right_margin">
<h1>log in...</h1>
</p>
</div>
contactus.html:
<div>
<p class="right_margin">
<h1>Contactus</h1>
</p>
</div>
home.html:
<div>
<p class="right_margin">
<h1>home</h1>
</p>
</div>
In actual world, when I open the index.html from firefox, the url is something like:
{file path}/index.html#/contactus
however the content from contactus.html is not displayed - the ng-view doesnt work in this case.
I feel like there it would be a tricky place where the error hides in, as I've spent much time on it. Any debug will be greatly appreciated!!!
It working fine
Take a look at this
Working Demo
var MyHomeApp = angular.module('HomeApp', []);
MyHomeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'login.html'
}).
when('/contactus', {
templateUrl: 'contactus.html'
}).
when('/home', {
templateUrl: 'home.html',
controller: 'WGHomeLanCtrl'
}).
otherwise({
redirectTo: 'home.html',
controller: 'WGHomeLanCtrl'
});
}]);
MyHomeApp.controller( 'WGHomeLanCtrl', function ( $scope ) {
});
Here basic example for routing:
var app = angular.module('routeApp',['ui.bootstrap','ngRoute']).
config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'templates/main.php'
}).when('/first',{
templateUrl: 'templates/first.php'
}).when('/second',{
templateUrl: 'templates/second.php'
});
}).controller('routeController',function($scope,$timeout){
//your code
});
Mark up:
<!DOCTYPE html>
<html ng-app='routeApp' class="scope">
<head>
<meta content="text/html;charset=UTF-8"/>
<link href="./css/tether.min.css" type="text/css" rel="stylesheet" />
<link href="./css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body ng-controller='routeController' class="scope">
main
first
second
<div ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="./js/tether.min.js">
</script>
<script src="./js/bootstrap.min.js">
</script>
<script src="./js/angular.min.js">
</script>
<script src="./js/ui-bootstrap-tpls-2.5.0.min.js">
</script>
<script src="./js/angular-route.min.js">
</script>
<script src="./js/flat-ui.min.js">
</script>
<script src="./js/main.js">
</script>
</body>
</html>
Explanation:
your routing derives from your angular version,this markup is relevant for
1.6.1 version. Thus,pay attention to '#' sign in your address bar,in 1.6.1
version you will have '#!'.
I am learning Angularjs from Tuts+ Easier JavaScript Apps with AngularJS tutorial. Now I am at the part where they discussed Routing Primer using ng-view. I am trying to show the list page contents in ng-view of index page. For some reason nothing is shown when I load index.html. I found from searching that From angular 1.2.0, ngRoute has been moved to its own module. I have to load it separately and declare the dependency. But still I can't show anything from my list page.
index.html
<!doctype html>
<html ng-app="myApp">
<head>
<title>Angular App</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<div ng-view></div>
</div>
</body>
</html>
list.html
<h3>List</h3>
<ul>
<li ng-repeat="contact in contacts">
{{contact.name}}: {{contact.number}}
</li>
</ul>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
});
});
app.controller('Ctrl', function($scope){
$scope.contacts = [
{ name: 'Shuvro', number: '1234' },
{ name: 'Ashif', number: '4321' },
{ name: 'Anik', number: '2314' }
];
});
Remove the ng-controller from the div like this:
<body>
<div >
<div ng-view></div>
</div>
</body>
To void "miss-routings" add the otherwise to the main configuration like: otherwise({ redirectTo: '/'});
app.config(function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'list.html',
controller: 'Ctrl'
}).otherwise({ redirectTo: '/'});
});
Online Demo