I'm just learning AngularJS and I can't seem to get routing working no matter what I do, even copying examples verbatim.
I'm basing it off the examples provided on W3Schools, such as:
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing_template
The page I built is:
<!Doctype html>
<html data-ng-app="SUApp">
<head>
<link rel="stylesheet" type="text/css" href="SUStyleSheet.css" >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="SUApp.js"></script>
</head>
<body>
<div id="Menu">
<ul>
<li>Create a new box</li>
</ul>
</div>
<div data-ng-view></div>
</body>
</html>
SUApp.js is:
var SUApp = angular.module('SUApp',['ngroute']);
SUApp.config(function($routeProvider){
$routeProvider
.when('/',
{
templateURL:'index.html'
})
.when('/box',
{
templateURL:'box.html'
})
.otherwise({redirectTo: '/'});
});
Box.html:
<div class ="box">
<p>Hello World</p>
</div>
I've gone over it with a fine-toothed comb and I can't find anything technically wrong (which doesn't necessarily mean there isn't). What's really strange, though, is that even if I copy and paste the W3Schools example, it still doesn't work in any browser I've used (Chrome and IE).
Other AngularJS features have worked on the above page and module, for example if I remove the config and add in an controller. It's the config and routing in particular that are conking everything up.
You are missing a '/' in the view,
<ul>
<li>Create a new box</li>
<li>Home</li>
</ul>
Here is the working Plunker
You might need a route without the /.
var SUApp = angular.module('SUApp',['ngroute']);
SUApp.config(function($routeProvider){
$routeProvider
.when('',
{
templateURL:'index.html'
})
.when('/',
{
templateURL:'index.html'
})
.when('/box',
{
templateURL:'box.html'
})
.otherwise({redirectTo: '/'});
});
This is common when using UI router, and I think I had the same problem with the basic Angular router.
Related
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
appscript.js
var myApp=angular.module('myApp',['ngRoute']);
myApp.config([$routeProvider,function($routeProvider) {
$routeProvider
// route for the home page
.when('/home', {
templateUrl: 'home.html',
controller: 'homeController'
})
// route for the about page
.when('/services', {
templateUrl: 'services.html',
controller: 'servicesController'
})
// route for the contact page
.when('/contacts', {
templateUrl: 'contacts.html',
controller: 'contactsController'
})
.otherwise({ redirectTo: '/services' });
}
]);
index.html
<!doctype html>
<html ng-app="myApp">
<head >
<script src="appscript.js"></script>
<link href="Styles/Styles.css" rel="stylesheet">
<script src="homeController.js"></script>
<script src="servicesController.js"></script>
<script src="contactsController.js"></script>
<script src="aboutController.js"></script>
<script src="clientsController.js"></script>
<script src="angular-route.min.js"></script>
<script src="angular.min.js"></script>
</head>
<body >
<div class="header" > <h2 style="color:blue;">Training Institute</h2>
</div>
<div class="nav">
Home
About
Services
Clients
Contact
</div>
<div class="content" >
<ng-view> </ng-view>
</div>
<div class="footer">footer</div>
</body>
</html>
homeController.js
angular.module('myApp').controller('homeController',function($scope)
{
$scope.message="i am in home controller";
}
);
home.html
<div>i am in home partial template</div>
I have searched related questions and did many changes but still not able to load partial templates in the view.The url is changed but the veiw doesnt update.
I put all my code files in the same location where index.html is there,to make sure the issue is not because of incorrect paths.
I've created a plunkr to reproduce and fix your problem which you can find here: https://plnkr.co/edit/oTB6OMNNe8kF5Drl75Wn?p=preview (note: only home, services and contacts work, as those are the only routes configures in ur code so the rest falls back to the route specified in otherwise)
There are two issues with your code:
You're order of files is incorrect, it needs to be:
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="appscript.js"></script>
<script src="homeController.js"></script>
<script src="servicesController.js"></script>
<script src="contactsController.js"></script>
<script src="aboutController.js"></script>
<script src="clientsController.js"></script>
You're using AngularJS 1.6, in order to use routing ensure to read my answer here: Angular routing with ng-view is not working
Long story short: As of AngularJS 1.6, the default value for hashPrefix is !. As you're not making use of it, you either have to use it or reset it to '' using $locationProvider.hashPrefix(''). This change was introduced as of AngularJS 1.6 due this commit: https://github.com/angular/angular.js/commit/aa077e81129c740041438688dff2e8d20c3d7b52
Note: If this still doesn't help you, we might need more information as we have no idea what the content of all those js files are. Feel free to update my plunkr to reproduce your problem in that case.
I have made a sample SPA using angular. I used Angular routing feature, to have a single layout page, and then inject and swap out different views depending on the URL the end user has requested.
Everything works perfectly fine with the hashes in the href routes on the index page
page1
but by doing so, my URL of the webpage will be like http://localhost/angular/#/page1
So I wanted to remove the hashes in the URL and make it like http://localhost/angular/page1
To remove the hashes, you will have to enable the html5Mode routing and also set the base href on the index page
https://docs.angularjs.org/error/$location/nobase
I did exactly the same (please see my code snippet below), however it does not work. I'm running this on local host Apache server.
var app = angular.module("myModule", ["ngRoute"])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/page1", {
templateUrl: "partials/page1.html",
controller: "page1Controller"
})
.when("/page2", {
templateUrl: "partials/page2.html",
controller: "page2Controller"
})
$locationProvider.html5Mode(true);
})
.controller("page1Controller", function($scope) {
$scope.message = "Page1";
})
.controller("page2Controller", function($scope) {
$scope.message = "Page2";
})
<html ng-app="myModule">
<head>
<title>Angular Routing</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-route.js"></script>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<base href="angular"></base>
</head>
<body>
<table>
<h3>Sammple Routing in AngularJS</h3>
<tr>
<td class="leftMenu">
page1
page2
</td>
<td class="mainContent">
<ng-view></ng-view>
<!--partials will be filled here-->
</td>
</tr>
</table>
</body>
I'm struggling with this on IIS right now and in my struggles, stumbled across an excellent guide for Apache: https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/
I hope it helps.
I followed this article to remove the hashes from URLs: https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag Here is the quick code for what he does:
app.js or every angular page:
app.config(["$locationProvider",
function($locationProvider) {
$locationProvider.html5Mode(true);
}
]);
Angular template or each angular page must include this in the head:
<base href="/">
I'm not at all sure of the inner workings so I can't explain what exactly this does. Everything I know about this is from that article so feel free to take a look.
Edit: Could be a problem with try using an empty string like It prevents hashes from being added to the url when clicking dead links but still gives the anchor hover effect.
I am learning angular js for a project i'm building.
So far it seems like a great framework, very helpful and intuitive,
but i am having problems whenever i try to implement routing...
I have this code:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
}).otherwise({ redirectTo: '/' });
});
app.controller('HomeController', function ($scope) {
$scope.people = [
{
name: "Arik",
age: 19
},
{
name: "Bar",
age: 19
}
];
});
</script>
</head>
<body>
<div data-ng-view></div>
</body>
</html>
and home.html:
<ul>
<li data-ng-repeat="person in people">
<b>{{ person.name }}</b> - {{ person.age }}
</li>
</ul>
The problem is that it just doesn't work, the page shows blank.
I tried searching in the official documentation but nothing helped...
What am i doing wrong?
By the way, i am using the latest version, 1.4.4
Thanks,
Arik
I just tested your code here and works fine, probably the issue is in your path to home.html or your web server or something similar, look at your environment.
Try out grunt-connect to create a web server while you are developing, it's very helpful
Also i recommend you to use ui-router, is much more simple. Here is a working template for routing with ui-router in plunker
Your code looks great, and the prove is that it works take a look at this,
I would recommend you to load the scripts after the html, so you don't keep the user looking at a blank page till the file is downloaded.
Everything worked fine until I tried to add routing. I read that Angularjs version 1.2+ requires 'ngRoute' as an dependency (I am using version 1.2.16). I added it but it still doesn't work. Below are my codes.
test.html (Main Page)
<html ng-app="demoApp">
<head>
<title></title>
</head>
<body>
<p>Front Page</p>
<div ng-view></div>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="testjs.js"></script>
</body>
</html>
testjs.js
demoApp = angular.module('demoApp',['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider.when('/', {
controller: 'SimpleController',
templateUrl: '/partials/first.html'
});
});
var controllers = {};
controllers.SimpleController = function ($scope){
$scope.first = "Info";
$scope.customers=[
{name:'jerry',city:'chicago'},
{name:'tom',city:'houston'},
{name:'enslo',city:'taipei'}
];
};
demoApp.controller(controllers);
first.html
<div>
<input type="text" ng-model="name"/>
</br>
{{first}}
</br>
<ul>
<li ng-repeat="cust in customers | filter:name">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
Here is the most basic setup possble, I'll try to make another one with your code:
http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview
EDIT updated with the sample code. Everything seems to be working?
EDIT 2 the problem is OP wasn't running a webserver. Ng-Route needs a webserver to function properly.
My routing wasn't working because there was an exclamation point inserted in the url when I tried to navigate to my routes. I added $locationProvider like this
app.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
to remove the exclamation point and my template views started appearing when I navigated to them. I found the answer here Exclamation mark after hash (#!) in angularjs app