I apologize if this a duplicate question. I spent quite a while searching for a similar question but was not able to find one.
I am looking to get the URL of the current PartialView in java-script (in an angular controller). So far, methods I have found all return the existing browser URL:
window.href.location;
window.href.pathname;
as well as the $location service method in angular. However, I'm looking for a method that returns the same value as the Razor's '#Request.RawUrl' (i.e. the actual Route/URL of the PartialView).
For example, on page '/Category/{categoryId}/Product' I am showing a list of products. I am then using ngDialog and ngInclude to load a PartialView from '/Category/{categoryId}/Product/{productId}/[Whatever]' in a Dialog page.
Then I fire an angular controller in the PartialView. In that controller, I'd like to use the $http service and a URL relative to the PartialView's url. However, this is not possible, since angular is not aware of the PartialView's URL (i.e. the URL that #Request.RawUrl produces if used in the PartialView).
Thank you.
example
Related
I'm doing a quite large app that needs to save a Javascript object and save it to client's disk and viceversa: retrieve JSON object and parse it.
I've managed to save and upload the file, but here's the problem: When the file is successfully uploaded (checked from the console and inspector), Angular does not display anything at the ng-repeats, ng-model...
I assume the problem is that Angular does not know that the object has changed. I am wondering, since I seem not to find it anywhere: how can I re-render all of my Angular app?
What we did in one of our Angular projects, is some kind of 'cacheId'.
So imagine simple POST service generating random integer number.
Imagine another GET service returning that number.
Now in your Angular templates, wherever you specify template rul name, add 'cacheId' as param.
Instead oF that:
templateUrl: 'some-folder/some-template.tpl.html'
Do that:
templateUrl: 'some-folder/some-template.tpl.html?cachedId=' + someService.cacheId
What advantage?
You can click resetCache() url and generate different cacheId
client will get different cacheId in next request
browser will treat html template url as new url and will reload template
by reloading template you will get new data in
Something like that might work.
I wan to send parameter to service function.
getQuestions : function(stateCode) : questionResource.js
stateCode is set in $scope from the response of dtoResource.rc1Step1DTO()
angular
.module('autoQuote')
//Do initalization on page load
.run(['$log', '$rootScope', '$state', 'dtoResource', 'questionResource', function($log, $rootScope, $state, dtoResource, questionResource) {
$log.info('Post DTO on page load.');
dtoResource.rc1Step1DTO()
.then(questionResource.getQuestions)
.then(function(questions) {
$rootScope.questions = questions;
console.log('Obtained questions. Assigned to rootscope');
})
.then(function() {
console.log('This should be printed after the above methods are done executing');
console.log($rootScope);
});
}])
How to pass state code to the other function.
its position in scope is
$scope.postAutoQuoteObj.SessionInfo.StateCode
Below is the plunker for code
http://plnkr.co/edit/Op1QDwUBECAosPUC7r3N?p=preview
your module autoQuote.run() will only be called once during your applications loading. So don't expect to have it execute again.
you are close to the right answer. you just need to do some reorganization. One tip I would offer is to worry about creating a directive later, first get the controllers, routes working first.
You have created an excellent framework to start. you are using ui-router.
this means that you can tell ui-router what controller to execute when a state is requested. so the life cycle for your application is as follows
module.run //any code in here first. only on intial load
module.config //in your case app.config which creates your states.
then depending what state you are viewing based on the url;
the controller for that state (or view) will be executed
so if you add another state config for / you can bind that state to your autoQuoteCtrl.
additionally, there are a number of other issues, such as attempting to use ng-model and value in an input element. this is not correct.
you are not implementing your ui-views. this will mean your controllers will never execute. technically, it your case autoQuoteCtrl would be executed but only because you forced it onto the page using ng-controller, which is what ui-router is designed to avoid.
which I think is why you ended up placing your code in .run(). This was the only place you found your applicaton would "run" the code on page load which is false, it was only running because your app loaded. Sorry if I'm being redundant. But it is an important point.
Also, you are trying to access your json data by passing statecode to your resource. that is not how $resource works. you pass the name of the resource, and it will return everything at that resource. then you filter the code after the promise is returned. you only have one resource. that is "CA.json" so therefore you should be able to get away with only one line in your resource service and only need one resource service. You will need additional non-resource services that can do the heaving lifting of filtering out the correct data from the JSON. typically this is why an app would call out to different resources, so that each one returns the model needed, not a single monolithic resource.
and you should never ever ever be using document.getElementById() you are using angular, so you do not interact with the dom directly
finally, here is a much much revised plunkr to help guide you in the right direction.
http://plnkr.co/edit/dUJm01uu7RnhltC2pLLb?p=preview
I have a SPA webapp that calls a webservice to gather 'X' amount of json objects ~(1 - 30+). I then use this data for multiple changing slides (all data is not displayed in the 1st slide).
I am using Node/Express/Angular/Jade.
How should I stage these slides when I gather the original data from the webservice (can only call the service once because $ constraints)? I would like the back button/urls to work as well. So, should I completely render out the data and use client side JS to hide/show the dom elements based on button clicks (incorporating messy hash bangs and JS methods to track location/flow). Or is there a sexier more efficient way? Should I store my data in the cache and pull from it (using my angularjs ng-view, note: changing my ng-view will be a pain... it would be ideal to have a ng-view within a ng-view in this particular situation, even though that doesnt exist) based on the slide? Or is there another way?
Thank you for your help, let me know if you need further explanation.
For mapping URLs to your angularjs pages, I would suggest using ui-router. You may or may not need ui-router for this particular problem. But, generally, it will help tremendously in organizing the structure of your site.
For the other questions:
I would store your results (which was retrieved from the service) in a $rootScope variable. The page index of your slides will be a parameter in your URL. Based on the value of this parameter, your controller can decide which page content it will display.
I have a grails application where i have to detect if page is rendered successfully.
So, if I have render view: "mypage", I want to know if this page was rendered successfully by tomcat. Whether it reached user or not is not concern here. That is another part which can be tracked by using javascript events.
The solution that comes to my mind is using error controller and url mapping to map any issue like 404 or 500 to one controller but that controller is somewhat generic and will be handling multiple issues and not just this one.
So, Is it possible to exclusively know for this render call if it was rendered properly or not?
Try attaching a filter to the action with the afterView filter type. The documentation mentions that the first argument is an Exception, so if the first argument is null, then the render succeeded. (Also note that the documentation mentions afterView is called before the SiteMesh layout is applied, if that matters for this particular problem)
Imagine I'm on:
http://example.com/
I click in a link containing a hashbang fragment identifier, let's say:
http://example.com/#!/login
I would like it to show the login form without reloading the page. How is this done?
Have a look at jQuery Ajax to find out how to load new content without refreshing the page, then maybe move on to BackboneJS and use its routers to get the hash thing working.
Edit:
Here's a tutorial, I'm not going to write one for you. But it comes down to having a server side which is able to provide the needed content for you (a log in form), whether it does so asynchronously or synchronously is besides the point. Then using a Backbone Router which will read the hash bang and call the right JavaScript function based on this hash bang, this JavaScript function should live inside a Backbone Controller, and it should handle the instantiating of a new Backbone View and adding it to the DOM. The Backbone View could be added to a predefined Backbone Region, and could be loading an UnderscoreJS template to make things even easier.
If you would like a much simpler solution you should take a look at another concise answer here: Handle URL anchor change event in js. In summary, you periodically check window.location.hash for changes and run your javascript to bring up the login content.