I just created a simple project to learn angular routing, my project is the following:
index.html:
<!DOCTYPE html>
<html ng-app="app">
<body>
<div>
Home
Hi
bye
</div>
<div class="ng-view"></div>
<script src="https://code.angularjs.org/1.6.3/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.3/angular-route.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
scripts.js:
var app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "home.html"
})
.when("/hi", {
templateUrl: "hi.html"
})
.when("/bye", {
templateUrl: "bye.html"
});
});
hi.html: <h1>Hi</h1>
bye.html: <h1>bye</h1>
home.html: <h1>Home</h1>
The three html from above only contains a h1 tag to keep it simple
A plunker of my code: http://plnkr.co/edit/uNZicTuRKDkR7ATwdFE0
I'm following this tutorial: https://www.w3schools.com/angular/angular_routing.asp
Dunno if outdated or why its not working, thanks
The problem is that you are using angular 1.6 and the toturial is using 1.4. Your links should be like this because of the new hash prefix in version 1.6:
<div>
<a ng-href="#!/">Home</a>
<a ng-href="#!/hi">Hi</a>
<a ng-href="#!/bye">bye</a>
</div>
See plunker.
http://plnkr.co/edit/qUYYcFjfwi9kEGxa7zOu?p=preview
Read more about what else to do at: https://stackoverflow.com/a/41655831/6682369
Related
I am not able to proceed with routing in angularjs i am getting the below Error
"XMLHttpRequest cannot load file:///C:/Users/PRn1/Desktop/angular%20samples/home1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." i am using Chrome for testing it any help would be appreciated
here is the sample code
This is app.js
var app = angular.module("myApp", ['ngRoute']);
app.controller('myCtrl', function ($scope) {
$scope.message = "Thank you for visiting our website";
})
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'home1.html',
controller: 'myCtrl'
})
.when('/aboutUs', {
templateUrl: 'aboutus.html',
controller: 'myCtrl'
})
.when('/contactUs', {
templateUrl: 'Contactus.html',
controller: 'myCtrl'
})
.otherwise({
redirectTo: '/home'
});
});
This is home.html
<html>
<head>
<!--Using CDN for angularjs and angular js routing-->
<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>
<!--Adding javaScript file for angularJs coding-->
<script src="app.js"></script>
</head>
<body>
<div ng-app="myApp">
<div id="topLinks">
Home
About Us
Contact Us
</div>
<div ng-view>
</div>
</div>
</body>
This is Home1.html
<div>
<h1>Welcome to Home page1</h1>
{{message}}
</div>
This is Aboutus.html
<div>
<h1>Welcome to About us page</h1>
{{message}}
</div>
This is contactus.html
<div>
<h1>Welcome to Contact us page</h1>
{{message}}
</div>
Launch it from a server. Angular doens't allow Cross origin request. meaning, just double clicking the file and hoping it would work, will not.
install a small server. Live-server is what i use.
You can't load files locally like this file:///C:/... you have to use http:// instead. Take a look at http-server, it allows you to quickly start a server.
I'm trying to create a single page app with angularjs to which I'm very new. I've pieced together this code based on a number of tutorials, but it doesn't work and I'm not quite sure why. I'm not getting any errors that I can see. The intention is to have the home.html file load on the initial load. Then based on the routes, load in different templates.
script.js
angular.module("myApp", ['ngRoute']).config(['$routeProvider', function($routeProvider){
$routeProvider.when("/view", {
templateUrl: "/view.html",
controller: "ViewCtrl"
})
.otherwise({
templateUrl: "/home.html",
controller: "HomeCtrl"
});
}]);
angular.module("myApp").controller("ViewCtrl", ['$scope', function($scope){
$scope.message = "In the view";
}]);
angular.module("myApp").controller("HomeCtrl", ['$scope', function($scope){
$scope.message = "At home";
}]);
angular.element(document).ready(function(){
angular.bootstrap(document, ['myApp']);
})
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<script data-require="angular-route#1.4.0-beta.4" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="content" ng-app="myApp"></div>
</body>
</html>
home.html
<div ng-controller="HomeCtrl">
{{message}}
</div>
view.html
<div ng-controller="ViewCtrl">
{{message}}
</div>
http://plnkr.co/edit/eLZQueX3OyPCXo2tQGWS
Couple of mistakes in your code. Please look the below changes
1) Add ng-view directive for loading partial content
<div id="content" ng-app="myApp"></div>
should be
<div id="content" ng-app="myApp" ng-view></div>
2) Template url not starts with slash (/)
templateUrl: "/view.html",
templateUrl: "/home.html",
Should be
templateUrl: "view.html",
templateUrl: "home.html",
3) No need to bootstrap the app manually, ng-app automatically do this.
4) No need to mention the controller in router level if you mentioned in template (vice versa)
Working Demo: http://plnkr.co/edit/n19eCFwRc9WQUt6SskPU?p=preview
I'm trying to build a simple AngularApp Here. I'm trying to add routeProvider and use config for the same. But the page never worked as expected. When I tried using fireBug in firefox, I found that the function present in the config, was never invoked. So, the code inside it remains untouched. (I was able to confirm that with breakpoints).
I believe that I'm missing something trivial here. Please help me figure it out.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-route.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/navbar.js"></script>
<script type="text/javascript" src="js/kscApp.js"></script>
</head>
<body>
<div ng-app="navbar">
<nav-bar></nav-bar>
</div>
<div ng-app="kscapp">
<ul>
<li> Home </li>
<li> Contact </li>
</ul>
<div ng-view></div>
</div>
</body>
</html>
kscapp.js
//Define an angular module for our app
var sampleApp = angular.module('kscapp',[]);
//Define Routing for app
//STACKOVERFLOW: The function is not getting invoked here. Please feel free to use firebug to verify the same.
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
}).
when('/Contact', {
templateUrl: 'templates/contact.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
sampleApp.controller('HomeCtrl', function($scope) {
console.log('inside Hc');
});
sampleApp.controller('ContactCtrl', function($scope) {
console.log('inside Cc');
});
navbar.js
var navBarModule = angular.module('navbar', []);
navBarModule.directive('navBar', function() {
return {
scope: {},
templateUrl: 'templates/navbar.html'
};
});
EDIT: I had two ng-app in the source. I removed the navBar, and now things start to work fine. Can someone explain to me why this behaviour is seen? Both modules are independent of each other.
You don't inject the ng route module.It should be
var sampleApp = angular.module('kscapp',['ngRoute']);
You are using different versions for Angular.min.js and Angular-route.min.js.
update your angular-route from 1.2.9 to 1.3.8
Also inject 'ngRoute' to kscapp module.
You can only use 'ng-app' once in your application.
Concider moving your ng-app="kscapp" up to the html tag, and update kscapp to:
var sampleApp = angular.module('kscapp',['ngRoute', 'navbar']);
For more on ngApp, read ngApp API.
I configured a small angular app in tomcat its working fine, but when i tried to use route-Provider its not working.
I cannot route to my views.
I did not know why ?
Can any one give some small example for that.
My Code files
//this is controllers.js
var myapp = angular.module('sampleapp', []);
myapp.config('$routeProvider',function myRoute($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/admin.html',
controller: 'adminController'
})
when('/showdata', {
templateUrl: 'partials/data-view.html',
controller: 'dataController'
}).
otherwise({
redirectTo: '/'
});
});
adminController = function ($scope) {
$scope.message = "Welcome to Login Page";
}
dataController = function ($scope) {
$scope.message = "Welcome to Show Data Page";
}
myapp.controller(controllers)
my index.html
<html>
<base href="/advangularjs/" />
<head>
<link type="text/css" rel="stylesheet" href="css/default.css">
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="demoweb_angular/controllers.js"></script>
</head>
<body ng-app="sampleapp" style="background-color: #E0EEE0">
Login |
Show Data
<div ng-view align="center" style="border: 1px solid red;">
</div>
</body>
</html>
admin.html
<b>{{ message }}</b>
data-view.html
<b>{{ message }}</b>
Make sure you have added angular-route.js
in your index.html file.
Also Please go through the documentation of ui router for the basic setup
var myapp = angular.module('sampleapp', ['ngRoute']);
u need to add ngRoute dependancy also. Because your sampleapp is depend on ngRoute .
<div ng-view></div>
you need to add this also. the partial are loading to this div. put this inside the body.
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