This is my angular app-file where i add my routing:
(function() {
var app = angular.module("CustCMS", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/Index", {
templateUrl: "~/CustCMS/Views/User/Index.html",
controller: "IndexController"
})
.when("/User/:userid", {
templateUrl: "~/CustCMS/Views/User/User.html",
controller: "UserController"
})
.otherwise({ redirectTo: "/Index" });
});
}());
I have tried some different ways to enter the templateUrl but i always get this error:
[$compile:tpload] Failed to load template: ~/CustCMS/Views/User/Index.html (HTTP status: 404 Not Found)
What do i have to enter for the templateUrl to find my views?
So i found the answere. Angular can't handle cshtml files so you have to user static views. And becuase of some constraint in visual studio you can't have static views in the views folder so you have to create another folder and add the static views to that folder.
because you are including your index.html in some folder. change the otherwise route to
/CustCMS/Views/User/Index.html.
Related
Anguilar 1.5.*
I can not get angular to use my template cache. I gave it a invalid path name on purpose so I would get html file not found. But instead it is not using template cache and just requesting the html files.
templates.js
angular.module("gulpTemplates", []).run(["$templateCache", function($templateCache) { $templateCache.put("aaaa/views/examples.html"
...
app.js
var gulpNewy =
angular
.module('gulpNewy', ['ngRoute', 'gulpTemplates'])
.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'homeCtrl'
})
.when('/examples', {
templateUrl: 'views/examples.html'
})
.when('/screen-shots', {
templateUrl: 'views/screen-shots.html'
})
index.html
<div class="col-xs-12" ng-view></div>
What am I doing wrong?
Ok, I found the issue.
If you are using ng-view, templateCache will not work by default for you. This is because with ng-view you do not need to use ng-include. templateCache needs to be used with ng-include or $templateCache.get.
Regardless of $templateCache.get, ng-view will not look in templateCache.
Trying to use idea from this tutorial: https://spring.io/guides/tutorials/spring-security-and-angular-js/
#Override
protected void configure(HttpSecurity http) throws Exception {
http.formLogin().and()
.logout().and().authorizeRequests()
.antMatchers("/index.html", "/main.html", "admin.html",
"/login.html", "/")
.permitAll().anyRequest()
.authenticated().and().csrf().disable();
}
Also I use angularjs ngRoute:
var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'MainController'
})
.when('/admin', {
templateUrl: 'admin.html',
controller: 'AdminController'
})
.when('/login', {
templateUrl: 'login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/'
});
}]);
And so on.
But when I try to open admin page (for example /#/admin) it opens login form (from the box) and after that I expect that it should redirect me back to /#/admin, but it redirect me to /admin.html, which is out of the angular control.
How to solve this?
To address the /error redirection you can create a controller like this
#Controller
public class ErrorController {
#RequestMapping(value="/error")
public String error() {
return "forward:/index.html";
}
}
from a spring-boot perspective it should always fall in index.html where you are "giving the control to angular"
Im assuming your resources folder structure is as follows
resources/static/index.html
so that index gets rendered when accesing root.
My directory structure is diffent than the one on the tutorial but it should work
Just Understood what your problem is:
So in your angular config add this :
$locationProvider.html5Mode(true).hashPrefix('#');
and in the index.htm include the base tag
<base href="<!-- #echo BASE_URL -->" target="_blank">
this will get rid of the '#' charecter and everything should work
Hope it helps
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 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
I'm working on a AngularJS + OnsenUI project, and I'm having problems with the navigation.
Let's say that I have a module:
angular
.module('app.home', ['ui.utils','ngRoute','ngAnimate'])
.controller('HomeCtrl', HomeCtrl)
.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'path/to/home/template',
controller: 'HomeCtrl'
})
.when('/test1', {
templateUrl: 'path/to/template',
controller: 'TestOneCtrl'
})
.when('/test2', {
templateUrl: 'path/to/template',
controller: 'TestTwoCtrl'
})
.otherwise({
redirectTo: 'path/to/home/template'
});
});
In the HomeCtrl I'm supposed to (depending on the result of certain functions) navigate to either test1.html or test2.html. My problem is that I don't know how to link the routeProvider to the the ons.navigator.pushPage function.
This doesn't work:
var url = '/test1';
$scope.navigator.pushPage( url, { animation : 'slide' } );
This works:
var url = '/absolute/path/to/template';
$scope.navigator.pushPage( url, { animation : 'slide' } );
My question is what do I need to do so I don't have to write the absolute path to the template in the url variable? Apparently I'm missing out on something, but I can't figure out what.
Thanks in advance!
I think it's because the path used in $routeProvider is not the same type of that of pageUrl used in navigator.pushPage().
$routeProvider.when(path, route);
and
navigator.pushPage(pageUrl, option);
Path is like the pattern or string of your app url found in the browser address bar. For example, "http://localhost:8000/app/index.html#/test1". That's when you can refer to this in the routeProvider as "/test1". However, in the navigator.pushPage(), you will need to specify exact url to the page just like how you set ur templateUrl inside $routeProvider. In other words, pageUrl = route.
That's just from my understanding though.