I am loading an angular application in a webview as shown below
WebView.loadUrl(String url, Map<String, String> additionalHttpHeaders)
I maintain a state for this in the angular application and show the content accordingly.Is there a way i can read the headers sent fromt he webview in my angular application ?
state in my angular code
$stateProvider.state('external', {
abstract: true,
template: '<div ui-view></div>'
});
$stateProvider.state('external.details', {
url: '/details?vendor&id&title',
templateUrl: '/partials/details',
controller: 'DetailsCtrl',
});
No, you can't use Javascript to access request headers (it's by design, so not an angularjs issue).
The only way to do this is for the server to read the request headers and then pass them on to the angular application in some form.
Why not use the URL query string optional parameters if you want to pass values to the ui-router?
Related
I have built a project using AngularJS and AngularFire. I want to use the AngularFire authentication with AngularJS to handle the account management actions.
How can I use the AngularJS router to create an email action handler?
My initial thought is to do this:
$routeProvider
.when('/accountmgmt/:mode/:oobCode',{
templateUrl: 'views/accountmgmt.html',
controller: 'AccountMgmtCtrl'
})
Then I would use $routeParams to get the values from the url and complete the action but is this correct?
The example on the firebase documentation shows a url with this pattern:
https://example.com/acctmgmt?mode=<action>&oobCode=<code>
Should I my route look more like this?
.when('/accountmgmt?mode=/:mode/&oobCode=/:oobCode', {
templateUrl: 'views/accountmgmt.html',
controller: 'AccountMgmtCtrl'
})
I'm a newbie to Angular. Currently I've a challenge I'm been working for hours. I thought of posting here. The problem is how can I preserve the query string value when the route changes in Angular. I'm using the ui router. The querystring has an uid that will be send in each request which I could able achieve through httpinterceptor. But I really got struck up in preserving the uid in querystring whenever the route changes. Can anyone give some insights on this please?
When using ui router you (usually) specify the url, template and controller for that state:
.state('mystate', {
url: "/mystate",
template: "<p>Some template content using scope: {{title}}</p>",
controller: function($scope) {
$scope.title = "State 1";
}
});
To preserve the query string between states you can add a state param to your states:
.state('mystate', {
url: "/mystate?myParam",
...
...
},
You can then access the parameter in the state controller with $stateParams.myParam.
Note: You have to pass myParam when changing state:
$state.go("mystate", {myParam: "yourValueGoesHere"});
Read more in ui router doc
I am new to nodejs+angular app. I just want to pass some data from node server to pages generated by angular. How can I do that? is there something like,
response.render('URL',JSONDATA);
using which I am able to get data to a specified URL. Just for information I am using ng-view/ ng-route on my UI pages for fast loading.
On Client side:
app.config([ '$locationProvider','$routeProvider', function($locationProvider,$routeProvider) {
//$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl : 'src/pages/login.html'
}).when('/new-enquiry', {
templateUrl : 'src/pages/enq-form.html'
}).when('/dashboard', {
templateUrl : 'src/pages/dashboard.html'
}).when('/edit-enquiry', {
templateUrl : 'src/pages/edit.html'
}).when('/all-enquiry', {
templateUrl : 'src/pages/all-enquiry.html'
});
} ]);
What I have to do is for example in login page, after submitting I need to redirect to a new page and send username to that page. I dont want to use ejs and jade.
Have a look at the docs at
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
https://docs.angularjs.org/api/ng/service/$http
For example, you can configure a controller for every route, which then uses the $http service to request data from your Node.js backend. The data is rendered in the template you provide per route (such as src/pages/login.html).
I want to try dynamic route request but It's not working properly. And here I explain my coding style step by step.
<nav class="main-nav" ng-show="global.user.user_type!='admin'" ng-repeat="mMenu in Mainmenu">
{{mMenu.MenuName}}
</nav>
This code contain URL link and It's load every time with a variable that is web address link. And the link is something like that - http://localhost/views/adminpanel/about.html
In AngularJS Controller contain the code -
$scope.geturl = function(url)
{
var params = {
url1 : '/views/adminpanel/'+url
}
$http({'method' : 'post', url : 'views/adminpanel/'+url, data: params
}).success(function(data)
{
}).
error(function(data){
})
}
configuring and using ngRoute -
when('/views/adminpanel/:url', {
controller: 'homeCntrl',
templateUrl: 'views/adminpanel/:url'
})
In server side (Express) :
Routing HTTP requests, Configuring middleware and Rendering HTML views
app.post('/views/adminpanel/:url',auth.requiresLogin, users.geturl);
exports.geturl= function(req,res)
{
var url = req.body.url1;
res.render(url);
}
This is all about my rendering process but It's not working. In browser It only shows the URL link but not shows any content. How can I solve It any idea?
I think you are confusing things:
first of all you have a link together with a ngClick: you should have either of those
your ngClick has an empty success function, so it does nothing with the template
you have a route set with express that matches with the ngRoute (btw, POST is usually used to create resources, you should GET the template)
your templateUrl is going to send a GET request to (literally) /views/adminpanel/:url, it does not replace :url
To fix it:
set a different endpoint for your APIs
use a GET endpoint instead of a POST
change the ngRoute to:
when('/views/adminpanel/:url', {
controller: 'homeCntrl',
templateUrl: function(param) {
return '/api/<path>/' + param.url;
}
})
remove the ngClick from the <a>
I am working on project where my role is server-side programmer.Client side developer used Angular js while designing pages.
Problem I am facing is we have one page where I need to pass one parameter along with url to server
<a id="startQuiz" href="#/Quiz" >Start Quiz</a>
jquery code is
$('#startQuiz').click(function (e) {
e.preventDefault();
window.location.href = '#/Quiz/' + selectedTopic;
}
Controller code is
#RequestMapping(value="/Quiz", method = RequestMethod.GET)
public String Quiz(HttpServletRequest request,Model model,HttpServletResponse response,#RequestParam(value = "topic", required = false) String topic) throws Exception {
System.out.println("select topic : "+topic);
}
I am getting topic as null cause Nothing after the hash # sign is getting sent to the server, hence the null values
Rounting file Is
app.config(function($routeProvider){
$routeProvider
.when("/Quiz", {templateUrl: "Quiz", controller: "PageCtrl"})
});
So, What change should I make in routing so I can get value of topic in Controller
Any way to do that?
The URL of the page is not what matters here. That URL will only load the main page template.
What matters is the URL used to send the AJAX request to your backend controller.
The route should be defined as
$routeProvider
.when("/Quiz/:topicId", {
templateUrl: "Quiz",
controller: "PageCtrl"
})
Then, using the $routeParams service in the PageCtrl, you can get the value of topicId, and send the appropriate AJAX request to the backend.