Search Results

Search found 169 results on 7 pages for 'angularjs'.

Page 4/7 | < Previous Page | 1 2 3 4 5 6 7  | Next Page >

  • Set Context User Principal for Customized Authentication in SignalR

    - by Shaun
    Originally posted on: http://geekswithblogs.net/shaunxu/archive/2014/05/27/set-context-user-principal-for-customized-authentication-in-signalr.aspxCurrently I'm working on a single page application project which is built on AngularJS and ASP.NET WebAPI. When I need to implement some features that needs real-time communication and push notifications from server side I decided to use SignalR. SignalR is a project currently developed by Microsoft to build web-based, read-time communication application. You can find it here. With a lot of introductions and guides it's not a difficult task to use SignalR with ASP.NET WebAPI and AngularJS. I followed this and this even though it's based on SignalR 1. But when I tried to implement the authentication for my SignalR I was struggled 2 days and finally I got a solution by myself. This might not be the best one but it actually solved all my problem.   In many articles it's said that you don't need to worry about the authentication of SignalR since it uses the web application authentication. For example if your web application utilizes form authentication, SignalR will use the user principal your web application authentication module resolved, check if the principal exist and authenticated. But in my solution my ASP.NET WebAPI, which is hosting SignalR as well, utilizes OAuth Bearer authentication. So when the SignalR connection was established the context user principal was empty. So I need to authentication and pass the principal by myself.   Firstly I need to create a class which delivered from "AuthorizeAttribute", that will takes the responsible for authenticate when SignalR connection established and any method was invoked. 1: public class QueryStringBearerAuthorizeAttribute : AuthorizeAttribute 2: { 3: public override bool AuthorizeHubConnection(HubDescriptor hubDescriptor, IRequest request) 4: { 5: } 6:  7: public override bool AuthorizeHubMethodInvocation(IHubIncomingInvokerContext hubIncomingInvokerContext, bool appliesToMethod) 8: { 9: } 10: } The method "AuthorizeHubConnection" will be invoked when any SignalR connection was established. And here I'm going to retrieve the Bearer token from query string, try to decrypt and recover the login user's claims. 1: public override bool AuthorizeHubConnection(HubDescriptor hubDescriptor, IRequest request) 2: { 3: var dataProtectionProvider = new DpapiDataProtectionProvider(); 4: var secureDataFormat = new TicketDataFormat(dataProtectionProvider.Create()); 5: // authenticate by using bearer token in query string 6: var token = request.QueryString.Get(WebApiConfig.AuthenticationType); 7: var ticket = secureDataFormat.Unprotect(token); 8: if (ticket != null && ticket.Identity != null && ticket.Identity.IsAuthenticated) 9: { 10: // set the authenticated user principal into environment so that it can be used in the future 11: request.Environment["server.User"] = new ClaimsPrincipal(ticket.Identity); 12: return true; 13: } 14: else 15: { 16: return false; 17: } 18: } In the code above I created "TicketDataFormat" instance, which must be same as the one I used to generate the Bearer token when user logged in. Then I retrieve the token from request query string and unprotect it. If I got a valid ticket with identity and it's authenticated this means it's a valid token. Then I pass the user principal into request's environment property which can be used in nearly future. Since my website was built in AngularJS so the SignalR client was in pure JavaScript, and it's not support to set customized HTTP headers in SignalR JavaScript client, I have to pass the Bearer token through request query string. This is not a restriction of SignalR, but a restriction of WebSocket. For security reason WebSocket doesn't allow client to set customized HTTP headers from browser. Next, I need to implement the authentication logic in method "AuthorizeHubMethodInvocation" which will be invoked when any SignalR method was invoked. 1: public override bool AuthorizeHubMethodInvocation(IHubIncomingInvokerContext hubIncomingInvokerContext, bool appliesToMethod) 2: { 3: var connectionId = hubIncomingInvokerContext.Hub.Context.ConnectionId; 4: // check the authenticated user principal from environment 5: var environment = hubIncomingInvokerContext.Hub.Context.Request.Environment; 6: var principal = environment["server.User"] as ClaimsPrincipal; 7: if (principal != null && principal.Identity != null && principal.Identity.IsAuthenticated) 8: { 9: // create a new HubCallerContext instance with the principal generated from token 10: // and replace the current context so that in hubs we can retrieve current user identity 11: hubIncomingInvokerContext.Hub.Context = new HubCallerContext(new ServerRequest(environment), connectionId); 12: return true; 13: } 14: else 15: { 16: return false; 17: } 18: } Since I had passed the user principal into request environment in previous method, I can simply check if it exists and valid. If so, what I need is to pass the principal into context so that SignalR hub can use. Since the "User" property is all read-only in "hubIncomingInvokerContext", I have to create a new "ServerRequest" instance with principal assigned, and set to "hubIncomingInvokerContext.Hub.Context". After that, we can retrieve the principal in my Hubs through "Context.User" as below. 1: public class DefaultHub : Hub 2: { 3: public object Initialize(string host, string service, JObject payload) 4: { 5: var connectionId = Context.ConnectionId; 6: ... ... 7: var domain = string.Empty; 8: var identity = Context.User.Identity as ClaimsIdentity; 9: if (identity != null) 10: { 11: var claim = identity.FindFirst("Domain"); 12: if (claim != null) 13: { 14: domain = claim.Value; 15: } 16: } 17: ... ... 18: } 19: } Finally I just need to add my "QueryStringBearerAuthorizeAttribute" into the SignalR pipeline. 1: app.Map("/signalr", map => 2: { 3: // Setup the CORS middleware to run before SignalR. 4: // By default this will allow all origins. You can 5: // configure the set of origins and/or http verbs by 6: // providing a cors options with a different policy. 7: map.UseCors(CorsOptions.AllowAll); 8: var hubConfiguration = new HubConfiguration 9: { 10: // You can enable JSONP by uncommenting line below. 11: // JSONP requests are insecure but some older browsers (and some 12: // versions of IE) require JSONP to work cross domain 13: // EnableJSONP = true 14: EnableJavaScriptProxies = false 15: }; 16: // Require authentication for all hubs 17: var authorizer = new QueryStringBearerAuthorizeAttribute(); 18: var module = new AuthorizeModule(authorizer, authorizer); 19: GlobalHost.HubPipeline.AddModule(module); 20: // Run the SignalR pipeline. We're not using MapSignalR 21: // since this branch already runs under the "/signalr" path. 22: map.RunSignalR(hubConfiguration); 23: }); On the client side should pass the Bearer token through query string before I started the connection as below. 1: self.connection = $.hubConnection(signalrEndpoint); 2: self.proxy = self.connection.createHubProxy(hubName); 3: self.proxy.on(notifyEventName, function (event, payload) { 4: options.handler(event, payload); 5: }); 6: // add the authentication token to query string 7: // we cannot use http headers since web socket protocol doesn't support 8: self.connection.qs = { Bearer: AuthService.getToken() }; 9: // connection to hub 10: self.connection.start(); Hope this helps, Shaun All documents and related graphics, codes are provided "AS IS" without warranty of any kind. Copyright © Shaun Ziyan Xu. This work is licensed under the Creative Commons License.

    Read the article

  • What parts of functionality should be refactored into a directive?

    - by Sprottenwels
    I am creating an application from legacy code using AngularJS. I wonder what parts of my code should be moved into a directive. For example, iI had thought of moving a table which is used multiple times across the application into a directive. The tables alter from headings and size. Is it worth the effort or even a good practice to turn such things into their own directives or should I create each table in a unique way?

    Read the article

  • Combining two MVC frameworks in a project

    - by SASM
    Is it any good to combine two MVC frameworks together in a project? Is it a fairly common approach? I am thinking about using a serverside framework like CodeIgniter/Laravel and client side framework AngularJS in a predominantly CRUD based web project. I am a bit apprehensive about this idea. I think this approach does not get the best out of both frameworks and can kind of get in way of each other making the application needlessly complicated. Are there some good approaches/practices if one wants to combine these frameworks together?

    Read the article

  • The Web Weekly Newsletter

    - by dwahlin
    Several months ago I created a few FlipBoard magazines that a ton of developers (over 50,000!) have used to access content on JavaScript, HTML5, AngularJS, Azure, XAML, Web API, and more. While the feedback on the magazines has been super positive, several people have asked about having the content pushed to them. I’m generally too busy to remember to go check a particular link on a regular basis so I definitely understood and agree with the comments. I’m happy to announce a new newsletter I’m calling the Web Weekly. It’ll highlight content across the different FlipBoard magazines plus other sources and go out to subscribers a few times a month (weekly when possible). The first issue is ready to go and includes a “video highlights” segment I created to show some of my favorite content in the first issue. If you’re interested in staying on top of all the cutting edge Web technologies feel free to subscribe below!   Here’s a sample of some of the articles included:     Here’s the video from the first edition of the newsletter:   Subscribe to the newsletter below….

    Read the article

  • Error When Loading Images on Local Host Test Server

    - by ke4ktz
    I have a peculiar problem that I just can't seem to find an explanation. I'm working on an AngularJS site for our family and am integrating data from various web services. Currently I am working on the photos section which will integrate in photos from our Flickr account. I have a main page which lists the various photo sets and displays the set's primary photo along with the title. (Note: I'm using the Flickr 'extras' parameter to return the primary photo's URL in the API calls.) <div data-ng-repeat="p in vm.photoSets"> <a ng-href="#/photos/{{p.id}}"> <img ng-src="{{p.primary_photo_extras.url_s}}"></img> </a> <h4>{{p.title._content}}</h4> </div> When clicking on the photo, the routing will display a page with a list of all the photos from that set, showing the image and the title. <div data-ng-repeat="p in vm.photoSetData.photo"> <a ng-href="#/photos/{{vm.photoSetId}}/{{p.id}}" <img ng-src="{{p.url_s}}"></img> </a> <h4>{{p.title}}</h4> </div> Now, here's where the problem is occuring. When I upload the code to my public website on my hosting provider, everything works just fine. Both pages display their respective photos. However, when I attempt to run the site on my local system, either in MAMP or NodeJS (using http-server), the second page gives me an error for each image: Error: [$interpolate:interr] Can't interpolate: {{p.url_s}} Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy. URL: https://farm1.staticflickr.com/37/82749767_e82ff60ce3_m.jpg http://errors.angularjs.org/1.2.9/$sce/insecurl?p0=https%3A%2F%2Ffarm1.staticflickr.com%2F37%2F82749767_e82ff60ce3_m.jpg http://errors.angularjs.org/1.2.9/$interpolate/interr?p0=%7B%7Bp.url_s%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20Blocked%20loading%20resource%20from%20url%20not%20allowed%20by%20%24sceDelegate%20policy.%20%20URL%3A%20https%3A%2F%2Ffarm1.staticflickr.com%2F37%2F82749767_e82ff60ce3_m.jpg%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Ffarm1.staticflickr.com%252F37%252F82749767_e82ff60ce3_m.jpg minErr/<@http://localhost/scripts/angular.js:78 $interpolate/fn@http://localhost/scripts/angular.js:8254 $RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost/scripts/angular.js:11800 $RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost/scripts/angular.js:12061 done@http://localhost/scripts/angular.js:7843 completeRequest@http://localhost/scripts/angular.js:8026 createHttpBackend/</jsonpDone<@http://localhost/scripts/angular.js:7942 jsonpReq/doneWrapper@http://localhost/scripts/angular.js:8039 jsonpReq/script.onerror@http://localhost/scripts/angular.js:8053 The API call to Flickr is successful and returns the correct data. In fact, the image title does display! I've tested it with Firefox, Safari and Chrome...all three browsers fail. I cannot find any explanation as to why it would work remotely but fail locally. Also, the images show up on the first page, but not on the second, even though one of the images on the second page is the same image URL as on the first page. Even going directly to the second page, bypassing the first page, still fails. Any ideas on how to fix this? It would be nice to test locally without having to upload to the server each time I make a change. Update: I have shut off the $sce security to see if that was causing the issue. Although it resulted in turning the error off, the files still don't load on the local test server. I have used the developer tools' network monitor and it doesn't even show an attempt to retrieve the files. AngularJS appears to shut down the retrieval, although the correct path shows up in the DOM.

    Read the article

  • Web Development Trends: Mobile First, Data-Oriented Development, and Single Page Applications

    - by dwahlin
    I recently had the opportunity to give a keynote talk at an Intel conference about key trends in the world of Web development that I feel teams should be taking into account with projects. It was a lot of fun and I had the opportunity to talk with a lot of different people about projects they’re working on. There are a million things that could be covered for this type of talk (HTML5 anyone?) but I only had 60 minutes and couldn’t possibly cover them all so I decided to focus on 3 key areas: mobile, data-oriented development, and SPAs. The talk was geared toward introducing people (many who weren’t Web developers) to topics such as mobile first development (demos showed a few tools to help here), responsive design techniques, data binding techniques that can simplify code, and Single Page Application (SPA) benefits. Links to code demos shown during the presentation can be found at the end of the slide deck. Web Development Trends - What's New in the World of Web Development by Dan Wahlin

    Read the article

  • Progressive Enhancement vs. Single Page Apps

    - by SeanPlusPlus
    I just got back from a conference in Boston called An Event Apart. A really popular theme amongst the speakers was the idea of progressive enhancement - a site's content should go in the HTML, and JavaScript should only be used to enhance behavior. The arguments that the speakers gave for progressive enhancement were very compelling. Not only is it a solid pattern for supporting older browsers, and devices on a network with low bandwidth, but HTML fails much more gracefully than JavaScript (i.e. markup that is not supported is just ignored, while if a browser throws an exception while executing your script - you are hosed). Jeremy Keith gave a particularly insightful talk about this. But what about single page web apps like Backbone and Angular? The whole design behind these frameworks seems to push the developer toward moving content out of the HTML, and into something like a JSON API. I can not seem to gel these two design patterns: progressive enhancement vs. single page web apps. Are there instances when one is better than the other? Or are they not even antagonistic technologies, and I am missing something here with my mental model?

    Read the article

  • asp.net mvc vs angular.js model binding

    - by aw04
    So I've noticed a trend lately of .net web developers using angular.js on the client side of applications and I've become more curious as I play around with angular and compare it to how I would do things in asp.net mvc. I'll give a quick example of what really got me thinking. I recently came across a situation at work (I work in a .net environment) where I needed to create a table bound to a collection of objects that had the ability to add and remove rows/items from the collection. I had an add button that created a new object and appended a row to the end of the table, and a remove button in each row to remove a particular object/row. Using asp.net mvc, I first found myself making an ajax call to the server for each operation, updating the server side model, and refreshing part of the page to show the result in the table. This worked but I didn't really like the idea of calling the server to update the model each time, so I tried to come up with a solution to do this on the client side. It turned out to be quite a task, as I had to generate the html on add with validation and all and the correct indexing for the model binding to work. It got worse on remove, as I ended up with a crazy string replace function to recreate the indexes on each item to satisfy the binding requirements (if an item other than the last is removed, the indexes are no longer correct). Now out of curiosity, I tried to recreate this at home in angular (which I had no experience with) and it took me all of about 10 minutes with simple functions to add and remove items from the client side model. This is just one example, but it seems to me that I'm able to achieve the same results with far fewer calls to the server in angular because of the fact that it binds to a client side model. So my question is, is this a distinct advantage of using a javascript mvc framework or am I somehow under utilizing the power of asp.net mvc and am I right in thinking that these operations should be done on the client and have no business requiring calls to the server?

    Read the article

  • Angular JS - shop data disapears after using external payment script

    - by rZaaaa
    Im building a shopping cart in angular JS. till now all goes good but now i am at the checkout phase of y project. The problem is that im using external payment gateways such as ideal etc. when i checkout using for example Ideal the page redirects to the login page of the bank. All i have is a return url When i get to the return url al angular data is gone... I dont know how to do this properly. Also when i checkout and from the back page hit BACK again. the data is also gone and i have to do all the steps again, fill cart etc. So i gues i have to do something with sessions but what is the best way with angular JS how can i do this? The php backend is a slim framework. In the php version of my website i use the session generate id for the "lost" carts. is a user comes back, this session would be the same so i can retrieve his data (other session variables) ...

    Read the article

  • grunt angularjs doesn't process video files

    - by Daly
    I've set up my grunt file to copy, minify, uglify, revved and all that. It works fine with all media I use, except that recently I added a video to an html file, but it's not being copied to /dist, nor is the html being updated with the versioned file (that is not being copied nor revved). Not sure what I'm missing. Here is the html fragment: <div class="col-xs-4"> <div class="row flowplayer"> <video autoplay> <source type="video/mp4" src="/videos/wedding_planners_bride_smallweb.mp4"> </video> </div> </div> What do I need to add to my gruntfile.js file to process /videos the same way /images are just working out of the box? Thanks

    Read the article

  • Whar parts of functionality should be refactored into a directive? [AngularJS]

    - by Sprottenwels
    I am creating an application from legacy code using AngularJS. I wonder what parts of my code should be moved into a directive. For example, i had thought of moving a table which is used multiple times across the application into a directive. The tables alter from headings and size. Is it worth the effort or even a good practice to turn such things into their own directives or should i create each table in a unique way?

    Read the article

  • How to specify java script files required by an angular app

    - by Vishal Kaushik
    I'm looking for a way to specify required js files by an angular app. So that, we don't need to include an array of tag for all the files which may be required by some ng-app. The main idea behind this requirement is - we might not need to load all the resources on the browser at once. Which ever ng-app gets loaded onto the screen, will fetch its dependencies on its own from the server. Is there any existing way within angularJS to achieve this goal..?

    Read the article

  • Passing Custom Headers to Ajax request on Select2

    - by Sutikshan Dubey
    We are trying to implement Ajax Remote data loading in Select2:- $scope.configPartSelect2 = { minimumInputLength: 3, ajax: { url: "/api/Part", // beforeSend: function (xhr) { xhr.setRequestHeader('Authorization-Token', http.defaults.headers.common['Authorization-Token']); }, // headers: {'Authorization-Token': http.defaults.headers.common['Authorization-Token']}, data: function (term, page) { return {isStockable: true}; }, results: function (data, page) { // parse the results into the format expected by Select2. // since we are using custom formatting functions we do not need to alter remote JSON data return { results: data }; } } }; We are using AngularJS. With each Http request we have set it's default to have our Authtoken as header. But somehow it is not working in conjunction with Select2 Ajax request. In above code, commented code are my failed attempts.

    Read the article

  • angular, try to display object in ng-repeat fails

    - by Simone M
    i'm writing an mobile application in javascript with angularJS and ionicframework (last beta v.11), i create dinamically an object and want to display all objects inside in a ng-repeat. Why nr-repeat don't display anything? This is screen from my object: I use this code for put values in scope: $scope.distanceSuppliers = myCar; And this is the code in html: <ion-item ng-repeat="(id, supplier) in distanceSuppliers"> <div class="items item-button-right" ng-click="openDetails(id)"> {{supplier.name}}<br /> {{supplier.address}}<br /> </div> </ion-item> This is my complete code for JS: .controller('suppliers', function($scope, cw_db, $ionicPopup, $ionicActionSheet, appdelegate, $rootScope, $firebase, $location, $ionicLoading, cw_position) { $ionicLoading.show({ template: 'Updating data..' }); var geocoder; var tot = 0; var done = 0; geocoder = new google.maps.Geocoder(); cw_db.getData(cw_db.getSuppliers(), "", function(suppliers) { cw_position.getPosition(function (error, position) { suppliers.on('value', function(supp) { $scope.distanceSuppliers = {}; tot = 0; done = 0; supp.forEach(function(childSnapshot) { tot++; var childData = childSnapshot.val(); if (childData.address) { calculateDistance(childData, position.coords.latitude, position.coords.longitude); } }); }); $ionicLoading.hide(); }); }); function calculateDistance(childData, usrLat, usrLon) { var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix( { origins: [new google.maps.LatLng(usrLat, usrLon)], destinations: [childData.address], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.METRIC, avoidHighways: false, avoidTolls: false }, function(response, status) { if (status != google.maps.DistanceMatrixStatus.OK) { alert('Error was: ' + status); } else { done++; var results = response.rows[0].elements; childData.distance = results[0].distance.value; $scope.distanceSuppliers.push(childData); if (done == tot) { console.log($scope.distanceSuppliers); } } }); } $scope.openDetails = function(index) { //appdelegate.setCallId(index); //$location.path("/app/supplierDetails"); } }) what's wrong?

    Read the article

  • How do I remedy "Error: Cannot find module 'child-process-close'"?

    - by Tyler Sloan
    I was going about business as usual and about to checkout generator-angular-fullstack. I got no red errors but a message a the end saying Error: Cannot find module 'child-process-close'. I tried many a-thing–uninstalling node, reinstalling, manually getting rid of files and directories in local and/or global paths and tried to make sure Homebrew was the one who installed everything and somehow I've made things worse. (Also, I initially saw errors regarding karma. Everything looked right but it doesn't seem I did any good by throwing commands at it.) I am at a loss. All the stackoverflow questions have been clicked and I'm afraid I've probably tried too many of the suggestions. I cannot install any Yeoman generator. I cannot install anything with npm. When inside the project directory when I run npm install it throws the error. I really have no clue. Is there a way I can basically start over all together? A simple uninstall and install isn't cutting it. Something in the system needs to change but I don't know what. Any ideas?

    Read the article

  • getting the value of a pseudo-element with protractor

    - by bodine
    I'd like to verify the text content of a pseudo-element. The promise returned from using ptor.executeScript("window.getComputedStyle(jQuery('.my-class')[0], ':after').content").then(function(data){ console.log(arguments) // {'0':null} }); I've also tried dropping that in the expectation, but I'd guess that fails for the same reason. Since the CSS Declaration for this is pointing at one of the element's attributes anyway, should I just try to read that attribute?

    Read the article

  • How and where to implement basic authentication in Kibana 3

    - by Jabb
    I have put my elasticsearch server behind a Apache reverse proxy that provides basic authentication. Authenticating to Apache directly from the browser works fine. However, when I use Kibana 3 to access the server, I receive authentication errors. Obviously because no auth headers are sent along with Kibana's Ajax calls. I added the below to elastic-angular-client.js in the Kibana vendor directory to implement authentication quick and dirty. But for some reason it does not work. $http.defaults.headers.common.Authorization = 'Basic ' + Base64Encode('user:Password'); What is the best approach and place to implement basic authentication in Kibana? /*! elastic.js - v1.1.1 - 2013-05-24 * https://github.com/fullscale/elastic.js * Copyright (c) 2013 FullScale Labs, LLC; Licensed MIT */ /*jshint browser:true */ /*global angular:true */ 'use strict'; /* Angular.js service wrapping the elastic.js API. This module can simply be injected into your angular controllers. */ angular.module('elasticjs.service', []) .factory('ejsResource', ['$http', function ($http) { return function (config) { var // use existing ejs object if it exists ejs = window.ejs || {}, /* results are returned as a promise */ promiseThen = function (httpPromise, successcb, errorcb) { return httpPromise.then(function (response) { (successcb || angular.noop)(response.data); return response.data; }, function (response) { (errorcb || angular.noop)(response.data); return response.data; }); }; // check if we have a config object // if not, we have the server url so // we convert it to a config object if (config !== Object(config)) { config = {server: config}; } // set url to empty string if it was not specified if (config.server == null) { config.server = ''; } /* implement the elastic.js client interface for angular */ ejs.client = { server: function (s) { if (s == null) { return config.server; } config.server = s; return this; }, post: function (path, data, successcb, errorcb) { $http.defaults.headers.common.Authorization = 'Basic ' + Base64Encode('user:Password'); console.log($http.defaults.headers); path = config.server + path; var reqConfig = {url: path, data: data, method: 'POST'}; return promiseThen($http(angular.extend(reqConfig, config)), successcb, errorcb); }, get: function (path, data, successcb, errorcb) { $http.defaults.headers.common.Authorization = 'Basic ' + Base64Encode('user:Password'); path = config.server + path; // no body on get request, data will be request params var reqConfig = {url: path, params: data, method: 'GET'}; return promiseThen($http(angular.extend(reqConfig, config)), successcb, errorcb); }, put: function (path, data, successcb, errorcb) { $http.defaults.headers.common.Authorization = 'Basic ' + Base64Encode('user:Password'); path = config.server + path; var reqConfig = {url: path, data: data, method: 'PUT'}; return promiseThen($http(angular.extend(reqConfig, config)), successcb, errorcb); }, del: function (path, data, successcb, errorcb) { $http.defaults.headers.common.Authorization = 'Basic ' + Base64Encode('user:Password'); path = config.server + path; var reqConfig = {url: path, data: data, method: 'DELETE'}; return promiseThen($http(angular.extend(reqConfig, config)), successcb, errorcb); }, head: function (path, data, successcb, errorcb) { $http.defaults.headers.common.Authorization = 'Basic ' + Base64Encode('user:Password'); path = config.server + path; // no body on HEAD request, data will be request params var reqConfig = {url: path, params: data, method: 'HEAD'}; return $http(angular.extend(reqConfig, config)) .then(function (response) { (successcb || angular.noop)(response.headers()); return response.headers(); }, function (response) { (errorcb || angular.noop)(undefined); return undefined; }); } }; return ejs; }; }]); UPDATE 1: I implemented Matts suggestion. However, the server returns a weird response. It seems that the authorization header is not working. Could it have to do with the fact, that I am running Kibana on port 81 and elasticsearch on 8181? OPTIONS /solar_vendor/_search HTTP/1.1 Host: 46.252.46.173:8181 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Origin: http://46.252.46.173:81 Access-Control-Request-Method: POST Access-Control-Request-Headers: authorization,content-type Connection: keep-alive Pragma: no-cache Cache-Control: no-cache This is the response HTTP/1.1 401 Authorization Required Date: Fri, 08 Nov 2013 23:47:02 GMT WWW-Authenticate: Basic realm="Username/Password" Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 346 Connection: close Content-Type: text/html; charset=iso-8859-1 UPDATE 2: Updated all instances with the modified headers in these Kibana files root@localhost:/var/www/kibana# grep -r 'ejsResource(' . ./src/app/controllers/dash.js: $scope.ejs = ejsResource({server: config.elasticsearch, headers: {'Access-Control-Request-Headers': 'Accept, Origin, Authorization', 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXX=='}}); ./src/app/services/querySrv.js: var ejs = ejsResource({server: config.elasticsearch, headers: {'Access-Control-Request-Headers': 'Accept, Origin, Authorization', 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXX=='}}); ./src/app/services/filterSrv.js: var ejs = ejsResource({server: config.elasticsearch, headers: {'Access-Control-Request-Headers': 'Accept, Origin, Authorization', 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXX=='}}); ./src/app/services/dashboard.js: var ejs = ejsResource({server: config.elasticsearch, headers: {'Access-Control-Request-Headers': 'Accept, Origin, Authorization', 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXXXXXXXX=='}}); And modified my vhost conf for the reverse proxy like this <VirtualHost *:8181> ProxyRequests Off ProxyPass / http://127.0.0.1:9200/ ProxyPassReverse / https://127.0.0.1:9200/ <Location /> Order deny,allow Allow from all AuthType Basic AuthName “Username/Password” AuthUserFile /var/www/cake2.2.4/.htpasswd Require valid-user Header always set Access-Control-Allow-Methods "GET, POST, DELETE, OPTIONS, PUT" Header always set Access-Control-Allow-Headers "Content-Type, X-Requested-With, X-HTTP-Method-Override, Origin, Accept, Authorization" Header always set Access-Control-Allow-Credentials "true" Header always set Cache-Control "max-age=0" Header always set Access-Control-Allow-Origin * </Location> ErrorLog ${APACHE_LOG_DIR}/error.log </VirtualHost> Apache sends back the new response headers but the request header still seems to be wrong somewhere. Authentication just doesn't work. Request Headers OPTIONS /solar_vendor/_search HTTP/1.1 Host: 46.252.26.173:8181 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Origin: http://46.252.26.173:81 Access-Control-Request-Method: POST Access-Control-Request-Headers: authorization,content-type Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Response Headers HTTP/1.1 401 Authorization Required Date: Sat, 09 Nov 2013 08:48:48 GMT Access-Control-Allow-Methods: GET, POST, DELETE, OPTIONS, PUT Access-Control-Allow-Headers: Content-Type, X-Requested-With, X-HTTP-Method-Override, Origin, Accept, Authorization Access-Control-Allow-Credentials: true Cache-Control: max-age=0 Access-Control-Allow-Origin: * WWW-Authenticate: Basic realm="Username/Password" Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 346 Connection: close Content-Type: text/html; charset=iso-8859-1 SOLUTION: After doing some more research, I found out that this is definitely a configuration issue with regard to CORS. There are quite a few posts available regarding that topic but it appears that in order to solve my problem, it would be necessary to to make some very granular configurations on apache and also make sure that the right stuff is sent from the browser. So I reconsidered the strategy and found a much simpler solution. Just modify the vhost reverse proxy config to move the elastisearch server AND kibana on the same http port. This also adds even better security to Kibana. This is what I did: <VirtualHost *:8181> ProxyRequests Off ProxyPass /bigdatadesk/ http://127.0.0.1:81/bigdatadesk/src/ ProxyPassReverse /bigdatadesk/ http://127.0.0.1:81/bigdatadesk/src/ ProxyPass / http://127.0.0.1:9200/ ProxyPassReverse / https://127.0.0.1:9200/ <Location /> Order deny,allow Allow from all AuthType Basic AuthName “Username/Password” AuthUserFile /var/www/.htpasswd Require valid-user </Location> ErrorLog ${APACHE_LOG_DIR}/error.log </VirtualHost>

    Read the article

  • Adding array of images to Firebase using AngularFire

    - by user2833143
    I'm trying to allow users to upload images and then store the images, base64 encoded, in firebase. I'm trying to make my firebase structured as follows: |--Feed |----Feed Item |------username |------epic |---------name,etc. |------images |---------image1, image 2, etc. However, I can't get the remote data in firebase to mirror the local data in the client. When I print the array of images to the console in the client, it shows that the uploaded images have been added to the array of images...but these images never make it to firebase. I've tried doing this multiple ways to no avail. I tried using implicit syncing, explicit syncing, and a mixture of both. I can;t for the life of me figure out why this isn;t working and I'm getting pretty frustrated. Here's my code: $scope.complete = function(epicName){ for (var i = 0; i < $scope.activeEpics.length; i++){ if($scope.activeEpics[i].id === epicName){ var epicToAdd = $scope.activeEpics[i]; } } var epicToAddToFeed = {epic: epicToAdd, username: $scope.currUser.username, userImage: $scope.currUser.image, props:0, images:['empty']}; //connect to feed data var feedUrl = "https://epicly.firebaseio.com/feed"; $scope.feed = angularFireCollection(new Firebase(feedUrl)); //add epic var added = $scope.feed.add(epicToAddToFeed).name(); //connect to added epic in firebase var addedUrl = "https://epicly.firebaseio.com/feed/" + added; var addedRef = new Firebase(addedUrl); angularFire(addedRef, $scope, 'added').then(function(){ // for each image uploaded, add image to the added epic's array of images for (var i = 0, f; f = $scope.files[i]; i++) { var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { var filePayload = e.target.result; $scope.added.images.push(filePayload); }; })(f); reader.readAsDataURL(f); } }); } EDIT: Figured it out, had to connect to "https://epicly.firebaseio.com/feed/" + added + "/images"

    Read the article

  • ng-grid checkbox with filtering

    - by WilliamLou
    If I have a huge table with ng-grid, and I enabled a checkbox to select all. Is there a way for me to combine this selectAll feature with the filtering box. I mean when I filter out the rows, I want to click the checkbox so that the rows filtered will be all selected; once I clean out filter, those selectedRows are still left so that I can add more rows into it with other filters. I created a Plunker code template here. copy code here as well: // main.js var app = angular.module('myApp', ['ngGrid']); app.controller('MyCtrl', function($scope) { $scope.mySelections = []; $scope.myData = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}, {name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34},]; $scope.filterOptions = { filterText: '' }; $scope.gridOptions = { data: 'myData', checkboxHeaderTemplate: '<input class="ngSelectionHeader" type="checkbox" ng-model="allSelected" ng-change="toggleSelectAll(allSelected)"/>', showSelectionCheckbox: true, selectWithCheckboxOnly: false, selectedItems: $scope.mySelections, multiSelect: true, filterOptions: $scope.filterOptions }; });

    Read the article

  • Filtering a dropdown in Angular IE11 issue

    - by Brian S.
    I have a requirement for a select html element that can be duplicated multiple times on a page. The options for these select elements all come from a master list. All of the select elements can only show all of the items in the master list that have not been selected in any of the other select elements unless they just were duplicated. So I wrote a custom filter to do this in Angular and it seems to work just fine provided you are not using IE11. In IE when you select a new item from a duplicated select element, it seems to select the option after the one you selected even though the model still has the correct one set. I realize this sounds convoluted, so I created a jFiddle example. Using IE 11 try these steps: Select Bender Click the duplicate link Select Fry Notice that the one that is selected is Leela but the model still has Fry (id:2) as the one selected Now if you do the same thing in Chrome everything works as expected. Can anyone tell me how I might get around this or what I might be doing wrong? Here is the relevant Angular code: myapp.controller('Ctrl', function ($scope) { $scope.selectedIds = [{}]; $scope.allIds = [{ name: 'Bender', value: 1}, {name: 'Fry', value: 2}, {name: 'Leela', value: 3 }]; $scope.dupDropDown = function(currentDD) { var newDD = angular.copy(currentDD); $scope.selectedIds.push(newDD); } }); angular.module('appFilters',[]).filter('ddlFilter', function () { return function (allIds, currentItem, selectedIds) { //console.log(currentItem); var listToReturn = allIds.filter(function (anIdFromMasterList) { if (currentItem.id == anIdFromMasterList.value) return true; var areThereAny = selectedIds.some(function (aSelectedId) { return aSelectedId.id == anIdFromMasterList.value; }); return !areThereAny; }); return listToReturn; } }); And here is the relevant HTML <div ng-repeat="aSelection in selectedIds "> <a href="#" ng-click="dupDropDown(aSelection)">Duplicate</a> <select ng-model="aSelection.id" ng-options="a.value as a.name for a in allIds | ddlFilter:aSelection:selectedIds"> <option value="">--Select--</option> </select> </div>

    Read the article

  • Strange ng-model behavior inside ng-repeat

    - by Mike Fisher
    I'm trying to build up a complex post request to run a report in my Angular app. I have a list of inputs all dynamically generated via an ng-repeat a simple version of my html looks like this. <div ng-repeat="filter in lists.filters"> <input type="checkbox" ng-model="report.options.filters[filter.value]['type']/> <input type="text" ng-model="report.options.filters[filter.value]['values']/> </div> ng-repeat is looping over this array [ {name: 'Advertisers', value: 'advertisers'}, {name: 'Sizes', value: 'sizes'}, {name: 'Campaign IDs', value: 'campaigns'}, {name: 'Creative IDs', value: 'creatives'}, {name: 'Publishers', value: 'publishers'}, {name: 'Placement IDs', value: 'placements'}, {name: 'Seller Types', value: 'seller_types'}, {name: 'Impression Types', value: 'impression_types'}, {name: 'Bid Types', value: 'bid_types'}, {name: 'Seller Members', value: 'seller_members'}, {name: 'Buyer Members', value: 'buyer_members'}, {name: 'Insertion Order Ids', value: 'insertion_orders'}, {name: 'Countries', value: 'countries'}, {name: 'Site Ids', value: 'sites'}, {name: 'Sources', value: 'sources'} ]; The JSON I'm sending back needs to be structured like this: "filters": { "state": "all", "campaigns": {type:"include", values":[1,2]}, "creatives": {type:"exclude","values":[1,2]}, "publishers": {"values":[1,2]}, "placements": {type:"exclude",values":[1,2]}, "advertisers": {"values":[1,2]}, "sizes": {"values":[1,2]}, "countries": {"values":[1,2]}, "insertion_orders": {"values":[1,2]}, "sites": {"values":[1,2]}, "bid_types": {"values":[1,2]}, "seller_types": {"values":[1,2]}, "impression_types": {"values":[1,2]}, "seller_members": {"values":[1,2]}, "buyer_members": {"values":[1,2]}, "sources": {"values":[1,2]} } When I do this Angular throws an error: 'Cannot set property 'values' of undefined' and 'Cannot set property 'type' of undefined' Yet if I do this (inside ng-repeat) <input type="text" ng-model="report.options.filters[filter.value]/> Or this outside of ng-repeat <input type="text" ng-model="report.options.filters[filter.value]['values']/> No errors are thrown and everything works fine. I'm positive that filter.value is defined and available on the scope even though Angular thinks it's not for some reason. I'm not quite sure what I'm doing wrong. Any help is much appreciated.

    Read the article

  • Installing ngResource in Factory

    - by rackhamup
    I am trying to install ngResource into a factory like so: 'use strict'; var DTapp = angular.module('DeviceTraining'); /* Services */ DTapp.factory('Slides', ['ngResource', function($resource) { return $resource('slides/:slideID.json', {}, { query: {method:'GET', params:{slideID:'slides'}, isArray: true} }); }]); But I am getting this error message: Error: [$injector:unpr] Unknown provider: ngResourceProvider <- ngResource <- Slides Any help?

    Read the article

  • ng-grid get filtered column count after filtering

    - by Ryan Langton
    I'm using ng-grid with filtering. Any time the filter updates I want to get the filtered item count. I have been able to do this using the filteredRows property of ngGrid. However I'm getting the rows BEFORE the filtering occurs and I want them AFTER the filtering occurs. Here is a plunker to demonstrate the behavior: http://plnkr.co/edit/onyE9e?p=preview Here is the code where filtering is occuring: $scope.$watch('gridOptions.filterOptions.filterText2', function(searchText, oldsearchText) { if (searchText !== oldsearchText) { $scope.gridOptions.filterOptions.filterText = "name:" + searchText + "; "; $scope.recordCount = $scope.gridOptions.ngGrid.filteredRows.length; } });

    Read the article

  • Implementing a State Machine in Angular.js to control routing

    - by ldn_tech_exec
    Can anyone help me with integrating a state machine to control routing? What's the best method to do this? Create a service? I need to basically intercept every $location request, run the state machine and let it figure out what the next $location.path should be. Think of the problem like a bank of questions that get added and removed over time. The user visits once in a while, passes in the user's answers object to the statemachine, and the statemachine figures out which question to load. This is my pseudocode, but i need to figure out where to put this or what event I can hook into to make sure all route requests are passed through the machine. Do I need a specific stateMachine controller? Do I create a service? Where do I use the service? Do I need to override $locationProvider? $scope.user.answers = [{ id: 32, answer: "whatever" }, { id:33, answer: "another answer" }] $scope.questions = [{ id:32, question:"what is your name?", path:"/question/1" },{ id:34, question:"how old are you?", path:"/question/2" }] var questions = $scope.questions; angular.forEach(questions, function(question) { if(question.id !exist in $scope.user.answers.id) { $location.path = question.path break; }); Thanks

    Read the article

  • Is the Angular templateCache shared between apps? Is it persistent?

    - by alexp
    If I have two Angular apps that run on the same domain, will/can they share data in the templateCache? Or is the cache unique to each main application module? In general I'm trying to understand what dictates when a new templateCache is created. Furthermore I'm not clear on whether or in what way the templateCache is persistent? Looking in local storage and cookies, I don't see where anything is getting stored.

    Read the article

< Previous Page | 1 2 3 4 5 6 7  | Next Page >