I have a route that looks like and this and works:
when('/videos', {
templateUrl: 'partials/partial1',
controller: 'MyCtrl1'
}).
However, if I add a named group to the when:
when('/videos/:video_id', {
templateUrl: 'partials/partial1',
controller: 'MyCtrl1'
}).
it does not work when I try to visit videos/1 in the browser.
I get a bunch of errors in the console, along the lines of:
Uncaught SyntaxError: Unexpected token <
What's strange is that I also get an error that says
Resource interpreted as Stylesheet but transferred with MIME type text/html:
and the console says that is coming from a file named:
video_id:13
It seems like video_id is being interpreted as a file of its own?
I was under the impression that you could only do this with route names, and not with template names. Whenever you use : to designate a route parameter, it gets stored in $routeParams; however, I don't think there is an analogous service for use with template names. If so, the errors make sense.
Keep in mind that the route paths are the outward-facing paths seen in the URL. You will not see the template names in this way; the point of this code is to connect them. There is probably a way to restructure your application so that you can do what you want but also only have one partial per route, as I think is the best practice.
You're probably getting that error because your server is responding with a 404 or some other unexpected response. According to the $routeProvider documentation you can't even use : to specify a route parameter for the templateUrl but you can use a function
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
so then you can do
var partial1UrlBuilder = function(routeParams) {
return 'partials/partial1/' + routeParams.id;
};
...
when('/view1', {
templateUrl: partial1UrlBuilder,
controller: 'MyCtrl1'
}).
when('/videos/:video_id', {
templateUrl: '/partials/partial1',
controller: 'MyCtrl1'
})
I too faced same problem , prefixing slash before partials solved the issue.
Related
I try to write my first component. Actually, I refactor one of my previous webpage to use more of the AngularJS functionality.
I use AngularJS 1.5.8
Honestly I always got the following inject error:
http://screencast.com/t/xpyVqSjwUxU
Here is my component code:
http://screencast.com/t/zMaED5ZfZ
The error only came up, when I add the component.js file in index.html with a script tag.
Any idea, what I'm gonna mess? I read the component angularjs documentation but not find the error.
Try putting the return value { templateUrl: ..., controller..., etc } in the .component() function.
angular
.module('Profile')
.component('UpdatePasswordComponent', {
templateUrl: '/modules/profile/update-password/update-password.component.html',
controller: UpdatePasswordController,
controllerAs: 'vm'
});
Another option might be to just change this line
.component('UpdatePasswordComponent', Component)
to
.component('UpdatePasswordComponent', Component())
which will actually call and return the object, but I'm not positive on this one.
I'm a newbie in AngularJS, and I was using ui.router.
What I am trying to do is load html from different portals, like:
/s3/home
/goo/home
/gle/home
All prefix like s3, goo, gle are from backend, I have to get it first then load my pages, any idea for this, any way to put a variable in relative path, like
/{{portal}}/home
Mockup for expression:
angular.module('app')
.config(function ($stateProvider) {
$stateProvider
.state('{{portal}}.home', { //portal from backend
url: '/',
views: {
'content#': {
templateUrl: 'scripts/app/{{portal}}/home.html', //portal from backend
controller: 'MainController'
}
}
});
})
Find a way to do it, dynamic templateURL will do the same thing
http://fredparke.com/blog/angularjs-directive-dynamic-template
I want to use it in Javascript, is it possible
No i'm afraid not. Use Curly braces to bind expressions to elements in your html. I think you need to rethink more fundamentally your application and why you want to have "variable" template urls in such a way. Try and read up on REST as that's probably what you want to have for your backend. The frontend can then parameterise requests via url/query parameters
I am unable to route the path code/:code in my website. I receive the following error:
Firefox can't find the file at /C:/Code/dola/mobileweb/app/code/123
default.htm is located in the app folder.
I am using the mobileangularui framework. I have the following routes declared (among others):
app.config(function ($routeProvider) {
$routeProvider.when('/', { templateUrl: 'codeview.htm', reloadOnSearch: false });
$routeProvider.when('/code/:code', { templateUrl: 'codeview.htm', reloadOnSearch: false });
});
Everything works fine, except when I try e.g. code/12345.
This route is intended for a call from outside, e.g. www.mywebsite.com/code/12345.
I see two issues. First is re-declaring the $routeProvider unnecessarily. The second is you don't have an "otherwise" clause to catch everything you aren't already.
Also, not an error, but good practice to follow; you are missing a controller and controllerAs explicit directive for each entry. Try this:
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'codeview.htm'
, controller: 'HomeController'
, controllerAs: 'vm'
, reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
})
});
This was based on the assumption that '/code/:code' is not its own page. The option is easy to add/change if this is not the case, following the above model.
Hope this helps.
-C§
-edit-
It looks as though the best way to do this (as with what I've done in my current project for such needs) is to store the code into a global (model) variable and call the redirect using $location.path('/');. Something like the below would be part of the click-function:
DataService.code = vm.code; //the code value selected
$location.path('/');
And the resulting page would have as part of its initialization routine:
vm.code = DataService.code; //retrieves the code from memory
//and uses it to populate the page appropriately
I'm unfamiliar with how to specify a URL and have it read what page it should populate based on the trailer, aside from using PHP to catch the URL extension with the index and a $_GET redirection process. I know this can be achieved using AJAX or a Jquery catch, but I'm still somewhat new to JavaScript as a whole and not sure what the process would look like.
Alternatively, you could designate a page for each possible code (ex: 12345.html || 12345.php).
Hope this also helps.
-C§
I am quite new to Angular and now trying to make a simple routing with it. I have my landing page, currently called index2.html, containing some .js and .css includes and a div containing <ng-view></ng-view> where my content should go into.
My app.js looks like this:
var module1 = angular.module('module1', ['ngRoute']);
module1.config(function($routeProvider, $locationProvider){
$routeProvider.when("/",
{
templateUrl: "page1.html",
controller: "uiCtrl"
}
).when("/:param",
{
templateUrl: "page1.html",
controller: "uiCtrl"
}
).when("/transactions",
{
templateUrl: "page2.html",
controller: "uiCtrl"
});
});
But actually this does quite confusing things. Calling http://myurl.com/index2.html, the content of page1.html is properly loaded into the ng-view. So far, so good, but calling index2.html/123 gives my a Not Found instead of interpreting 123 as a parameter. I don't know why, but to make 123 a paremeter i have to call index2.html#123, which works, but then instantly updates the url to index2.html#/123.
Calling index2.html/transactions doesn't work at all. How can i call my /transactions route?
EDIT: If this is useful, i am using JQueryMobile as well in these pages.
I finally got what I want by getting the HTML5 mode work, which makes things so much easier.
After setting $locationProvider.html5Mode(true); I had to re-configure my webserver, what I wasn't able to manage until I found this nice guide: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
Now I can access each of my routes at the conventional way using a slash. Parameters can be passed with ? and &, as usual and I don't need to grapple with confusing hashtags and self-changing url's anymore.
Take the following example directive:
.directive("myDirective", function() {
return {
restrict: "A",
templateUrl: "/my/absolute/path.tmplt.html",
controller: ...Do Controller Stuff...
}
});
This runs through the Closure Compiler without error. However, when loading the app I am greeted with a 404 as it tries to load the full /my/absolute/path.tmplt.html path. Removing the leading '/' resolves the problem. This is also a problem for
ng-include(src="'/my/url'"), ng-controller="myCtrl") located in the HTML files and I suspect anywhere you could reference a url.
So why do absolute paths fail while relative ones work just fine?
You have an invalid path specified. If you current page is asdf.com/boo/yourpage try going to asdf.com/my/absolute/path.tmplt.html You should see a 404.
This is not really related to angular Or google closure and is related to your folder structure + your server configuration.