I learn angularjs after a tutorial and I saw that you can remove # from the link. I did that but then my partials(from templateUrl) did't come in the page anymore.
Can someone please tell me where I'm wrong?
angular.module('myApp', ['ngRoute'])
.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}])
.controller('secondController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}])
.config(function($routeProvider, $locationProvider) {
// $routeProvider lets us specify routes
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
});
$locationProvider.html5Mode(true);
});
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<base href="/">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="angularjs-learn-understand/ch05/app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></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>
second.html
<h1>This is second.</h1>
So in my browser I don't get main.html and second.html when I click on Home and Second. Why?
The UI Router github docs mentions:
When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.
When you are trying to access your app in html5Mode (routes without any hash) then first of all you would need to remove the "#" from each one of your links (in this case the links are: Home, Second).
So...
"#" would just be "/"
"#/second" would be "/second"
After this, you would also need to enable server side URL Rewrites. Please checkout this link and configure your server as per the server that you are using.
Try to establish a .otherwise() at the end of $routerProvider that specifies a default route.
The templates main.html and second.html are defined correctly? The location is correct?
Related
I am trying to learn about routes in in angular and I am having some trouble getting the proper text to display. It seems that everything is working without errors when I run my page however, the view is not changing from main.html to second.html when I click on the link.
Here are some snips of my code...
<html ng-app="myApp">
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" >AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i>Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
main html contents:
<h1>This is main</h1>
second html contents:
<h1>This is second</h1>
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"
})
});
myApp.controller('mainController', ["$scope", "$log", "$location", function($scope, $log, $location) {
}]);
myApp.controller('secondController', ["$scope", "$log", "$location", function($scope, $log, $location) {
}]);
try ui-router instead of ngRoute
I am using it in a lot of projects and its working very good
doc: https://github.com/angular-ui/ui-router
At first line in your index.html, you're opening a <html> tag, but you're closing with a </head> one, plus, I'd recommand placing your ng-app="myApp" in the opening <body> tag, this way :
<head>
<!-- everything you need -->
</head>
<body ng-app="myApp">
<!-- and stuff -->
</body>
If this doesn't change anything after correcting these errors, I really don't know what's the problem, everything looks ok.
As a part of learning process, I am roaming around angular js routing concepts. For this, I created one inner folder inside app with two sample test html pages ..
When i run the app it should load first page from that folder but it does not not happening .. I am not sure where i have done wrong in this code...
I am getting error like this 'angular.js:4640Uncaught Error: [$injector:modulerr]'
Below is my controller code
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'
})
});
myApp.controller('mainController', ['$scope','$log', function($scope,$log) {
}]);
myApp.controller('secondController', ['$scope','$log', function($scope,$log) {
}]);
and html code goes here
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i></i>second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and for main.html
<h1>this is main page</h1>
and for second.html
<h1>this is second page</h1>
Would any one please help on this query,
many thanks in advance..
Things seem to be working fine for me. See the working example below:
(Just change the href of Home link to #/)
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'
})
});
myApp.controller('mainController', ['$scope', '$log',
function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
function($scope, $log) {}
]);
html,
body,
input,
select,
textarea {
font-size: 1.05em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home
</li>
<li><i></i>second
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
<script id="Pages/main.html" type="text/ng-template">
<h1>this is main page</h1>
</script>
<script id="Pages/second.html" type="text/ng-template">
<h1>this is second page</h1>
</script>
</div>
Edit
Don't directly serve your Angular code using file:/// protocol. It will not be able to make request to load resources. Use any simple lightweight servers, for example:
Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
Mongoose for Windows
replace:
<li><i class="fa fa-home"></i>Home</li>
with
<li><i class="fa fa-home"></i>Home</li>
and it should work fine. i checked.
That error means angular could not find the module you're referring to. is your script able to connect to internet and can you make sure the angular cdn is not blocked by your firewall?
you could try to download the angular-route file and reference in your html and see if it works.
My dir's structure is like:
---/public
|
---index.html
---shop.html
|
---/js
|
---index.js
---index_controller.js
---/lib
---/css
---/plugins
|
---...
my index.html:
<!doctype html>
<html class="signin no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="Flat, Clean, Responsive, application admin template built with bootstrap 3">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Index</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/skins/palette.css">
<link rel="stylesheet" href="css/fonts/font.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/lib/angular/angular.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular/angular-route.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/index_controller.js"></script>
<script src="js/index.js"></script>
<script src="plugins/modernizr.js"></script>
</head>
<body class="bg-primary" ng-app="myApp.index">
<div class="cover" style="background-image: url(img/cover3.jpg)"></div>
<div class="overlay bg-primary"></div>
<div class="center-wrapper">
<div class="center-content">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<section class="panel bg-white no-b">
<ul class="switcher-dash-action">
<li class="active">Index</li>
</ul>
<div class="p15" ng-controller="IndexCtrl">
<form role="form" >
<div >
<button class="btn btn-primary btn-lg btn-block" ng-click='testRoute()'>
TestRoute
</button>
</div>
</form>
</div>
</section>
<p class="text-center">
Copyright ©
<span id="year" class="mr5"></span>
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var el = document.getElementById("year"),
year = (new Date().getFullYear());
el.innerHTML = year;
</script>
</body>
</html>
And shop.html renders the following: (only for test use):
SHOP
And index_controller.js is :
function IndexCtrl($scope, $http, $location, $route, $window) {
$scope.testRoute = function() {
console.log(">>>TestRoute>>>");
$location.url('/shop');
}
}
function ShopCtrl() {
console.log("ShopCtrl");
}
And index.js:
'use strict';
//Angular-js
var module = angular.module('myApp.index', ['ngRoute']);
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl
});
}]);
/*My Controllers*/
module.
controller('IndexCtrl', ['$scope', '$http', '$location', '$route', '$window', IndexCtrl]);
module.
run([
'$rootScope', '$location',
function($rootScope, $location) {
$rootScope.$on('$routeChangeStart', function(event, next, current) {
var nextTemplate = next.templateUrl;
var nextController = next.controller;
console.log("location.path:" + $location.path());
console.log('Template Starting to leave %s to go to %s\n', "", nextTemplate);
console.log('Controller Starting to leave %s to go to %s\n', "", nextController);
});
}
]);
And when I type "http://localhost:6001/index.html" in Chrome's address bar, it renders:
After clicking Test Route button, it changes to:
Only the url address changes, and it seems strange:
"http://localhost:6001/index.html#/shop"
Whereas I need
"http://localhost:6001/shop"
Chrome's console shows:
My problem is: how to render shop.html and how to navigate to /guoguo path properly, using code like:
$routeProvider.when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl
});
I am pretty new to Angular. Maybe I am not thinking in the angularjs approach. Thanks for your points.
It is a mix of issues for your .html# being shown. Try this.
1: Add in the first line of head tags
<head><base href="/">
...
</head>`
2: Use this $locationProvider.html5Mode(true);
app.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/',{
templateUrl: 'views/home.html',
controller:'homeCtrl'
})
.when('/about',{
templateUrl: 'views/about.html',
controller:'aboutCtrl'
})
.otherwise({
redirectTo: '/home'
});
$locationProvider.html5Mode(true);
});
This should remove the # from the page. But in your server make index.html as the default file serving for the path http://localhost:6001/ then it will load http://localhost:6001/index.html as http://localhost:6001/
I finaly get to know that AngularJS is a SPA(Single Page App) based framwork. If I simply jump to another html, the page will load another ng-app, which has no relation to origin app(the bootstrap has been restarted).
What solution I take is to use ng-view inside the index html. It allows to load different ng-view(which is in '<div></div>' from other html file), and config the routeProvider by declaring template url and controller.
I will paste the complete code later, thanks for you all !!!
I checked Single Page Apps with AngularJS Routing and Templating tutorial
and found Pretty URLs in AngularJS: Removing the # tutorial for remove # tag from URL. I did all the things but I can't get the app working. It would be great help someone can help on this. These are my codes,
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<base href="/">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
After the first tutorial my URL become
file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#/
but after Second one URL becomes
file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#%2F
and links stop woking
It's easy to solve.
You just need to inject ($locationProvider) where you declare your module and put this code ($locationProvider.html5Mode(true)) inside the function.
Something like this.
var myApp = angular.module('myApp',[]);
myApp.config(function ($locationProvider){
$locationProvider.html5Mode(true);
});
You must not directly open angular's html files in your browser. You should rather start a simple http server for the same. The easiest way to do so,
Assuming you have Python 2.7 installed on your filesystem:
python -m http.server <portNo>
for serving the directory contents to http://localhost:<portNo>/
Then you also will be able to navigate to http://localhost:<portNo>/about and http://localhost:<portNo>/contact
Example:
Navigating to your project's main directory and then running python -m http.server 8888 would serve files to http://localhost:8888/ , where the routing should work correctly.
First, remove the hashmark from your <a href="#...">s, like <a href="about"> or <a href="/about">. I also suggest you to use ng-href instead of href
Second, use some local http server, like python -m http.server to serve your files.
Note: If you wisht to use html5 mode, and want your app to work well when the user does not land on index.html, but on another route, you must configure the http server to serve index.html on all of your routes. We do it usually by serving index.html directly instead of returning 404.
Finally with the help of above answers I figured to find an answer. (I used wamp server as local web server)
My sile structure
angulRoute
- script.js
- index.html
- pages
----- home.html
----- about.html
----- contact.html
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/angulRoute/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/angulRoute/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/angulRoute/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<meta charset="utf-8">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="/angulRoute/"><i class="fa fa-home"></i> Home</a></li>
<li><a ng-href="/angulRoute/about"><i class="fa fa-shield"></i> About</a></li>
<li><a ng-href="/angulRoute/contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
I've just started learning angular & creating the first app. Help me please with routing.
Folder Structure
spa/
index.html
controllers/
controllers.js
images/
javascript/
app.js
resources/
angular-route.js
angular.js
views/
cars.html
home.html
login.html
profile.html
The pages from "/views" are not displayed.
Here's my code.
index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<title>5 Angular</title>
<script src="resources/angular.js"></script>
<script src="controllers/controller.js"></script>
<script src="javascript/app.js"></script>
<script src="resources/angular-route.js"></script>
</head>
<body ng-controller="mainCtrl">
<nav>
<ul class="navbar">
<li>
Home
</li>
<li>
Login
</li>
<li>
Profile
</li>
<li>
Cars
</li>
</ul>
</nav>
<ng-view></ng-view>
</body>
</html>
cars.html
<h1>Cars Page</h1>
home.html
<h1>Home Page</h1>
login.html
<h1>Login Page</h1>
profile.html
<h1>Profile Page</h1>
app.js
angular.module('app', ['ngRoute'])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'views/home.html'
})
.when('login', {
templateUrl: 'views/login.html'
})
.when('cars', {
templateUrl: 'views/cars.html'
})
.when('profile', {
templateUrl: 'views/profile.html'
})
otherwise('/');
});
Controller
angular.module('app', ['ngRoute'])
.controller("mainCtrl",function($scope){
})
Once you create app module in app.js like angular.module('app', ['ngRoute'])
You shouldn't recreate the app module in controller.js again which will flush all the initial registered component like here you did .config block for router settings.
It should be
angular.module('app')
instead of
angular.module('app', ['ngRoute'])
Additionally login anchor should be #/login instead of #Login because $routerProvider has condition on login.
Also notice there should be a slash after the hash in the href.
Login