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
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 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.
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>
I am very new to angularjs . I am stuck in ng-repeat directives.
Here is my code :
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
Output I am getting :
Welcome Vicky! !
Emails :
hi#email.com
hi#email.com
hello#email.com
hello#email.com
But excepted is :
Welcome Vicky! !
Emails :
hi#email.com
hello#email.com
What i am doing wrong?.....
You have two versions of the AngularJS Library added to your page using the script tag. Remove one to solve the issue:
<html ng-app>
<head>
<title>Looping Example</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript">
function helloWorldExampleCtrl($scope){
$scope.userName = "Vicky!"
$scope.contacts = ["hi#email.com", "hello#email.com"];
}
</script>
</head>
<body>
<div>
<h1 ng-controller="helloWorldExampleCtrl">Welcome {{userName}} ! <br/>
Emails : <br>
<ul>
<li ng-repeat="contact in contacts"> {{ contact }} </li>
</ul>
</h1>
</div>
</body>
</html>
A Plunker with only one AngularJS import that works
A Plunker with two AngularJS Library Imports that duplicates your problem