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.
Related
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
I am new to Angular JS and stuck in an issue...i dont know what is happening.Please help to fix it.
I have index file and app.js is connected ,app is using ngRoute...see code below.
var app = angular.module('routedapp',['ngRoute']);
//app.config("$routeProvider",function($routeProvider)) also tried this
app.config(function($routeProvider) {
$routeProvider.when("/",{
templateUrl: "views/home.html"
})
.when("/post",{
templateUrl: "views/post.html"
})
.when("/contact",{
templateUrl: "views/contact.html",
controller: "contactCtrl"
})
})
app.controller('contactCtrl', function($scope){
$scope.lalteen = function(){
console.log("clicked");
}
})
and have 4 pages... index.html , home.html , post.html and contact.html.
//index.html code
<html>
<head>
<title>Routed</title>
</head>
<body ng-app="routedapp" >
<div>welcome</div>
<div>
<p ng-click="lalteen()">click me</p>
</div>
<!-- views here-->
<div ng-view >
</div>
<script src="vendor/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
initially, when index.html page loaded it shows home.html content in view ,home.html has 3 links to home,post and contact page....when i click any one....it does not change view but keep changing url like:
http://localhost/route/#!/#%2F //for home <a> tag
http://localhost/route/#!/#contact //for contact <a> tag and other like that.
PS: following is structure of my content in post.html, home.html and contact.html looks like...
<div>This is post page</div>
<p><a href="#/">Home<a/></p><br>
<p>post</p><br>
<p>contact</p><br>
I am new...plz dnt mind my long explanition...thanks
UPDATE
OK, so I could figure out what you are trying to do and why your routing is not working.
First revert the change so you will have the link section as per your original format:
<div>This is post page</div>
<p><a href="#">Home<a/></p><br>
<p>post</p><br>
<p>contact</p><br>
And then in your script inject the $locationProvider service and set the default route prefix to an empty string.
app.config(function($routeProvider, $locationProvider) {
//note that this line does the magic ;)
$locationProvider.hashPrefix('');
//normal routing here
$routeProvider.when("/",{
templateUrl: "views/home.html"
})
.when("/post",{
templateUrl: "views/post.html"
})
.when("/contact",{
templateUrl: "views/contact.html",
controller: "contactCtrl"
})
})
Created a working plunker for you here.
I have an Angular controller defined something like
mainCtrl.js
angular.module("mainCtrl", [])
.controller("mainController", function ($rootScope, $location, Auth) {
var vm = this;
vm.testStr = "If you see this, mainController is active on your page";
.
.
.
Here Auth is an angular service defined to handle authentication and it doesn't put the testStr variable behind authentication.
A view defined tries to bind the variable testStr as bellow
index.html
<html>
<head>
<base href="/">
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<main class="container">
<!-- ANGULAR VIEWS -->
<div><h3>{{main.testStr}}</h3></div>
<div ng-view></div>
</main>
</body>
</html>
But when the index is loaded the value of testString doesn't appear on the page. Instead {{main.testStr}} appears.
I am assuming it is not a must to use $scope and couldn't find what I am doing wrong.
Thanks in advance, for your help.
Edit
There are other files involved that I didn't mention here. Now I can see their relevance.
The app module,
app.js
angular.module("userApp", ["ngAnimate", "app.routes",
"authService", "mainCtrl",
"employeeCtrl", "employeeService"])
// application configuration to integrate token into requests
.config(function ($httpProvider) {
// attach our auth interceptor to the http requests
$httpProvider.interceptors.push("AuthInterceptor");
});
module for routing
app.route.js
angular.module("app.routes", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when("/", {
templateUrl: "app/views/pages/home.html"
})
// login page
.when("/login", {
templateUrl: "app/views/pages/login.html",
controller: "mainController",
controllerAs: "login"
})
// show all employees
.when("/employees", {
templateUrl: "app/views/pages/employees/all.html",
controller: "employeeController",
controllerAs: "employee"
})
// form to create a new user
// same view as edit page
.when("/employees/create", {
templateUrl: "app/views/pages/employees/single.html",
controller: "employeeCreateController",
controllerAs: "employee"
})
// page to edit a user
.when("/employees/:employee_id", {
templateUrl: "app/views/pages/employees/single.html",
controller: "employeeEditController",
controllerAs: "employee"
});
$locationProvider.html5Mode(true);
});
You have declared the Module name as mainCtrl
angular.module("mainCtrl", [])
but using ng-app as userApp
Change your module like this,
angular.module("userApp", [])
Your module name is wrong. It should be userApp instead of mainCtrl. See a working example below:
var myApp = angular.module("userApp", []);
myApp.controller("mainController", function($scope) {
var vm = this;
vm.testStr = "Hello";
});
<html>
<head>
<base href="/">
<!-- load angular and angular-route via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.js"></script>
</head>
<body ng-app="userApp" ng-controller="mainController as main">
<main class="container">
<!-- ANGULAR VIEWS -->
<div>
<h3>{{main.testStr}}</h3>
</div>
<div ng-view></div>
</main>
</body>
</html>
I am using angular-route.min.js and I have two designs for my navbar.
The First one is the landing page navbar that will appear first on my index.html.
The second navbar is when the user is routed to the /signin page.
I am unsure on how to go about this. I see a lot of different ways that this could be done, but none really that explain how I could change the entire header view when another route is chosen. They just show how to change the links that are contained inside of it. Like this Stack
how can I switch out the header when it is routed to the /signin page?
also, I am working with another person who is doing the backend with Django. That is why I changed the "{{ }}" to "[[ ]]".
var app = angular.module('app', ['ui.bootstrap', 'ngRoute']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl: 'pages/LandingPage.html',
})
.when('/signin', {
templateUrl: 'pages/SignIn.html'
})
.when('/contact', {
templateUrl: 'pages/contact.html'
});
});
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js">
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I think ng-include directive could solve the situation you are facing.
In controller code.
.controller('HeaderCtrl', function($scope, $location) {
$scope.$on('$locationChangeSuccess', function(/* EDIT: remove params for jshint */) {
var path = $location.path();
//EDIT: cope with other path
$scope.templateUrl = (path==='/signin' || path==='/contact') ? 'template/header4signin.html' : 'template/header4normal.html' ;
});
})
In Html.
<body>
<div ng-controller="HeaderCtrl">
<div ng-include="templateUrl"></div>
</div>
<div ng-view></div>
</body>
I hope this could help you. :)
The difference of your two navbars are not significant. An alternative is just use ng-class and ng-show to give different styles.
For example, in the navbar.html:
<nav>
<span ng-show="isNormalPage">Inn</span>
<img ng-class="{align-center: isNormalPage}">Logo</img>
<span ng-show="isNormalPage">Sing in</span>
</nav>
In your JS file, add a flag to mark singin page:
.when('/signin', {
controller: [$scope, function ($scope) {
$scope.isNormalPage = false;
};
}]
})
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