for my routing, I am using static templates that come from an external source. However, I keep getting the insecureUrl error from Angular. One solution apparently is to have it with the $sce.trustAsResourceUrl wrapped around it. Now, I am trying to do it the following way:
myapp.config(['$routeProvider', function($routeProvider, $sce) {
$routeProvider
.when('/', {
controller : 'ProductListController',
templateUrl : $sce.trustAsResourceUrl([my_external_template]),
reloadOnSearch: false
})
.otherwise({ redirectTo : '/' });
}]);
However, I get the injector error. Any help?
myapp.config(['$routeProvider', '$sce', function($routeProvider, $sce) {
$routeProvider
.when('/', {
controller : 'ProductListController',
templateUrl : $sce.trustAsResourceUrl([my_external_template]),
reloadOnSearch: false
})
.otherwise({ redirectTo : '/' });
}]);
Since you are manually doing minsafe syntax you need to add $sce to the string part of the injection array (ideally just don't do the minsafe syntax use a plugin to add that before uglification in your build process)
Related
Is it possible to use Angularjs's routing and controller without the templateURL?
For instance, below is my current routes, controllers, and template urls,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/list1",
{
templateUrl: "js/template/2.html",
controller: "controller2"
})
...
And I have ng-view in my html,
<div ng-view></div>
I tested with the routes without templateUrl,
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
//templateUrl: "js/template/1.html",
controller: "controller1"
})
.when("/view1",
{
//templateUrl: "js/template/2.html",
controller: "controller2"
})
...
the result - nothing is displayed on my screen. obviously the controller cannot be triggered anymore.
use template with empty string.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "",
controller: "controller1"
})
Angular uses the $routeProvider Definition to attach a controller to your view. If you don't want to specify the details in $routeProvider config, other option is to let the application land on one page using something like -
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html'
})
.when()
.otherwise({
redirectTo: '/'
});
});
This way user will land on main.html. Now on the main.html you can include several different html templates like -
<div ng-include src="'js/template/1.html'" ng-controller = 'Controller1'></div>
<div ng-include src="'js/template/2.html'" ng-controller = 'Controller2'></div>
Notice the syntax of using/including template above - "'<<Path>>'"
Hope this helps.
Setting template with empty string make error and cause recursion loading ; i solved it by just add the link of empty html file.
return app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/",
{
template: "dummy.htm",
controller: "controller1"
})
My /home template doesn't have an associated controller (it's blank). Anyway to skip loading the controller and just load the view? I'm using AngularAMD to lazy load so it's an additional call just to get a blank controller file.
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl 'home/home.html',
controller: 'HomeController' //is empty because page is just static text
})
.when('/login', {
templateUrl: 'login/login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/home'
});
});
Nvm, found that you can leave controller: '' blank and it works. It was just throwing an error in my case because I forgot to remove the ng-controller="HomeController" tag from the template/view. Once I removed that, the error was no longer being thrown (in console).
I have a small AngularJS website where I use one controller and a view. I wanted to remove the /# in the URL with $locationProvider.html5Mode(true), but here starts the problem.
My code:
[...]
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/'});
}]);
When I do this I get the error that he can't find the home view on views/home.html (which is the correct path). When I delete the html5mode for removing the /# in the URL it all works just fine.
With this:
[...]
.config(['$routeProvider', function($routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/Project',
{
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.otherwise({redirectTo: '/Project'});
}]);
Summary: when I add the html5mode it gives me the error that he can't find the view. When I remove it it all works.
Anyone who has an idea what the problem could be?
I am not sure what is going on here.
angular.module('myApp', [
'ngRoute',
'myApp.controllers',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: '/partials/homepage',
controller: 'MyCtrl1'
}).
when('/about/:id', {
templateUrl: '/partials/'+$routeParams.id,
controller: 'MyCtrl1'
}).
when('/funnel', {
templateUrl: '/partials/funnel',
controller: 'MyCtrl2'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
No matter if I browse to / or /about/:id I get $routeParams is undefined.
You need to inject $routeParams service to use it. However in your case looks like you want to dynamically determine the template based on the routeparam. You cannot directly do it in the config phase of the app, which runs only once as a part of app initialization stage (and also you can inject $routeParams in the config phase of the app since there is no such provider). You you may want to look for a way to retrieve dynamic template and in order to support this angular provides this facility to use function as templateUrl to be able to dynamically determine the template url based on any routeparameters (which will be argument in the function).
You can do it this way:-
when('/about/:id', {
templateUrl: function(routeParam){ //register it as function
return '/partials/' + routeParam.id; //Get the id from the argument
},
controller: 'MyCtrl1'
}).
Right from documentation.
templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following parameters:
{Array.<Object>} - route parameters extracted from the current $location.path() by applying the current route
It's because of this line:
templateUrl: '/partials/'+$routeParams.id,
You're using $routeParams without every declaring or injecting it. If you add it to the params your function accepts, your page should stop throwing that error:
config(function ($routeProvider, $routeParams, $locationProvider) {
// ...
}
I'd like to know if it's possible to dynamically construct the templateUrl string used in the routeProvider, with access to the route variables. I want to something like the following, which does not work obviously but should give you an idea of what I wish I could do:
.config(function ($routeProvider) {
$routeProvider
.when('/:pathFrag', {
templateUrl: getTemplateUrl( pathFrag ), // some callable with access to pathFrag
controller: 'MainCtrl'
})
thanks!
Check the page of $routeProvider
and from the docs...
templateUrl – {string=|function()=} – path or function that returns a
path to an html template that should be used by ngView.
.config(function ($routeProvider) {
$routeProvider
.when('/:pathFrag', {
templateUrl: function(pathFrag){
//write your code...
return tempUrl; //return the required path for file
},
controller: 'MainCtrl'
})