I can't properly whitelist urls.
I'm getting "Error: [$sce:insecurl]".
The paths exist, and when I place the templates in the same folder it all works.
What is the problem?
var platform = angular.module('platform', ['ngRoute', 'testControllers', 'testServices']);
platform.config(['$sceDelegateProvider', '$routeProvider',
function($sceDelegateProvider, $routeProvider) {
//$sceDelegateProvider.resourceUrlWhitelist(['self', '../templates/**']);
$sceDelegateProvider.resourceUrlWhitelist(['self', 'C:/Users/Royi/Desktop/Platform/templates/**']);
$routeProvider.
when('/', {
templateUrl: 'C:/Users/Royi/Desktop/Platform/templates/text.html',
controller: 'testController'
}).
when('/:pageId', {
templateUrl: 'C:/Users/Royi/Desktop/Platform/templates/text.html',
controller: 'testController'
}).
otherwise({
redirectTo: '/'
});
}]);
C:/ is not usually an URL accessible over HTTP. The page may pick up items in the local directory, but for using C:/ you should usually use file:///C:/ (note the third slash).
Also, as paths on your own drive can't be "trusted" by something like Chrome, you'll be getting issues. See the documentation for insecurl enter link description here
Related
In tutorial
When you now navigate to /index.html, you are redirected to
/index.html#!/phones and the phone list appears in the browser.
Where is it configured, to redirect /index.html to /index.html#!/phones ?
if you continue reading the tutorial you will find this section Configuring a Module and here the tutorial talks about ngRoute and hte config file app/app.config.js.
In this file you configure your routes, so with this:
angular.
module('phonecatApp').
config(['$locationProvider', '$routeProvider',
function config($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.
when('/phones', {
template: '<phone-list></phone-list>'
}).
when('/phones/:phoneId', {
template: '<phone-detail></phone-detail>'
}).
otherwise('/phones');
}
]);
You can see that no one state has the / path so it will apply these sentence otherwise('/phones') and it will redirect to that url.
Keep in mind that if there is no one match it will go to otherwise.
If you look at App Config
$routeProvider.
when('/phones', {
template: '<phone-list></phone-list>'
}).
when('/phones/:phoneId', {
template: '<phone-detail></phone-detail>'
}).
otherwise('/phones');
}
In this case case when you go to '/' no mapping is configured ,so it goes to otherwise('/phones');
you have to find function responsible for routing. Look at app.config.js file.
Suggestion: In bigger applications good practise is separating routing for each module in single file.
I'm building my portfolio as a front-end dev and it's still under developmentt. To test it out I used FTP to upload the files to my justhost domain which is a success. Now, say my site is www.johndoe.com (okay fine, my actual site is 'hassanefall.com' to make this easier to understand :)).
(I'm using angularjs for the routes) I want to go to a specific route/page: www.hassanefall.com/about. The about page works when i navigate through clicking the links.
But, when I type in the url the exact url path, there's a 404 error page.
I have '/work', '/contact', etc. and whenever I type in the url 'www.hassanefall.com/contact' directly without navigating to it, a 404 page occurs. It's as if the file for each page/route doesn't exist.Help?
Here's the code.
Note: I removed the hash from the url using base '/' and $relocationProvider. If there's an answer to this it's greatly appreciated.
var app = angular.module('mySite', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/projects', {
controller: 'HomeController',
templateUrl: 'views/projects.html'
})
.when('/service', {
controller: 'HomeController',
templateUrl: 'views/service.html'
})
.when('/about', {
controller: 'HomeController',
templateUrl: 'views/about.html'
})
.when('/contact', {
controller: 'ContactController',
templateUrl: 'views/contact.html'
})
.when('/portfolio/:id', {
controller: 'ItemController',
templateUrl: 'views/item.html'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
});
If you need more code sample please let me know. :)
Your server should support HTML5 mode. What is happening here is that the server is looking for your client side route ('contact', for example), and does not find it. That's why you have 404 not found error.
Another solution is to go back to hash mode..
This link does not work in all browsers in my angularjs onepage app.
homepage
Depending on the browser the url becomes different. In some browser the url ends with a trailing "/#" and others with "/#/" e.g. "http://localhost/#" and "http://localhost/#/". This means that in non IE browsers request ending with /# fails to load ViewA
This is my route provider:
mainApp.config(["$routeProvider",
function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "Views/ViewA.html"
})
.when("/home", {
templateUrl: "Views/ViewB.html"
})
.otherwise({
redirectTo: "/"
});
}]);
Is there a way to make the browsers behave the same? A library to reference?
My only references er:
angular.js
angular-route.js
I suggest you to take a look at the answer to a similar question here
It basically depends on the angular routing mode you want to use:
Hashbang Mode;
HTML5 Mode;
Hashbang in HTML5 Mode
I'd say your anchor should be:
homepage
Adding a locationProvider with html5mode set to true, seems to solve my issues
mainApp.config(["$locationProvider", "$routeProvider",
function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/", {
templateUrl: "Views/ViewA.html"
})
.when("/home", {
templateUrl: "Views/ViewB.html"
})
.otherwise({
redirectTo: "/"
});
}]);
I amusing Nodejs and creating a single page app. Locally everything is working fine. When I deploy to my AWS server, I get the follow error (Blocked loading resource from url not allowed by $sceDelegate policy. URL: login.html). I am using angularjs and putting my templates on my master SPA page like so.
doctype html
html(lang='en',ng-app='ChangeApp',md-theme='green')
include ./includes/head
body
div.containerMain
div.main-content
div(ng-view,autoscroll="true")
noscript This site requires javascript!
script(type="text/ng-template", id="login.html")
include top/login
script(type="text/ng-template", id="jobseeker.html")
include jobSeekers/jobSeeker
My angular controller looks like
angular.module('ChangeApp',
['ChangeApp.services',
'ChangeApp.directives',
'ChangeApp.controllers',
'ngRoute',
'ngMaterial']);
angular.module('ChangeApp')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
console.log('Loaded: app.js');
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
.when('/jobseeker', {
templateUrl: 'jobseeker.html',
controller: 'JobseekerCtrl'
})
.otherwise({
redirectTo: '/login'
});
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
Any thoughts or insights would be greatly appreciated.
i got this problem with angular when I open the site in Chrome
_localhost/angular/_
the url changes to
_localhost/#_
however in firefox everything is as expected
I asume its caused by the routeProvider
var Angapp = angular.module('angApp', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'partials/main.html',
controller: mainCtrl
})
.when('/:catId', {
templateUrl: 'partials/category.html',
controller: categoryCtrl
})
.when('/detail/:detId', {
templateUrl: 'partials/detail.html',
controller: detailsCtrl
})
.otherwise({
redirectTo: '/'
});
}]);
I hope someone can help me with this and explain what is happening what did i miss.
thanks in advance.
EDIT:
when I add
.....
config(['$routeProvider','$locationProvider', function($routeProvider. $locationProvider){
.......
$locationProvider.html5Mode(true);
the routing breaks completely in Chrome and firefox
_localhost/angular/#%2Flink_
when i remove the "#%2F" and reload the page I get a 404 as return
when i hit backspace then the site loads correctly!
Please be sure that your browser supports HTML5. For browsers that don't support HTML5 history API AngularJS will automatically fall back to hasbang URLs so no way to "remove" the hash(#).