I am new on AngularJS. I am working on a project from a Udemy course.
When I add this code on my app.js:
weatherApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/home.htm',
controller: 'homeController'
})
.when('/forecast', {
templateUrl: 'pages/forecast.htm',
controller: 'forecastController'
})
});
i get this error on the browser console:
Error: [$compile:tpload]
Even if I download the code from the course link i get the same error. Any ideas why happen this?
Your browser is hindering your home.htm from running scripts that makes ajax call to another origin when opened via file path. There are countless resources explaining the same-origin policy.
If you serve your home.htm file with e.g. http-server you can navigate to the default url and port: 0.0.0.0:8080/home.htm. Note that you might also have to add the --cors flag found in the docs.
Related
I am facing a number of troubles related to AngularJs routing. I have already tried to find answers online but I still am not very clear with the solutions provided.
First of all, here is my routing block:
var myApp = angular.module('myApp', ["ngRoute", "ngAnimate"]);
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: "../view/home.html",
controller: "slideShowController",
})
.when("/business&consumer", {
templateUrl: "../view/govnservices.html",
controller: "productController",
})
.when("/about", {
templateUrl: "../view/about.html",
controller: "pagController",
})
.when("/project", {
templateUrl: "../view/projects.html",
controller: "projController",
})
.when("/service", {
templateUrl: "../view/services.html",
controller: "servController",
})
.otherwise({
redirectTo: '/',
})
});
And this is how I am passing the reference to my links:
Home
Another link:
name: "About Us",
templateUrl: "/about",
Now everywhere it is specified as:
Home
But on using '#' my links are not working (still don't know why.)
Again on not using '#' all my links are working but if I try to reload my page then it gives a 404 error:page not found.
Someone please help me out with this and please mention in comment if any part is not clear. Also please mention any good source to learn routing.
Your question is not entirely clear where you state: "Again on not using '#' all my links are working but if I try to reload my page then it gives a 404 error:page not found."
So are you using the # or not? Since we are talking html5mode I will assume not for now (Because you have to not use it in that mode)...
So I assume the symptom your seeing is that you
Navigate to "http://wheremyappishosted/" This loads your app and
everything is fine...
Now you click "About", This changes your
location to "http://wheremyappishosted/about" and again everything
works just fine.
Now you hit Refresh in your browser and suddenly
you get a 404
Sounds about right? If so... The problem is your server and not the AngularJS routing...
This is what happens from the servers perspective:
A request for "http://wheremyappishosted/" is received, the server responds
with the main page for the app. Everything is fine...
AngularJS handles the route change, the server does not receive any requests
for "http://wheremyappishosted/about" It DOES however receive a request for
the template "../view/about.html" which it can find and responds with.
Everything is fine...
A request for "http://wheremyappishosted/about" is received, but the server
does not know what to respond for that so it gives a 404...
The solution is that you need your to deliver your main page as a fallback route... You may wan't to have certain filters in place so that a unknown route under the parent route "api" may still fail with a 404 etc...
But the essence of it is that the server doesn't know what to respond with for "http://wheremyappishosted/about", so you need to configure it so it knows that.
I am following a book called MEAN Machine. The code from the part in this book in question can be found at this Github Repo.
When clicking the links in /public/views/index.html which should be routed, I get file not found errors in the web browser.
The code (/public/js/app.routes.js) that does not seem to work:
// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])
// configure our routes
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'views/pages/home.html',
controller : 'homeController',
controllerAs: 'home'
})
// route for the about page
.when('/about', {
templateUrl : 'views/pages/about.html',
controller : 'aboutController',
controllerAs: 'about'
})
// route for the contact page
.when('/contact', {
templateUrl : 'views/pages/contact.html',
controller : 'contactController',
controllerAs: 'contact'
});
$locationProvider.html5Mode(true);
});
In the index.html file, we are pointing to the correct files:
<script src="js/app.routes.js"></script>
<script src="js/app.js"></script>
To test their code, I changed the base tag in index.html to my folder's path which eliminated errors of not finding the above files.
Is this material dated? Also, I realize this book is not using Angular 2. Does Angular 2 vary drastically in routing and is this material deprecated?
Simply run command
node server.js
from '12-angular-routing' directory and open in browser http://localhost:8080
The problem is that browsers by default does not allow AJAX requests to files located on your local file system. In this case you should run your local server which serves client application(server.js is simple express server).
I am having issue with routing on mobile phone when I use phonegap.
Routing on browser works but on mobile devices is not working.
If there is any question, I can provide more code.
route.js:
app.config(['$routeProvider','$locationProvider','$compileProvider', function($routeProvider,$locationProvider,$compileProvider) {
$routeProvider
.when('/', {
templateUrl: '../login.html',
controller: 'loginController'
})
.when('/home',{
templateUrl:'../home.html',
controller:'homeController'
})
.when('/profile', {
templateUrl:'../myprofile.html',
controller:'profileController'
})
.when('/reservations',{
templateUrl:'../reservations.html',
controller:'reservationController'
})
.when('/ordernow',{
templateUrl:'../ordernow.html',
controller:'ordercontroller'
})
.otherwise({
redirectTo: "/home"
});
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
}]);
After few hours of struggling:
solution: remove "../" from templateUrl
I guess this particular issue might have been fixed long ago, but I was having similar trouble with angular 1.6 and cordova android app.
I was using the correct path for templateUrl but still routing was not working.
After spending a whole day looking through different documentations and trying out different things i stumbled upon a small mystery. I was debugging the cordova app using google chrome inspect and found the app URL to be
file:///android_asset/www/index.html#!/
When i navigate to another page, I get the URL
file:///android_asset/www/index.html#!/#%2faccounts
Then while investigating that, I stumbled upon this
I used the following while configuring the router
$locationProvider.hashPrefix('');
This seemed to fix the problem for me. Code snippet below:
var prakriya = angular.module("prakriya",["ngRoute"]);
prakriya.config(function($routeProvider, $locationProvider){
$locationProvider.hashPrefix(''); //Added Line here
$routeProvider
.when("/", {
templateUrl: "templates/workspace.html",
controller: "workspace"
});
});
I trying to make an application that contains multiple views as template. The templates are under the js/app/pages/ folder. And I have 2 templates to show and route. My routing section is:
var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Page', {
templateUrl: 'js/app/pages/Page.html',
controller: 'pageController',
reloadOnSearch: false
})
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false
})
.when('/Admin', {
templateUrl: 'js/app/pages/Admin.html',
controller: 'adminController',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/Page'
});
$locationProvider.html5Mode(true);
});
And my html file contains
<div id="menu"></div>
<div ng-view></div>
Menu div contains menu elements that route me between the pages. For example, when I run this site on browser, URL will be localhost/Page, and when I click the settings button URL change with localhost/Settings. But when I press the F5 button in my keyboard. Page gives me error The resource cannot be found..
I search on the internet "how to refresh routing page in angularjs" and find some solutions but I couldn't make them work for me. I tried $route.reload() and $routeUpdate() method but that does not work for me. Maybe I'm wrong in something.
If you are using Apache server this should work run this in terminal
sudo a2enmod rewrite && sudo service apache2 restart
works for me
Solved! I couldn't manage refresh with ngRoute. Then i convert it into ui-router. I declare the states by urls. And the refresh is working. Thanks for comments and answers. Maybe this will help someone.
Actually when you are pressing F5 from keyboard, it is hitting to your server for that page, not angular because you don't have any # sign between your URL. For angular, URL should be like as - localhost/#/Page
Use html5mode
A great article about it here
to init its very simple
.config(function($routeProvider, $locationProvider) {
// other routes here
$locationProvider.html5Mode(true);
});
When you "reload a page", you whole app will reinit again. That means if you are not on the main page, and the sub route you are at missing some data, you will likely get an error.
You should look into resolve attribute for routes, so for example,
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false,
resolve: {
resourceone: function(){return whatsneeedtoberesolvehere;}
}
})
that way no matter where your app is reloaded, it will have the necessary data to boot the page
Just keep the # in URL, you don't have to put extra effort to manage reloads etc. you can think a "#" in URL represent a specific state in single page application.
Otherwise it can be managed by module rewriting, that map the url with hashed version URL internally for AngularJs app.
I have been beating my head against the wall trying to figure out why angularJS routing won't work in phonegap for me. I have all the files setup correctly and i don't receive any errors. I'm trying to change the url using the $location.url service directly from angular. So when you tap on a div the controller will have $location.url("profile") for example and nothing will happen. I tried the solution found in this stackoverflow but that's not working for me. Am I doing something wrong, or is there a better way to be approaching this? Following is the routing I have setup
var app = angular.module("App", ["hmTouchevents"])
.config(function($routeProvider) {
$routeProvider
.when("/index.html", {
templateUrl: "/views/login.html",
controller: "loginCtlr"
})
.when("/landing", {
templateUrl: "/views/landing.html",
controller: "landingCtlr"
})
.when("/single-view/:id", {
templateUrl: "/views/single-view.html",
controller: "singleViewCtlr"
})
.when("/restaurant", {
templateUrl: "/views/restaurant-info.html",
controller: "restaurantCtlr"
})
.when("/profile/:id", {
templateUrl: "/views/profile.html",
controller: "profileCtlr"
})
.when("/lists/:list", {
templateUrl: "/views/lists.html",
controller: "listsCtlr"
})
.when("/follow/:type", {
templateUrl: "/views/follow.html",
controller: "followCtlr"
});
});
A sample controller would be:
app.controller("listsCtlr", ["$scope", "$location", function($scope, $location){
$scope.goTo("profile");
}]);
As always any help is much appreciated.
I had a problem similar to this tonight. The core issue here is that PhoneGap doesn't have a web server built in. If you're developing locally, you probably are using a web server, so you can do something like: http://localhost/#/profile and the routing will work.
However, PhoneGap loads your code with a file:// URL, not http://. If you do $location.url("profile") you're replacing the entire URL with just file://profile, which doesn't exist. Same thing if you use a link like this: My Profile
The solution is to somehow get your links to point to the right place. If you're using $location.url() you can prefix it with your file path: $location.url( window.location + "#/profile" )
If you're just making a link, you should be able to get away with taking off the leading slash to make it a relative URL: My Profile becomes My Profile
Had the exact same issue... I was able to fix this easily by adding the following code to the head of my index.html file.
<base href="/android_asset/www/" />
Hope this helps.
in your controller try...
$location.path('/profile');
After much tinkering, here's what worked for me!
If you can use $location.path() within the controller, it should work as expected, but if you need to use href-style links, you can build the links off the angular "base" page (e.g. main.html):
Link To Profile