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
Related
I am basically winform developer using VS2013 IDE. now i am trying to learn angularjs. i am using angularjs from asp.net mvc5 project template.
see what i have done.
i add angularjs reference in layout page at bottom like this way
<script src="#Url.Content("~/Scripts/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/angular-route.min.js")"></script>
<script src="#Url.Content("~/Scripts/Script.js")"></script>
i create a script.js file and put in script folder.
my script.js file code looks like.
/// <reference path="_references.js" />
var app = angular.module("DemoApp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home",
{
templateUrl: "Template/Home.html",
controller: "homeController"
})
.when("/course",
{
templateUrl: "Template/Course.html",
controller: "courseController"
})
.when("/student",
{
templateUrl: "Template/Student.html",
controller: "studentController"
})
})
.controller("homeController", function($scope)
{
$scope.Message = "Home Page!!";
})
.controller("courseController", function ($scope) {
$scope.Courses = ["C#", "VB.Net", "SQL", "RDBMS"];
})
.controller("studentController", function ($scope) {
$scope.Students = ["John", "Sam", "Mac", "Jeff"];
})
home.html file content looks like
<h1>Home Page</h1>
{{Message}}
Course.html file content looks like
<h2>List of Courses</h2>
<ul>
<li ng-repeat="course in Courses">
{{course}}
</li>
</ul>
Students.html file content looks like
<h2>List of Students</h2>
<ul>
<li ng-repeat="student in Students">
{{student}}
</li>
</ul>
So when i run the page then index.cshtml load first and this page has nothing.
my layout page looks like
<!DOCTYPE html>
<html lang="en">
<head >
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
#Styles.Render("~/Content/sample.css")
</head>
<body ng-app="DemoApp">
<header>
<h2>Header</h2>
</header>
<section>
<nav>
<ul>
<li>Home</li>
<li>Course</li>
<li>Students</li>
</ul>
</nav>
<div>
#RenderBody()
<ng-view></ng-view>
</div>
<div id="footer">
<p>Footer</p>
</div>
</section>
#RenderSection("scripts", required: false)
<script src="#Url.Content("~/Scripts/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/angular-route.min.js")"></script>
<script src="#Url.Content("~/Scripts/Script.js")"></script>
</body>
</html>
when i run the application then index page load and screen shot look like
left side showing few links like
a) Home b) Course c) Students
and i want when user click on those links then those page will be loaded into
when i click course links then url becomes in address bar like http://localhost:53614/#!#%2Fcourse and course page content do not load.
so please tell me what mistake i have made. guide me what to change in project or in code to load course & student html file content.
Thanks
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>
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
It seems that by asking this question, I am just beating a dead horse, but I have been through all the posts that I could find and still could not find an answer. I (and even a colleague) have spent countless hours trying to solve what seems to be a relatively basic concept. So , can I please get some help with my angularjs routing
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="foodApp">
<head>
<meta charset="utf-8" />
<title>What Do I Eat</title>
<link href="/app/css/app.css" rel="stylesheet" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/app/js/app.js"></script>
<script src="/app/js/controllers/ExistingRestaurantController.js"></script>
<script src="/app/js/controllers/NewExperienceController.js"></script>
<script src="/app/js/controllers/NewRestaurantController.js"></script>
<script src="/app/js/controllers/indexController.js"></script>
<script src="/app/js/services/RestaurantData.Service.js"></script>
</head>
<body>
<header class="container-fluid">
<h1>What Do I Eat</h1>
</header>
<div class="container-fluid">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>My Restaurants</li>
<li>Add Restaurant</li>
<li>Add Experience</li>
</ul>
</div>
</div>
<ng-view></ng-view>
</div>
<footer class="container-fluid">
whatever i want
</footer>
</body>
</html>
app.js:
'use strict';
var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']);
foodApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/myRest',
{
templateUrl: '/templates/ExistingRestaurant.html',
controller: 'ExistingRestaurantController'
})
.when('/addExp',
{
templateUrl: '/templates/NewExperience.html',
controller: 'NewExperienceController'
})
.when('/addRest',
{
templateUrl: '/templates/NewRestaurant.html',
controller: 'NewRestaurantController'
});
}
]);
ExistingRetaurantController.js
'use strict';
foodApp.controller('ExistingRestaurantController',
function ExistingRestaurantController($scope) {
$scope.restaurant = {
name: 'Cheesecake Factory',
food: 'Cheesecake',
price: 6.95
}
}
);
ExistingRestaurant.html:
<div class="container-fluid">
<h1>Existing Page!</h1>
</div>
I think the problem is the project structure. Index.html appears to be nested within app. I thought the easiest fix was to move index.html to the root of the project. So with a folder structure of:
I was able to getting working as follows..
In Index.html, I changed the links to be #!/ (hash-bang):
<!DOCTYPE html>
<html lang="en" ng-app="foodApp">
<head>
<meta charset="utf-8" />
<title>What Do I Eat</title>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/app/js/app.js"></script>
<script src="/app/js/controllers/ExistingRestaurantController.js"></script>
<script src="/app/js/controllers/NewExperienceController.js"></script>
<script src="/app/js/controllers/NewRestaurantController.js"></script>
</head>
<body>
<ul>
<li>My Restaurants</li>
<li>Add Restaurant</li>
<li>Add Experience</li>
</ul>
<ng-view></ng-view>
</body>
</html>
Then in app.js I added the $locationProvider and set the hash-prefix to !. (I don't know why it's called hashPrefix because I always think it's a suffix, given that it comes after the hash, but I can live with it.)
'use strict';
var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']);
foodApp.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix("!");
$routeProvider
.when('/myRest',
{
templateUrl: '/app/templates/ExistingRestaurant.html',
controller: 'ExistingRestaurantController'
})
.when('/addExp',
{
templateUrl: '/app/templates/NewExperience.html',
controller: 'NewExperienceController'
})
.when('/addRest',
{
templateUrl: '/app/templates/NewRestaurant.html',
controller: 'NewRestaurantController'
});
}
]);
Your start path then becomes:
http://localhost:63317/index.html
and changes to the following when clicking the links:
http://localhost:63317/index.html#!/myRest
http://localhost:63317/index.html#!/addRest
http://localhost:63317/index.html#!/addExp
Well after 4 days of searching, I finally figured out my own answer. I was using angular version 1.6.1. The moment I rolled it back to 1.2.1, everything worked fine. I shall continue to research to figure out best routing practices.
Try rolling your angular version back until it works.
When I navigate to the home/index page via the "Home" link, the page in SPA-style correctly switches the content initially, but then half-a-second later the page refreshes. This does not happen when I navigate to my "Second" page via the same navbar, only when navigating from my Second page to home.
I'm new to Angular so my apologies if I'm missing something blatantly obvious. I've also included my local server code as I'm wondering if that may be the source of the problem...
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Intro to Angular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script>
<script src="app.js"></script>
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">jQuery</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view>
</div>
</div>
</body>
</html>
main.html
<h1>This is main.</h1>
<h3>Scope value: {{ name }}</h3>
second.html
<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>
app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second/', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = "Main";
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.num = $routeParams.num || 1;
}]);
server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
console.log('Server running on 8080...');
});
Your home link is a standard link to /index.html. Links using angular-route should start with a hash (#) to prevent the browser from navigating away from the page. The solution in this case is to use #/ instead of /index.html