Search Results

Search found 1117 results on 45 pages for 'angularjs directive'.

Page 1/45 | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • Need AngularJS grid resizing directive to resize "thumbnail" that contains no image

    - by thebravedave
    UPDATE Plunker to project: http://plnkr.co/edit/oKB96szQhqwpKQbOGUDw?p=preview I have an AngularJS project that uses AngularJS Bootstrap grids. I need all of the grid elements to have the same size so they stack properly. I created an angularJs directive that auto resizes the grid element when placed in said grid element. I have 2 directives that do this for me Directive 1: onload Directive 2: imageonload Directive 2 works. If the grid element uses an image, after the image loads then the directive triggers an event that sends the grid elements height to all other grid elements. If that height sent out via the event is greater than that of the grid element which is listening to the event then that listening grid element changes it's height to be the greater height. This way the largest height becomes the height for all the grid elements. Directive 1 does not work. This one is placed on the outer most grid elements html element, and is triggered when the element loads. The problem is that when the element loads and the onload directive is called AngularJS has not yet filled out the data in said grid element. The outcome is that the real height after AngularJS data binds is not broadcast as an event. My only solution I have thought of (but haven't tried) is to add an image url to an image that exists but doesn't have any data in it, and place that in the grid element (the one that didn't have any images before placing the blank one in). I could then call imageonload instead of onload and I pretty sure the angularjs data binding will have taken place by then. the problem is that that is pretty hacky. I would rather be able to have not an image in the grid element, and be able to call my custom onload directive and have the onload directive calculate the height AFTER angularJS data binds to all of the data binding variables in the grid element. Here is my imageonload directive .directive('imageonload', function($rootScope) { return { restrict: 'A', link: function(scope, element, attrs) { scope.heightArray = []; scope.largestHeight = 50; element.bind('load', function() { broadcastThumbnailHeight(); }); scope.$on('imageOnLoadEvent', function(caller, value){ var el = angular.element(element); var id = el.prop('id'); var pageName = el.prop('title'); if(pageName == value[0]){ if(scope.largestHeight < value[1]){ scope.largestHeight = value[1]; var nestedString = el.prop('alt'); if(nestedString == "") nestedString = "1"; var nested = parseInt(nestedString); nested = nested - 1; var inte = 0; var thumbnail = el["0"]; var finalThumbnailContainer = thumbnail.parentElement; while(inte != nested){ finalThumbnailContainer = finalThumbnailContainer.parentElement; inte++; } var innerEl = angular.element(finalThumbnailContainer); var height = value[1]; innerEl.height(height); } } }); scope.$on('findHeightAndBroadcast', function(){ broadcastThumbnailHeight(); }); scope.$on('resetThumbnailHeight', function(){ scope.largestHeight = 50; }); function broadcastThumbnailHeight(){ var el = angular.element(element); var id = el.prop('id'); var alt = el.prop('alt'); if(alt == "") alt = "1"; var nested = parseInt(alt); nested = nested - 1; var pageName = el.prop('title'); var inte = 1; var thumbnail = el["0"]; var finalThumbnail = thumbnail.parentElement; while(inte != nested){ finalThumbnail = finalThumbnail.parentElement; inte++; } var elZero = el["0"]; var clientHeight = finalThumbnail.clientHeight; var arr = []; arr[0] = pageName; arr[1] = clientHeight; $rootScope.$broadcast('imageOnLoadEvent', arr); } } }; }) And here is my onload directive .directive('onload', function($rootScope) { return { restrict: 'A', link: function(scope, element, attrs) { scope.largestHeight=100; getHeightAndBroadcast(); scope.$on('onLoadEvent', function(caller, value){ var el = angular.element(element); var id = el.prop('id'); var pageName = el.prop('title'); if(pageName == value[0]){ if(scope.largestHeight < value[1]){ scope.largestHeight = value[1]; var height = value[1]; el.height(height); } } }); function getHeightAndBroadcast(){ var el = angular.element(element); var h = el["0"].children; var thumbnailHeightElement = angular.element(h); var pageName = el.prop("title"); var clientHeight = thumbnailHeightElement["0"].clientHeight; var arr = []; arr[0] = pageName; arr[1] = clientHeight; if(clientHeight != undefined) $rootScope.$broadcast('onLoadEvent', arr); } } }; }) Here is an example of one of my grid elements that uses imageonload. Note the imageonload directive in the image html element. This works. There is also an onload directive on the outer most html of the grid element. That does not work. I have stepped through this carefully in Firebug and saw that the onload was calculating the height before AngularJS data binding was complete. <div class="thumbnail col-md-3" id="{{product.id}}" title="thumbnailAdminProductsGrid" onload> <div class="row"> <div class="containerz"> <div class="row-fluid"> <div class="col-md-2"></div> <div class="col-md-7"> <div class="textcenterinline"> <!--tag--><img class="img-responsive" id="{{product.id}}" title="imageAdminProductsGrid" alt=6 ng-src="{{product.baseImage}}" imageonload/><!--end tag--> </div> </div> </div> <div class="caption"> <div class="testing"> <div class="row-fluid"> <div class="col-md-12"> <h3 class=""> <!--tag--><a href="javascript:void(0);" ng-click="loadProductView('{{product.id}}')">{{product.name}}</a><!--end tag--> </h3> </div> </div> <div class="row-fluid"> <div class="col-md-12"> <p class="lead"><!--tag--> {{product.price}}</p><!--end tag--> </div> </div> <div class="row-fluid"> <div class="col-md-12"> <p><!--tag-->{{product.inStock}} units available<!--end tag--></p> </div> </div> <div class="row-fluid"> <div class="col-md-12"> <p class=""><!--tag-->{{product.generalDescription}}<!--end tag--></p> </div> </div> <!--tag--> <div data-ng-if="product.specialized=='true'"> <div class="row-fluid"> <div class="col-md-12" ng-repeat="varCat in product.varietyCategoriesAndOptions"> <b><h4>{{varCat.varietyCategoryName}}</h4></b> <select ng-model="varCat.varietyCategoryOption" ng-options="value.varietyCategoryOptionId as value.varietyCategoryOptionValue for (key,value) in varCat.varietyCategoryOptions"> </select> </div> </div> </div> <!--end tag--> <div class="row-fluid"> <div class="col-md-12"> <!--tag--><div ng-if="product.weight==0"><b>Free Shipping</b></div><!--end tag--> </div> </div> </div> </div> </div> </div> Here is an example of one of the html for one of my grid elements that only uses the "onload" directive and not "imageonload" <div class="thumbnail col-md-3" title="thumbnailCouponGrid" onload> <div class="innnerContainer"> <div class="text-center"> {{coupon.name}} <br /> <br /> <b>Description</b> <br /> {{coupon.description}} <br /> <br /> <button class="btn btn-large btn-primary" ng-click="goToCoupon()">View Coupon Details</button> </div> </div> The imageonload function might look a little confusing because I use the img html attribute "alt" to signal to the directive how many levels the imageonload is placed below the outermost html for the grid element. We have to have this so the directive knows which html element to set the new height on. also I use the "title" attribute to set which grid this grid resizing is for (that way you can use the directive multiple times on the same page for different grids and not have the events for the wrong grid triggered). Does anyone know how I can get the "onload" directive to get called AFTER angularJS binds to the grid element? Just for completeness here are 2 images (almost looks like just 1), the second is a grid that contains grid elements that have images and use the "imageonload" directive and the first is a grid that contains grid elements that do not use images and only uses the "onload" directive.

    Read the article

  • SignalR Auto Disconnect when Page Changed in AngularJS

    - by Shaun
    Originally posted on: http://geekswithblogs.net/shaunxu/archive/2014/05/30/signalr-auto-disconnect-when-page-changed-in-angularjs.aspxIf we are using SignalR, the connection lifecycle was handled by itself very well. For example when we connect to SignalR service from browser through SignalR JavaScript Client the connection will be established. And if we refresh the page, close the tab or browser, or navigate to another URL then the connection will be closed automatically. This information had been well documented here. In a browser, SignalR client code that maintains a SignalR connection runs in the JavaScript context of a web page. That's why the SignalR connection has to end when you navigate from one page to another, and that's why you have multiple connections with multiple connection IDs if you connect from multiple browser windows or tabs. When the user closes a browser window or tab, or navigates to a new page or refreshes the page, the SignalR connection immediately ends because SignalR client code handles that browser event for you and calls the "Stop" method. But unfortunately this behavior doesn't work if we are using SignalR with AngularJS. AngularJS is a single page application (SPA) framework created by Google. It hijacks browser's address change event, based on the route table user defined, launch proper view and controller. Hence in AngularJS we address was changed but the web page still there. All changes of the page content are triggered by Ajax. So there's no page unload and load events. This is the reason why SignalR cannot handle disconnect correctly when works with AngularJS. If we dig into the source code of SignalR JavaScript Client source code we will find something below. It monitors the browser page "unload" and "beforeunload" event and send the "stop" message to server to terminate connection. But in AngularJS page change events were hijacked, so SignalR will not receive them and will not stop the connection. 1: // wire the stop handler for when the user leaves the page 2: _pageWindow.bind("unload", function () { 3: connection.log("Window unloading, stopping the connection."); 4:  5: connection.stop(asyncAbort); 6: }); 7:  8: if (isFirefox11OrGreater) { 9: // Firefox does not fire cross-domain XHRs in the normal unload handler on tab close. 10: // #2400 11: _pageWindow.bind("beforeunload", function () { 12: // If connection.stop() runs runs in beforeunload and fails, it will also fail 13: // in unload unless connection.stop() runs after a timeout. 14: window.setTimeout(function () { 15: connection.stop(asyncAbort); 16: }, 0); 17: }); 18: }   Problem Reproduce In the codes below I created a very simple example to demonstrate this issue. Here is the SignalR server side code. 1: public class GreetingHub : Hub 2: { 3: public override Task OnConnected() 4: { 5: Debug.WriteLine(string.Format("Connected: {0}", Context.ConnectionId)); 6: return base.OnConnected(); 7: } 8:  9: public override Task OnDisconnected() 10: { 11: Debug.WriteLine(string.Format("Disconnected: {0}", Context.ConnectionId)); 12: return base.OnDisconnected(); 13: } 14:  15: public void Hello(string user) 16: { 17: Clients.All.hello(string.Format("Hello, {0}!", user)); 18: } 19: } Below is the configuration code which hosts SignalR hub in an ASP.NET WebAPI project with IIS Express. 1: public class Startup 2: { 3: public void Configuration(IAppBuilder app) 4: { 5: app.Map("/signalr", map => 6: { 7: map.UseCors(CorsOptions.AllowAll); 8: map.RunSignalR(new HubConfiguration() 9: { 10: EnableJavaScriptProxies = false 11: }); 12: }); 13: } 14: } Since we will host AngularJS application in Node.js in another process and port, the SignalR connection will be cross domain. So I need to enable CORS above. In client side I have a Node.js file to host AngularJS application as a web server. You can use any web server you like such as IIS, Apache, etc.. Below is the "index.html" page which contains a navigation bar so that I can change the page/state. As you can see I added jQuery, AngularJS, SignalR JavaScript Client Library as well as my AngularJS entry source file "app.js". 1: <html data-ng-app="demo"> 2: <head> 3: <script type="text/javascript" src="jquery-2.1.0.js"></script> 1:  2: <script type="text/javascript" src="angular.js"> 1: </script> 2: <script type="text/javascript" src="angular-ui-router.js"> 1: </script> 2: <script type="text/javascript" src="jquery.signalR-2.0.3.js"> 1: </script> 2: <script type="text/javascript" src="app.js"></script> 4: </head> 5: <body> 6: <h1>SignalR Auto Disconnect with AngularJS by Shaun</h1> 7: <div> 8: <a href="javascript:void(0)" data-ui-sref="view1">View 1</a> | 9: <a href="javascript:void(0)" data-ui-sref="view2">View 2</a> 10: </div> 11: <div data-ui-view></div> 12: </body> 13: </html> Below is the "app.js". My SignalR logic was in the "View1" page and it will connect to server once the controller was executed. User can specify a user name and send to server, all clients that located in this page will receive the server side greeting message through SignalR. 1: 'use strict'; 2:  3: var app = angular.module('demo', ['ui.router']); 4:  5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { 6: $stateProvider.state('view1', { 7: url: '/view1', 8: templateUrl: 'view1.html', 9: controller: 'View1Ctrl' }); 10:  11: $stateProvider.state('view2', { 12: url: '/view2', 13: templateUrl: 'view2.html', 14: controller: 'View2Ctrl' }); 15:  16: $locationProvider.html5Mode(true); 17: }]); 18:  19: app.value('$', $); 20: app.value('endpoint', 'http://localhost:60448'); 21: app.value('hub', 'GreetingHub'); 22:  23: app.controller('View1Ctrl', function ($scope, $, endpoint, hub) { 24: $scope.user = ''; 25: $scope.response = ''; 26:  27: $scope.greeting = function () { 28: proxy.invoke('Hello', $scope.user) 29: .done(function () {}) 30: .fail(function (error) { 31: console.log(error); 32: }); 33: }; 34:  35: var connection = $.hubConnection(endpoint); 36: var proxy = connection.createHubProxy(hub); 37: proxy.on('hello', function (response) { 38: $scope.$apply(function () { 39: $scope.response = response; 40: }); 41: }); 42: connection.start() 43: .done(function () { 44: console.log('signlar connection established'); 45: }) 46: .fail(function (error) { 47: console.log(error); 48: }); 49: }); 50:  51: app.controller('View2Ctrl', function ($scope, $) { 52: }); When we went to View1 the server side "OnConnect" method will be invoked as below. And in any page we send the message to server, all clients will got the response. If we close one of the client, the server side "OnDisconnect" method will be invoked which is correct. But is we click "View 2" link in the page "OnDisconnect" method will not be invoked even though the content and browser address had been changed. This might cause many SignalR connections remain between the client and server. Below is what happened after I clicked "View 1" and "View 2" links four times. As you can see there are 4 live connections.   Solution Since the reason of this issue is because, AngularJS hijacks the page event that SignalR need to stop the connection, we can handle AngularJS route or state change event and stop SignalR connect manually. In the code below I moved the "connection" variant to global scope, added a handler to "$stateChangeStart" and invoked "stop" method of "connection" if its state was not "disconnected". 1: var connection; 2: app.run(['$rootScope', function ($rootScope) { 3: $rootScope.$on('$stateChangeStart', function () { 4: if (connection && connection.state && connection.state !== 4 /* disconnected */) { 5: console.log('signlar connection abort'); 6: connection.stop(); 7: } 8: }); 9: }]); Now if we refresh the page and navigated to View 1, the connection will be opened. At this state if we clicked "View 2" link the content will be changed and the SignalR connection will be closed automatically.   Summary In this post I demonstrated an issue when we are using SignalR with AngularJS. The connection cannot be closed automatically when we navigate to other page/state in AngularJS. And the solution I mentioned below is to move the SignalR connection as a global variant and close it manually when AngularJS route/state changed. You can download the full sample code here. Moving the SignalR connection as a global variant might not be a best solution. It's just for easy to demo here. In production code I suggest wrapping all SignalR operations into an AngularJS factory. Since AngularJS factory is a singleton object, we can safely put the connection variant in the factory function scope.   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

  • AngularJS in 60-ish Minutes – The eBook

    - by dwahlin
    Back in April of 2013 I published a video titled AngularJS in 60-ish Minutes on YouTube that focused on learning the fundamentals of AngularJS such as data binding, controllers, modules, factories/services and more (watch it by clicking the link above or scroll to the bottom of this post). One of the people that watched the video was Ian Smith (his blog is at http://fastandfluid.blogspot.com). But, Ian did much more than just watch it. He took the time to transcribe the audio into text, added screenshots, and included the time that the topic appears in the original video. Here’s an example of one of the pages: The funny thing about this whole story is that I’m currently working on an AngularJS eBook concept that I plan to publish to Amazon.com that’ll be called AngularJS JumpStart and it’s also based on the video. It follows the same general format and I even paid a transcription company to generate a document for me a few months back. Ian and I have both developed training materials before and it turns out we were both thinking along the same lines which was funny to see when he first showed me what he created. I’m extremely appreciative of Ian for taking the time to transcribe the video (thank him if you use the document) and hope you find it useful! Download the AngularJS in 60-ish Minutes eBook here   AngularJS in 60-ish Minutes Video   If you’re interested in more articles, blog posts, and additional information on AngularJS check out the new The AngularJS Magazine (a Flipboard magazine) that I started:   The AngularJS Magazine

    Read the article

  • Host AngularJS (Html5Mode) in ASP.NET vNext

    - by Shaun
    Originally posted on: http://geekswithblogs.net/shaunxu/archive/2014/06/10/host-angularjs-html5mode-in-asp.net-vnext.aspxMicrosoft had announced ASP.NET vNext in BUILD and TechED recently and as a developer, I found that we can add features into one ASP.NET vNext application such as MVC, WebAPI, SignalR, etc.. Also it's cross platform which means I can host ASP.NET on Windows, Linux and OS X.   If you are following my blog you should knew that I'm currently working on a project which uses ASP.NET WebAPI, SignalR and AngularJS. Currently the AngularJS part is hosted by Express in Node.js while WebAPI and SignalR are hosted in ASP.NET. I was looking for a solution to host all of them in one platform so that my SignalR can utilize WebSocket. Currently AngularJS and SignalR are hosted in the same domain but different port so it has to use ServerSendEvent. It can be upgraded to WebSocket if I host both of them in the same port.   Host AngularJS in ASP.NET vNext Static File Middleware ASP.NET vNext utilizes middleware pattern to register feature it uses, which is very similar as Express in Node.js. Since AngularJS is a pure client side framework in theory what I need to do is to use ASP.NET vNext as a static file server. This is very easy as there's a build-in middleware shipped alone with ASP.NET vNext. Assuming I have "index.html" as below. 1: <html data-ng-app="demo"> 2: <head> 3: <script type="text/javascript" src="angular.js" /> 4: <script type="text/javascript" src="angular-ui-router.js" /> 5: <script type="text/javascript" src="app.js" /> 6: </head> 7: <body> 8: <h1>ASP.NET vNext with AngularJS</h1> 9: <div> 10: <a href="javascript:void(0)" data-ui-sref="view1">View 1</a> | 11: <a href="javascript:void(0)" data-ui-sref="view2">View 2</a> 12: </div> 13: <div data-ui-view></div> 14: </body> 15: </html> And the AngularJS JavaScript file as below. Notices that I have two views which only contains one line literal indicates the view name. 1: 'use strict'; 2:  3: var app = angular.module('demo', ['ui.router']); 4:  5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { 6: $stateProvider.state('view1', { 7: url: '/view1', 8: templateUrl: 'view1.html', 9: controller: 'View1Ctrl' }); 10:  11: $stateProvider.state('view2', { 12: url: '/view2', 13: templateUrl: 'view2.html', 14: controller: 'View2Ctrl' }); 15: }]); 16:  17: app.controller('View1Ctrl', function ($scope) { 18: }); 19:  20: app.controller('View2Ctrl', function ($scope) { 21: }); All AngularJS files are located in "app" folder and my ASP.NET vNext files are besides it. The "project.json" contains all dependencies I need to host static file server. 1: { 2: "dependencies": { 3: "Helios" : "0.1-alpha-*", 4: "Microsoft.AspNet.FileSystems": "0.1-alpha-*", 5: "Microsoft.AspNet.Http": "0.1-alpha-*", 6: "Microsoft.AspNet.StaticFiles": "0.1-alpha-*", 7: "Microsoft.AspNet.Hosting": "0.1-alpha-*", 8: "Microsoft.AspNet.Server.WebListener": "0.1-alpha-*" 9: }, 10: "commands": { 11: "web": "Microsoft.AspNet.Hosting server=Microsoft.AspNet.Server.WebListener server.urls=http://localhost:22222" 12: }, 13: "configurations" : { 14: "net45" : { 15: }, 16: "k10" : { 17: "System.Diagnostics.Contracts": "4.0.0.0", 18: "System.Security.Claims" : "0.1-alpha-*" 19: } 20: } 21: } Below is "Startup.cs" which is the entry file of my ASP.NET vNext. What I need to do is to let my application use FileServerMiddleware. 1: using System; 2: using Microsoft.AspNet.Builder; 3: using Microsoft.AspNet.FileSystems; 4: using Microsoft.AspNet.StaticFiles; 5:  6: namespace Shaun.AspNet.Plugins.AngularServer.Demo 7: { 8: public class Startup 9: { 10: public void Configure(IBuilder app) 11: { 12: app.UseFileServer(new FileServerOptions() { 13: EnableDirectoryBrowsing = true, 14: FileSystem = new PhysicalFileSystem(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "app")) 15: }); 16: } 17: } 18: } Next, I need to create "NuGet.Config" file in the PARENT folder so that when I run "kpm restore" command later it can find ASP.NET vNext NuGet package successfully. 1: <?xml version="1.0" encoding="utf-8"?> 2: <configuration> 3: <packageSources> 4: <add key="AspNetVNext" value="https://www.myget.org/F/aspnetvnext/api/v2" /> 5: <add key="NuGet.org" value="https://nuget.org/api/v2/" /> 6: </packageSources> 7: <packageSourceCredentials> 8: <AspNetVNext> 9: <add key="Username" value="aspnetreadonly" /> 10: <add key="ClearTextPassword" value="4d8a2d9c-7b80-4162-9978-47e918c9658c" /> 11: </AspNetVNext> 12: </packageSourceCredentials> 13: </configuration> Now I need to run "kpm restore" to resolve all dependencies of my application. Finally, use "k web" to start the application which will be a static file server on "app" sub folder in the local 22222 port.   Support AngularJS Html5Mode AngularJS works well in previous demo. But you will note that there is a "#" in the browser address. This is because by default AngularJS adds "#" next to its entry page so ensure all request will be handled by this entry page. For example, in this case my entry page is "index.html", so when I clicked "View 1" in the page the address will be changed to "/#/view1" which means it still tell the web server I'm still looking for "index.html". This works, but makes the address looks ugly. Hence AngularJS introduces a feature called Html5Mode, which will get rid off the annoying "#" from the address bar. Below is the "app.js" with Html5Mode enabled, just one line of code. 1: 'use strict'; 2:  3: var app = angular.module('demo', ['ui.router']); 4:  5: app.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { 6: $stateProvider.state('view1', { 7: url: '/view1', 8: templateUrl: 'view1.html', 9: controller: 'View1Ctrl' }); 10:  11: $stateProvider.state('view2', { 12: url: '/view2', 13: templateUrl: 'view2.html', 14: controller: 'View2Ctrl' }); 15:  16: // enable html5mode 17: $locationProvider.html5Mode(true); 18: }]); 19:  20: app.controller('View1Ctrl', function ($scope) { 21: }); 22:  23: app.controller('View2Ctrl', function ($scope) { 24: }); Then let's went to the root path of our website and click "View 1" you will see there's no "#" in the address. But the problem is, if we hit F5 the browser will be turn to blank. This is because in this mode the browser told the web server I want static file named "view1" but there's no file on the server. So underlying our web server, which is built by ASP.NET vNext, responded 404. To fix this problem we need to create our own ASP.NET vNext middleware. What it needs to do is firstly try to respond the static file request with the default StaticFileMiddleware. If the response status code was 404 then change the request path value to the entry page and try again. 1: public class AngularServerMiddleware 2: { 3: private readonly AngularServerOptions _options; 4: private readonly RequestDelegate _next; 5: private readonly StaticFileMiddleware _innerMiddleware; 6:  7: public AngularServerMiddleware(RequestDelegate next, AngularServerOptions options) 8: { 9: _next = next; 10: _options = options; 11:  12: _innerMiddleware = new StaticFileMiddleware(next, options.FileServerOptions.StaticFileOptions); 13: } 14:  15: public async Task Invoke(HttpContext context) 16: { 17: // try to resolve the request with default static file middleware 18: await _innerMiddleware.Invoke(context); 19: Console.WriteLine(context.Request.Path + ": " + context.Response.StatusCode); 20: // route to root path if the status code is 404 21: // and need support angular html5mode 22: if (context.Response.StatusCode == 404 && _options.Html5Mode) 23: { 24: context.Request.Path = _options.EntryPath; 25: await _innerMiddleware.Invoke(context); 26: Console.WriteLine(">> " + context.Request.Path + ": " + context.Response.StatusCode); 27: } 28: } 29: } We need an option class where user can specify the host root path and the entry page path. 1: public class AngularServerOptions 2: { 3: public FileServerOptions FileServerOptions { get; set; } 4:  5: public PathString EntryPath { get; set; } 6:  7: public bool Html5Mode 8: { 9: get 10: { 11: return EntryPath.HasValue; 12: } 13: } 14:  15: public AngularServerOptions() 16: { 17: FileServerOptions = new FileServerOptions(); 18: EntryPath = PathString.Empty; 19: } 20: } We also need an extension method so that user can append this feature in "Startup.cs" easily. 1: public static class AngularServerExtension 2: { 3: public static IBuilder UseAngularServer(this IBuilder builder, string rootPath, string entryPath) 4: { 5: var options = new AngularServerOptions() 6: { 7: FileServerOptions = new FileServerOptions() 8: { 9: EnableDirectoryBrowsing = false, 10: FileSystem = new PhysicalFileSystem(System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, rootPath)) 11: }, 12: EntryPath = new PathString(entryPath) 13: }; 14:  15: builder.UseDefaultFiles(options.FileServerOptions.DefaultFilesOptions); 16:  17: return builder.Use(next => new AngularServerMiddleware(next, options).Invoke); 18: } 19: } Now with these classes ready we will change our "Startup.cs", use this middleware replace the default one, tell the server try to load "index.html" file if it cannot find resource. The code below is just for demo purpose. I just tried to load "index.html" in all cases once the StaticFileMiddleware returned 404. In fact we need to validation to make sure this is an AngularJS route request instead of a normal static file request. 1: using System; 2: using Microsoft.AspNet.Builder; 3: using Microsoft.AspNet.FileSystems; 4: using Microsoft.AspNet.StaticFiles; 5: using Shaun.AspNet.Plugins.AngularServer; 6:  7: namespace Shaun.AspNet.Plugins.AngularServer.Demo 8: { 9: public class Startup 10: { 11: public void Configure(IBuilder app) 12: { 13: app.UseAngularServer("app", "/index.html"); 14: } 15: } 16: } Now let's run "k web" again and try to refresh our browser and we can see the page loaded successfully. In the console window we can find the original request got 404 and we try to find "index.html" and return the correct result.   Summary In this post I introduced how to use ASP.NET vNext to host AngularJS application as a static file server. I also demonstrated how to extend ASP.NET vNext, so that it supports AngularJS Html5Mode. You can download the source code here.   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

  • Learning AngularJS by Example – The Customer Manager Application

    - by dwahlin
    I’m always tinkering around with different ideas and toward the beginning of 2013 decided to build a sample application using AngularJS that I call Customer Manager. It’s not exactly the most creative name or concept, but I wanted to build something that highlighted a lot of the different features offered by AngularJS and how they could be used together to build a full-featured app. One of the goals of the application was to ensure that it was approachable by people new to Angular since I’ve never found overly complex applications great for learning new concepts. The application initially started out small and was used in my AngularJS in 60-ish Minutes video on YouTube but has gradually had more and more features added to it and will continue to be enhanced over time. It’ll be used in a new “end-to-end” training course my company is working on for AngularjS as well as in some video courses that will be coming out. Here’s a quick look at what the application home page looks like: In this post I’m going to provide an overview about how the application is organized, back-end options that are available, and some of the features it demonstrates. I’ve already written about some of the features so if you’re interested check out the following posts: Building an AngularJS Modal Service Building a Custom AngularJS Unique Value Directive Using an AngularJS Factory to Interact with a RESTful Service Application Structure The structure of the application is shown to the right. The  homepage is index.html and is located at the root of the application folder. It defines where application views will be loaded using the ng-view directive and includes script references to AngularJS, AngularJS routing and animation scripts, plus a few others located in the Scripts folder and to custom application scripts located in the app folder. The app folder contains all of the key scripts used in the application. There are several techniques that can be used for organizing script files but after experimenting with several of them I decided that I prefer things in folders such as controllers, views, services, etc. Doing that helps me find things a lot faster and allows me to categorize files (such as controllers) by functionality. My recommendation is to go with whatever works best for you. Anyone who says, “You’re doing it wrong!” should be ignored. Contrary to what some people think, there is no “one right way” to organize scripts and other files. As long as the scripts make it down to the client properly (you’ll likely minify and concatenate them anyway to reduce bandwidth and minimize HTTP calls), the way you organize them is completely up to you. Here’s what I ended up doing for this application: Animation code for some custom animations is located in the animations folder. In addition to AngularJS animations (which are defined using CSS in Content/animations.css), it also animates the initial customer data load using a 3rd party script called GreenSock. Controllers are located in the controllers folder. Some of the controllers are placed in subfolders based upon the their functionality while others are placed at the root of the controllers folder since they’re more generic:   The directives folder contains the custom directives created for the application. The filters folder contains the custom filters created for the application that filter city/state and product information. The partials folder contains partial views. This includes things like modal dialogs used in the application. The services folder contains AngularJS factories and services used for various purposes in the application. Most of the scripts in this folder provide data functionality. The views folder contains the different views used in the application. Like the controllers folder, the views are organized into subfolders based on their functionality:   Back-End Services The Customer Manager application (grab it from Github) provides two different options on the back-end including ASP.NET Web API and Node.js. The ASP.NET Web API back-end uses Entity Framework for data access and stores data in SQL Server (LocalDb). The other option on the back-end is Node.js, Express, and MongoDB.   Using the ASP.NET Web API Back-End To run the application using ASP.NET Web API/SQL Server back-end open the .sln file at the root of the project in Visual Studio 2012 or higher (the free Express 2013 for Web version is fine). Press F5 and a browser will automatically launch and display the application. Using the Node.js Back-End To run the application using the Node.js/MongoDB back-end follow these steps: In the CustomerManager directory execute 'npm install' to install Express, MongoDB and Mongoose (package.json). Load sample data into MongoDB by performing the following steps: Execute 'mongod' to start the MongoDB daemon Navigate to the CustomerManager directory (the one that has initMongoCustData.js in it) then execute 'mongo' to start the MongoDB shell Enter the following in the mongo shell to load the seed files that handle seeding the database with initial data: use custmgr load("initMongoCustData.js") load("initMongoSettingsData.js") load("initMongoStateData.js") Start the Node/Express server by navigating to the CustomerManager/server directory and executing 'node app.js' View the application at http://localhost:3000 in your browser. Key Features The Customer Manager application certainly doesn’t cover every feature provided by AngularJS (as mentioned the intent was to keep it as simple as possible) but does provide insight into several key areas: Using factories and services as re-useable data services (see the app/services folder) Creating custom directives (see the app/directives folder) Custom paging (see app/views/customers/customers.html and app/controllers/customers/customersController.js) Custom filters (see app/filters) Showing custom modal dialogs with a re-useable service (see app/services/modalService.js) Making Ajax calls using a factory (see app/services/customersService.js) Using Breeze to retrieve and work with data (see app/services/customersBreezeService.js). Switch the application to use the Breeze factory by opening app/services.config.js and changing the useBreeze property to true. Intercepting HTTP requests to display a custom overlay during Ajax calls (see app/directives/wcOverlay.js) Custom animations using the GreenSock library (see app/animations/listAnimations.js) Creating custom AngularJS animations using CSS (see Content/animations.css) JavaScript patterns for defining controllers, services/factories, directives, filters, and more (see any JavaScript file in the app folder) Card View and List View display of data (see app/views/customers/customers.html and app/controllers/customers/customersController.js) Using AngularJS validation functionality (see app/views/customerEdit.html, app/controllers/customerEditController.js, and app/directives/wcUnique.js) More… Conclusion I’ll be enhancing the application even more over time and welcome contributions as well. Tony Quinn contributed the initial Node.js/MongoDB code which is very cool to have as a back-end option. Access the standard application here and a version that has custom routing in it here. Additional information about the custom routing can be found in this post.

    Read the article

  • angularjs model view update through angular directive

    - by Relicset
    I am trying to update my view using model in angular directive here is the directive I have created app.directive('aboutOptions', [function() { return { restrict: 'C', scope: { testing: '=' }, transclude: true, link: function(scope, elem, attr) { scope.$watch(attr.ngModel, function() { console.log(scope.$eval(attr.ngModel)); scope.testing = scope.$eval(attr.ngModel); }); } } }]); here is html model and file name is ab.html <input type="text" class="about-options" ng-model="testing" /> Here is the view to be updated and file name is show.html <h2 class="about-options">{{testing}}</h2> ab.html file will be loaded as a template inside jquery ui dialog and my show.html file is in main page If I remove scope: { testing: '=' }, Console is showing what I am typing Update - 1 Tried with the following changes testing: '=test' And in html <input type="text" class="about-options" ng-model="testing" /> <h2 class="about-options">{{test}}</h2>

    Read the article

  • Auto populate input based on file name with AngularJS

    - by LouieV
    I am playing around with AngularJS and have not been able to solve this problem. I have a view that has a form to upload a file to a node server. So far I have manage to do this using some directives and a service. I allow the user to send a custom name to the POST data if they desire. What I wan to accomplish is that when the user selects a file the filename models auto populates. My view looks like: <div> <input file-model="phpFile" type="file"> <input name="filename" type="text" ng-model="filename"> <button ng-click="send()">send</button> </div> file-model is my directive that allows the file to be assigned to a scope. myApp.directive('fileModel', ['$parse', function($parse) { return { restrict: 'A', link: function(scope, element, attrs) { var model = $parse.(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function() { scope.$apply(function() { modelSetter(scope, element[0].files[0]); }); }); } }]); The service: myApp.service('fileUpload', ['$http', function($http){ this.uploadFileToUrl = function(file, uploadUrl, optionals) { var fd = new FormData(); fd.append('file', file); for (var key in file) { fd.append(key, file[key]); } for(var i = 0; i < optionals.length; i++){ fd.append(optionals[i].name, optionals[i].data); } }); }]); Here as you can see I pass the file, append its properties, and append any optional properties. In the controller is where I am having the troubles. I have tried $watch and using the file-model but I get the same error either way. myApp.controller('AddCtrl', function($scope, $location, PEberry, fileUpload){ //$scope.$watch(function() { // return $scope.phpFile; //},function(newValue, oldValue) { // $scope.filename = $scope.phpFile.name; //}, true); // if ($scope.phpFiles) { // $scope.filename = $scope.phpFiles.name; // } $scope.send = function() { var uploadUrl = "/files"; var file = $scope.phpFile; //var opts = [{ name: "uname", data: file.name }] fileUpload.uploadFileToUrl(file, uploadUrl); }; }); Thank you for your help!

    Read the article

  • Accessing a parent scope from a child directive

    - by zok
    The following code does not work. Apparently I cannot access someFunction() from child-dir. Is it a matter of accessing a parent scope from a child directive? How to do it, when the child directive comes from an external library? Angular/HTML: <parent-dir ng-controller="parentCtrl"> <child-dir ng-click="someFunction()"> </child-dir> </parent-dir> JS: .controller('parentCtrl', function($scope) { $scope.someFunction() { console.log('hello'); } }

    Read the article

  • Angularjs wait until

    - by Diolor
    I have: $scope.bounds = {} And later in my code: $scope.$on('leafletDirectiveMap.load', function(){ console.log('runs'); Dajaxice.async.hello($scope.populate, { 'west' : $scope.bounds.southWest.lng, 'east': $scope.bounds.northEast.lng, 'north' : $scope.bounds.northEast.lat, 'south': $scope.bounds.southWest.lat, }); }); The bounds as you can see at the begging they are empty but they are loaded later (some milliseconds) with a javascript library (leaflet angular). However the $scope.$on(...) runs before the bounds have been set so the 'west' : $scope.bounds.southWest.lng, returns an error with an undefined variable. What I want to do is to wait the bounds (southWest and northEast) to have been set and then run the Dajaxice.async.hello(...). So I need something like "wait until bounds are set".

    Read the article

  • Initializing AngularJS service factory style

    - by wisemanIV
    I have a service that retrieves data via REST. I want to store the resulting data in service level variable for use in multiple controllers. When I put all the REST logic directly into controllers everything works fine but when I attempt to move the retrieval / storing of data into a service the controller is not being updated when the data comes back. I've tried lots of different ways of maintain the binding between service and controller. Controller: myApp.controller('SiteConfigCtrl', ['$scope', '$rootScope', '$route', 'SiteConfigService', function ($scope, $rootScope, $route, SiteConfigService) { $scope.init = function() { console.log("SiteConfigCtrl init"); $scope.site = SiteConfigService.getConfig(); } } ]); Service: myApp.factory('SiteConfigService', ['$http', '$rootScope', '$timeout', 'RESTService', function ($http, $rootScope, $timeout, RESTService) { var siteConfig = {} ; RESTService.get("https://domain/incentiveconfig", function(data) { siteConfig = data; }); return { getConfig:function () { console.debug("SiteConfigService getConfig:"); console.debug(siteConfig); return siteConfig; } }; } ]);

    Read the article

  • AngularJS: structuring a web application with multiple ng-apps

    - by mg1075
    The blogosphere has a number of articles on the topic of AngularJS app structuring guidelines such as these (and others): http://www.johnpapa.net/angular-app-structuring-guidelines/ http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/ http://danorlando.com/angularjs-architecture-understanding-modules/ http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html However, one scenario I have yet to come across for guidelines and best practices is the case where you have a large web application containing multiple "mini-spa" apps, and the mini-spa apps all share a certain amount of code. I am not referring to the case of trying to have multiple ng-app declarations on the same page; rather, I mean different sections of a large site that have their own, unique ng-app declaration. As Scott Allen writes in his OdeToCode blog: One scenario I haven't found addressed very well is the scenario where multiple apps exist in the same greater web application and require some shared code on the client. Are there any recommended approaches to take, pitfalls to avoid, or good sample structures of this scenario that you can point to?

    Read the article

  • Server side C# MVC with AngularJS

    - by Ryan Langton
    I like using .NET MVC and have used it quite a bit in the past. I have also built SPA's using AngularJS with no page loads other than the initial one. I think I want to use a blend of the two in many cases. Set up the application initially using .NET MVC and set up routing server side. Then set up each page as a mini-SPA. These pages can be quite complex with a lot of client side functionality. My confusion comes in how to handle the model-view binding using both .NET MVC and the AngularJS scope. Do I avoid the use of razor Html helpers? The Html helpers create the markup behind the scene so it could get messy trying to add angularjs tags using the helpers. So how to add ng-model for example to @Html.TextBoxFor(x = x.Name). Also ng-repeat wouldn't work because I'm not loading my model into the scope, right? I'd still want to use a c# foreach loop? Where do I draw the lines of separation? Has anyone gotten .NET MVC and AngularJS to play nicely together and what are your architectural suggestions to do so?

    Read the article

  • Cancelling Route Navigation in AngularJS Controllers

    - by dwahlin
    If you’re new to AngularJS check out my AngularJS in 60-ish Minutes video tutorial or download the free eBook. Also check out The AngularJS Magazine for up-to-date information on using AngularJS to build Single Page Applications (SPAs). Routing provides a nice way to associate views with controllers in AngularJS using a minimal amount of code. While a user is normally able to navigate directly to a specific route, there may be times when a user triggers a route change before they’ve finalized an important action such as saving data. In these types of situations you may want to cancel the route navigation and ask the user if they’d like to finish what they were doing so that their data isn’t lost. In this post I’ll talk about a technique that can be used to accomplish this type of routing task.   The $locationChangeStart Event When route navigation occurs in an AngularJS application a few events are raised. One is named $locationChangeStart and the other is named $routeChangeStart (there are other events as well). At the current time (version 1.2) the $routeChangeStart doesn’t provide a way to cancel route navigation, however, the $locationChangeStart event can be used to cancel navigation. If you dig into the AngularJS core script you’ll find the following code that shows how the $locationChangeStart event is raised as the $browser object’s onUrlChange() function is invoked:   $browser.onUrlChange(function (newUrl) { if ($location.absUrl() != newUrl) { if ($rootScope.$broadcast('$locationChangeStart', newUrl, $location.absUrl()).defaultPrevented) { $browser.url($location.absUrl()); return; } $rootScope.$evalAsync(function () { var oldUrl = $location.absUrl(); $location.$$parse(newUrl); afterLocationChange(oldUrl); }); if (!$rootScope.$$phase) $rootScope.$digest(); } }); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The key part of the code is the call to $broadcast. This call broadcasts the $locationChangeStart event to all child scopes so that they can be notified before a location change is made. To handle the $locationChangeStart event you can use the $rootScope.on() function. For this example I’ve added a call to $on() into a function that is called immediately after the controller is invoked:   function init() { //initialize data here.. //Make sure they're warned if they made a change but didn't save it //Call to $on returns a "deregistration" function that can be called to //remove the listener (see routeChange() for an example of using it) onRouteChangeOff = $rootScope.$on('$locationChangeStart', routeChange); } This code listens for the $locationChangeStart event and calls routeChange() when it occurs. The value returned from calling $on is a “deregistration” function that can be called to detach from the event. In this case the deregistration function is named onRouteChangeOff (it’s accessible throughout the controller). You’ll see how the onRouteChangeOff function is used in just a moment.   Cancelling Route Navigation The routeChange() callback triggered by the $locationChangeStart event displays a modal dialog similar to the following to prompt the user:     Here’s the code for routeChange(): function routeChange(event, newUrl) { //Navigate to newUrl if the form isn't dirty if (!$scope.editForm.$dirty) return; var modalOptions = { closeButtonText: 'Cancel', actionButtonText: 'Ignore Changes', headerText: 'Unsaved Changes', bodyText: 'You have unsaved changes. Leave the page?' }; modalService.showModal({}, modalOptions).then(function (result) { if (result === 'ok') { onRouteChangeOff(); //Stop listening for location changes $location.path(newUrl); //Go to page they're interested in } }); //prevent navigation by default since we'll handle it //once the user selects a dialog option event.preventDefault(); return; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Looking at the parameters of routeChange() you can see that it accepts an event object and the new route that the user is trying to navigate to. The event object is used to prevent navigation since we need to prompt the user before leaving the current view. Notice the call to event.preventDefault() at the end of the function. The modal dialog is shown by calling modalService.showModal() (see my previous post for more information about the custom modalService that acts as a wrapper around Angular UI Bootstrap’s $modal service). If the user selects “Ignore Changes” then their changes will be discarded and the application will navigate to the route they intended to go to originally. This is done by first detaching from the $locationChangeStart event by calling onRouteChangeOff() (recall that this is the function returned from the call to $on()) so that we don’t get stuck in a never ending cycle where the dialog continues to display when they click the “Ignore Changes” button. A call is then made to $location.path(newUrl) to handle navigating to the target view. If the user cancels the operation they’ll stay on the current view. Conclusion The key to canceling routes is understanding how to work with the $locationChangeStart event and cancelling it so that route navigation doesn’t occur. I’m hoping that in the future the same type of task can be done using the $routeChangeStart event but for now this code gets the job done. You can see this code in action in the Customer Manager application available on Github (specifically the customerEdit view). Learn more about the application here.

    Read the article

  • How to define an angular directive inside an angular directive's link function?

    - by user2316667
    I want to create an angular directive inside of a link function, however; the directive created is not able to be compiled. See this JSFiddle: http://jsfiddle.net/v47uvsj5/5/ Uncommenting this directive in the global space works as expected. app.directive('test', function () { return { templateUrl: 'myform', // wraps script tag with id 'myform' restrict: 'E', require: "^mydir", replace: true, scope: { }, link: function (scope, element, attrs, mydirCtrl) { scope.remove = function () { element.remove(); mydirCtrl.remove(); } } } }); But the exact same code inside the link function fails. The reason I want to do this is because I want the user (who is going to be myself) to be able to provide only a script tag's id via an id attribute to my main directive which will in turn create a 'wrapper' directive with a 'remove' method. This way, in the script tag, all one needs to do is implement the 'remove'.

    Read the article

  • AngularJS directive not displaying the template

    - by iJay
    Here is my AngularJs directive. Its' expected to show the div in the template but it shown nothing while the code is run. Here is the html <div ng-app="SuperHero"> <SuperMan></SuperMan> </div> Here is the AngularJS directive var app = angular.module('SuperHero',[]); app.directive('SuperMan',function(){ return{ restrict:'E', template: '<div>Hello fromt Directive</div>' } }); And here is the demo

    Read the article

  • Pass ng-model and place-holder value into directive

    - by Zen
    I have a segment of code needs to be reuse a lot, there for I want to just create a directive for it. <div class="btn-group"> <div class="input-group"> <div class="has-feedback"> <input type="text" class="form-control" placeholder="BLAH BLAH" ng-model="model"> <span class="times form-control-feedback" ng-click="model=''" ng-show="model.length > 0"></span> </div> </div> </div> I want to use this code as template in directive. Create a directive used as follow: <div search-Field ng-model="model" placeholder="STRING"></div> to replace to old html, ng-model and placeholder will be as variables. angular.module('searchField', []) .directive('searchField', [function () { return { scope: { placeholder: '@', ngModel: '=' }, templateUrl: 'Partials/_SearchInputGroup.html' } }]); Is it the way of doing it?

    Read the article

  • Where should I start reading AngularJS's source code?

    - by Abaco
    After reading this article I realized that I really didn't read any "serious" source code during my 3-years as a professional developer. Recently I started a new web-project which makes heavy use of AngularJS, so I decided to start my reading - or, better, decoding [as the blogger wrote] - activity from something that is both challenging and professionally useful. Now I just need to be pointed in the right direction. Should I just start from the start of the source code or is there a better starting point?

    Read the article

  • Overview of getting and setting the URL and parts of the URL using angularjs and/or Javascript

    - by Sandy Good
    Getting and Setting the URL, and different parts of the URL are a basic part of Application Design. For Page Navigation Deep Linking Providing a link to the user Querying Data Passing information to other pages Both angularjs and javascript provide ways to get/set the URL and parts of the URL. I'm looking for the following information: Situation: Show a simple URL in the browser address bar to the user Provide a more detailed URL with string parameters to the page that the user will not see. In other words, two different URLs will be used, one simple one that the user sees in the browser, a more detailed one available to the page on load. Get URL info with PHP when then page intially loads, both don't reload the PHP page when the user needs more detailed info that is already loaded but not displayed yet. Set the URL with a more detailed URL for deep linking as the user drills down to more specific information. Get URL info in a controller or JavaSript when angularjs detects a change in the URL with routing. Hash or Query String or Both? Should I use a hash # in the URL, a string ?= or both? Here is what I currently know and what I want: A Query String HTTP:\\www.name.com?mykey=itemID will prevent angularjs from reloading the page. So, I can change the URL by adding/changing the string at the end, thereby providing new info to the page, and keep the page from reloading. I can change the URL and force a page reload with: window.location.href = "#Store/" + argUserPubId + "?itemID=home"; If home is the itemID string, I want code to simply load the page, and not display more detailed information. If there is a real itemID in the URL query string, I want the code to display the more detailed information. Code from angularjs will run either from the controller specified in the routing, or a controller specified in the HTML, or both. The angularjs code specified in the routing seems to run first, before the code specified in the HTML. A different URL for the page can be used in angularjs templateURL: than the URL that was sent to the browser address bar. when('/Store/:StoreId', { templateUrl: function(params){return 'Client_Pages/Stores.php?storeID=' + params.StoreId;}, controller: 'storeParseData' }). The above code detects http:\\www.name.com\Store\StoreID in the browser, but SENDS http:\\www.name.com\Client_Pages/Stores.php?storeID=StoreID to the page. In the above code, a function is used for the angularjs routing templateURL: to dynamically set the templateURL. So, when the user clicks something to see details of an item, how should I configure the URL? Should I use angularjs $location or window.location.href ? Should I use a longer URL with more parameters, a hash bang, or a query string? Should I use: http:\\www.name.com\Store\StoreID\ItemID or http:\\www.name.com\Store\StoreID#ItemID or http:\\www.name.com\Store\StoreID?ItemID or http:\\www.name.com\Store#StoreID?ItemID or Something else?

    Read the article

  • Using attribute text value in AngularJS directive

    - by C1pher
    Using a YouTube tutorial created by John Lindquist, I was able to create a directive using a template. See fiddle: http://jsfiddle.net/37PSs/ Now, I want to use the value of the attribute as a variable to a function call. Something like this: html: <hello-world name="World"></hello-world> javascript - directive: template: '<span>myFunction({{name}})</span>' javascript - myFunction(theirName): return ("Hello, " + String(theirName) + "!"); The closest I've been able to get is passing an [object Window] to my function.

    Read the article

  • angular custom directive required validation is not updated

    - by Wouter Willems
    i created my own directive, replacing an input field with a custom made input field. However, the validation of the required field never seems to update and instead is always false. Other directives inside my directive like ng-class do work. I have created a plunker here to show this problem: http://plnkr.co/edit/NuZNAJceL0MVX8i6RK9n?p=preview Can anybody help me out how to make sure that the required validation is properly updated?

    Read the article

  • AngularJs not working with dynamic html

    - by user2541753
    In my cshtml file I have a form named 'ApplyMedicalMain' and I want to show a dynamically loaded division when the form is dirty but its not happening even though the form is dirty ... Below is my code that i got in Firefox Inspect Element: <form class="form_section ng-dirty ng-valid ng-valid-required" name="ApplyMedicalMain" method="post" action="/MVC/Quote/ApplyMedical"> <div id="Step1_PartialView" class="QuoteStep1"> <script type="text/javascript" src="/Scripts/Renderings/Presales/ApplyMedical.js"> <div name="Conditions" id="conditions_or_symptoms" ng-hide="ApplyMedicalMain.$dirty"> <div class="generic_error_message select"> <div class="error_icn_message"></div> </div> As you can see above, I have mentioned ng-hide for the division name='conditions' but it is not getting hidden even though the form has class 'ng-dirty'.And please note that the the division 'conditions' is loaded dynamically from other partial view. can someone help me ?

    Read the article

  • AngularJS directives with async content

    - by SirDavik
    I'm generating a dynamic number of Google Charts tables after receiving the content through an ajax request and I wanted to apply an accordion effect on them. I wanted to know if I could do that with directives (since if I just code render the angular tags they won't get interpreted). I don't need a code example, just a short answer to see if I should learn directives or if I should do it in a different way (I was thinking routeParams). Thanks!

    Read the article

  • Angularjs togglecheck error(not working as intended) with prechecked data

    - by crozzfire
    I have this plunker where i have a button that opens a bootstrap modal dialog box. I the modal, when a course is selected(checked) from this list, it adds 3 to the $scope.planned and also increases the progress bar accordingly. Similarly it also reduces in the same way when a checkbox is unchecked. This is the function that does the above: $scope.toggleCheck = function (course) { //debugger var x = $scope.checkcoursefunction($scope.selectedCourses, course); if(x==true){ $scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1); $scope.planned -= 3; } else{ if ($scope.selectedCourses.indexOf(course) === -1){ $scope.selectedCourses.push(course); $scope.planned += 3; } else { $scope.selectedCourses.splice($scope.selectedCourses.indexOf(course), 1); $scope.planned -= 3; } } $scope.getPercentage(); }; I have 2 services from where the controller fetches its data named Requirements and Planned Services. The table in the modal has a list of the requirements service data. I also have a function named checkplanneddetails() that checks if an item from this data is present in the requirements data. If present, they come in the table pre-checked. This is the function that checks: $scope.checkplanneddetails = function(course){ $scope.coursedetail = course; $scope.requirementcoursename = ($scope.coursedetail.course.subject).concat("-",$scope.coursedetail.course.course_no); for(var k = 0; k < $scope.planneddetails.length; k++){ if($scope.requirementcoursename==$scope.planneddetails[k].course_name){ $scope.selectedCourses.push(course); return true; } } return false; }; $scope.checkcoursefunction = function(arr,obj){ return (arr.indexOf(obj) != -1); } This works fine with bringing the data as checked. But the togglecheck() function does not work as they are supposed to with these checked details(they work in reverse). It always returns true(for var x in togglecheck) even after the splice function. Am i splicing the course correctly?

    Read the article

  • angular js scope property is undefined

    - by user2071301
    why is $scope.orderBy undefined? Shouldnt it be "test" ? http://jsfiddle.net/XB4QA/4/ var app = angular.module("Foo", []); app.directive("two", function () { return { scope: { orderBy: '@' }, restrict: 'E', transclude: true, controller: function ($scope, $element, $attrs) { console.log($scope.orderBy); // is undefined, why? }, template: '<div></div>', replace: true }; }); <div ng-app="Foo"> <two order-by="test">test</two> </div>

    Read the article

  • O&rsquo;Reilly Deal of the Day 10/June/2014 - AngularJS Directives

    - by TATWORTH
    Originally posted on: http://geekswithblogs.net/TATWORTH/archive/2014/06/10/orsquoreilly-deal-of-the-day-10june2014---angularjs-directives.aspxToday’s half-price E-Book offer from O’Reilly at http://shop.oreilly.com/product/9781783280339.do is AngularJS Directives. “AngularJS, propelled by Google, is quickly becoming one of the most popular JavaScript MVC frameworks available, working to invert the development paradigm and bring data-driven modularity to the web frontend. Directives serve as the core building blocks in AngularJS and enable you to create reusable models that mold around your data structures and breathe new life into the intersection of HTML and JavaScript.”

    Read the article

1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >