I'm new to Angular but this has been a bit of an issue.
So if I visit localhost:9000 I am greeted with the index view. If I click on my navbar link to the /about link, I am taken to http://localhost:9000/about and I am greeted with the about view.
However, if I refresh that page when I'm on the /about route. It breaks and tells me: Cannot GET /about If I go back to index it begins to work again. If I refresh on the index it doesn't break.
I set $locationProvider.html5Mode(true); as well as add <base href="/"> to the head of my index.html file.
Here is the relevant information from my files. (also I'm using Chrome)
app.js
myApp = angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'mainController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'aboutController'
})
$locationProvider.html5Mode(true);
}]);
myApp.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}]);
myApp.controller('aboutController', ['$scope', function($scope) {
}]);
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
use href="#!/about/" in html because it is changed in angularjs.1.6 href="#/about" not work for it
use below HTML code
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>myapp</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<base href="#!/">
</head>
<body>
<!-- Removed non relevant bootstrap nav bar stuff -->
<ul class="nav navbar-nav">
<li>About</li>
</ul>
<div class="container">
<div ng-view></div>
</div>
</body>
Related
While i am trying to click on first and second page its not showing any thing, i have wasted lot of time on this but no output is coming, Files script.js index.html first.html and second.html
script.js
angular.module('RoutingApp', ['ngRoute'])
.config( ['$routeProvider', function($routeProvider) {
$routeProvider
.when('/first', {
templateUrl: 'first.html'
})
.when('/second', {
templateUrl: 'second.html'
})
.otherwise({
redirectTo: '/'
});
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="RoutingApp">
<h2>AngularJS Routing Example</h2>
<p>Jump to the first or second page</p>
<div ng-view>
</div>
</body>
</html>
first.html
<h2>This is the first page.</h2>
second.html
<h2>This is the second page.</h2>
Anchor(a) tag needs to be changed to match them with route URL. Those should have / in them.
first
or
second page
While learning/reading angular docs, it warns about declaring the controller again using ng-controller.
Does this describe my code below, declaring MainMenuCtrl twice. First in the app.js and the second time in the body tag of index.html? Thanks
//---index.html-------------------------------
<!doctype html>
<html lang="en" ng-app="angApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<base href="http://localhost:63342/project_student/">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.1/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/first_page.js"></script>
<script src="js/controllers/second_page.js"></script>
<meta name="viewport" content="width=device-width" />
</head>
<body ng-controller="MainMenuCtrl"> //<<------1st declare-----------------
<header>
<button class="menuLeft" type="button" ng-click="toggleList()">☰</button>
<label id="pageTitle" class="pageTitle">Select item from list</label>
<button class="menuRight" type="button">⋮</button>
</header>
<main class="listview" ng-hide="showListView" ng-view></main>
<footer id="footer" class="footer">
<ul class="horizontal-style">
<li><button type="button">NO</button></li>
<!--<li><button type="button">EXTRA</button></li>-->
<li><button type="button">YES</button></li>
</ul>
</footer>
</body>
</html>
//---app.js-------------------------------
(function () { //y010
'use strict';
angular
.module('angApp', ['ngRoute', 'MainMenuCtrl']) //<<------2nd declare-----------
.config(['$routeProvider', routeProvider]); //y024
})();
function routeProvider ($routeProvider) {
$routeProvider.when('/menuItems', {
url: "/menuItems",
templateUrl: 'views/mainMenu.html',
controller: 'MainMenuCtrl' //<<-------- called-------------
}).when('/first_page', {
url: "/first_page",
templateUrl: 'views/first_page.html',
controller: 'FirstPageController'
}).when('/second_page', {
url: "/second_page",
templateUrl: 'views/second_page.html',
controller: 'SecondPageController'
})
.otherwise({ //home page
redirectTo: '/menuItems'
});
}
No, you are declaring it only once. In the template you are just declaring that body and its contents should come in the scope of the controller.
I am noticing before I created this controller that ng-app="myApp" broke the data binding with an input field and the template I had before.
Now i have a controller with route provider and the ng-view in the index.html doesn't work at all (blank page).
Am I missing something?
<!doctype index.html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"> </script>
<script src="js/lib/angualar.min.js"></script>
<script src="js/lib/angualar-route.min.js"></script>
<script src="js/lib/angualar-animate.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<header>
<nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
<!doctype js/app.js>
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
var appControllers = angular.module('appControllers', []);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
<!doctype views/nav.html>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
So few inputs watching your code:
Do a CTRL+Shift+I and open console tab in your browser to view the error reported, as your code has too many logical error and needs to be debugged.
var myApp = angular.module('myApp', ['ngRoute', 'appControllers']);
In app.js appControllers is used as a dependency but its never mentioned in your html as data-ng-controller="appController"
Hence remove appControllers dependency.
With context of your code
var appControllers = angular.module('appControllers', []); is redundant too and will have errors as there are no appControllers defined in html
Here is the working code of, have kept it simple:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script>
angular.module('myApp', ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/login', {
templateUrl: 'views/login.html'
})
}]);
</script>
</head>
<body>
<header>
<div class="table">
<ul>
<li class="branding"><a ng-href="#/">angularData</a></li>
<li><a ng-href="#/meetings">Meetings</a></li>
<li><a ng-href="#/login">Login</a></li>
<li><a ng-href="#/register">Register</a></li>
</ul>
</div>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
what is <!doctype index.html> if it is part of your code then remove all doctype from your code. your working code on plunker
and also you have not included your views/login.html code in your app.
I am trying to load a login.hml to my index.html using angular-route and ng-view, but for some reason it doesnt work.
<!doctype html>
<html ng-app="Test">
<head>
<script src="public/lib/angular/angular.min.js"></script>
<script src="public/lib/angular/angular-route.min.js"></script>
<script src="public/lib/angular/angular-animate.min.js"></script>
<script src="public/modules/core/core.client.module.js"></script>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<nav class="cf" ng-include="'public/modules/navigation/views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
A very simple JS file which loads the Angular modlule and call the $routeProvider for /login url:
var myApp = angular.module('Test',['ngRoute']);
myApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/login', {
templateUrl: 'views/login.html'
}).otherwise({redirectTo: '/about'});
}]);
login.html:
<h1>
<p>Login</p>
</h1>
I'm trying to get my first AngualarJS app going but it won't work for some reason. Been googling for a while now and haven't found a solution that works for me yet.
Can anyone with some AngularJS exp see what's wrong with my code?
Appreciate any help!
<!doctype html>
<html data-ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<!-- Java Script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<div id="container">
<nav class="col-xs-12">
<table id="navTable">
<tr>
<td><p>view 1</p></td>
<td><p>view 2</p></td>
<td><p>view 3</p></td>
<td><p>view 4</p></td>
<td><p>view 5</p></td>
</tr>
</table>
</nav>
<!-- View Placeholder -->
<article data-ng-view="" class="col-xs-6 col-xs-offset-3">
Views goes here...
</article>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',
{
controller: 'basicController',
templateUrl: '/partials/viewOne.html'
})
.when('/menu', {
controller: 'basicController',
templateUrl: '/partials/viewTwo.html'
})
.when('/map',
{
controller: 'basicController',
templateUrl: '/partials/viewThree.html'
})
.when('/info',
{
controller: 'basicController',
templateUrl: '/partials/viewFour.html'
})
.when('/offers',
{
controller: 'basicController',
templateUrl: '/partials/viewFive.html'
})
.when('/account',
{
controller: 'basicController',
templateUrl: '/partials/viewSix.html'
})
.otherwise({ redirectTo: '/' });
}]);
app.controller('basicController', ['$scope', function ($scope) {
$scope.message = "Hello!";
}]);
</script>
<footer class="col-xs-12 navbar-fixed-bottom">
</footer>
</div>
</body>
</html>
I would like to start with advising you to follow this official tutorial: it shows you the beginnings of how to build an app with AngularJS and views. The reason I would advise this is because there are quite a few basic elements that are missing from the script, mostly the <a> tags. Maybe you can start from the tutorial and build your own code based on that.
Remarks about your code:
Add all your script tags with javascript in your <head>. These will then in turn be run by a browser, making sure that all dependencies are met
You forgot a comma after "app" in your module initialization
Most important, you should change your <p> tags to <a> tags if you want views to work. Angular uses the <a>-tags to make navigation to different views possible. The href attribute of an <a> tag is used for this. Check my code below and you can see that my href attributes are linked to the routeprovider in the when clause.
Below you will find your adjusted code. Hope it helps!
<!doctype html>
<html data-ng-app="app">
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Java Script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script>
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/',
{
controller: 'basicController',
templateUrl: 'partials/viewOne.html'
})
.when('/menu', {
controller: 'basicController',
templateUrl: 'partials/viewTwo.html'
})
.when('/map',
{
controller: 'basicController',
templateUrl: 'partials/viewThree.html'
})
.otherwise({ redirectTo: '/' });
});
app.controller('basicController', ['$scope', function ($scope) {
$scope.message = "Hello!";
}]);
</script>
</head>
<body>
<div id="container">
<nav class="col-xs-12">
<table id="navTable">
<tr>
<td>view 1</td>
<td>view 2</td>
<td>view 3</td>
</tr>
</table>
</nav>
<!-- View Placeholder -->
<article data-ng-view="" class="col-xs-6 col-xs-offset-3">
Views goes here...
</article>
<footer class="col-xs-12 navbar-fixed-bottom"></footer>
</div>
</body>
</html>