AngularJS Popup Dialog as a Reusable Service : Fundoo Solutions. At Fundoo Solutions, we found ourselves having the need to show popup dialogs in the multitude of projects we have worked on. We always ended up using Twitter bootstrap, and we loved their modal dialogs. But we found it very restrictive, or needing a lot of customization to make it look and behave how we wanted it to. So, we took their CSS, and added our own functionality, and ended up with what we are calling AngularJS Popup Dialog or AngularJS Modal Service. Why create the AngularJS Popup Dialog Service? As we mentioned, we found ourselves redoing the same stuff again and again. Style the contents differently, need a different controller on each modal, pass in some content to the modal to display it, etc. We didn’t want to pollute the DOM with the modal content unless the modal was to be displayed. How do I use it? We export the service ‘createDialog‘ as part of the ‘fundoo.services‘ module.
CreateDialog(templateUrl, otherOptions, argumentsForController) Thats about it. Sure. Awesome Google Maps Components with AngularJS by wbyoko. Making Google Maps Components with AngularJS I have been hacking with AngularJS since the start of the year. I really enjoy the framework, though outside of personal and side projects, I really hadn't found a good way to get it into the toolkit at work. I thought maps would be a good opportunity. I had already chipped in with two Google Maps pieces this year. Finally, a project came around which I would be maintaining and felt this would be a great opportunity to see if AngularJS could fit. Link Function The simplest situation is just setting up a map with a starting location. You could use a directive controller, and would be straightforward using both.
Custom Controls Now, it wasn't until I had realized the ease with which I could add data-binded custom controls, that I knew that AngularJS could help making really ambitions maps applications not only possible, but very manageable. I created a demo/source file to show a data-binded custom controls in action. Binding to the Map $scope. Tools. What to know to be an expert in AngularJS | Código Vivo. You need to know its “core” very well. i.e. Dependency Injection, Double binding, Directives. I think of them as the three pillars of AngularJs Dependency Injection It´s the heart of angular used to organize the code in single units of functionality/responsibility and to make it Testable!!!! What is the minimum you should know? The Concept: What is IoC? Martin Fowler has a great blog entry where he explains what it is and what are its benefits regarding other mechanisms like the service locator for example.You need to understand what are the modules, what is the difference between calling ‘value’, ‘factory’, ‘service’, ‘constant’, ‘directive’.Understand providers, and how to use them to configure your injectable objects in the modules’ config function.Know all the important services that are provided by angular like the $http, $route, $location, etc…..
Double Binding Understand the reason behind it. Directives Directives are hard to build, to maintain and to some extend to test. Unit Testing. AngularJS Abstractions: Services. At first glance, services in AngularJS are a catch-all destination for any code that doesn’t fall into one of the other primary abstractions in the framework. If it’s not a controller, filter, directive, or model, it must be a service. One reason to think to think this way is because one can interpret the word “service” to mean anything in software. However, services in Angular have capabilities and behaviors that make them well suited for specific jobs. Services As Application Helpers Controllers, applications, and even other services can take a dependency on 0 or more services, meaning services can be a convenient location for code that is used in different places throughout an application.
For example, if two controllers both require some algorithmic logic to make a decision, it would be better to place the logic inside a service that both controllers can use than have the code duplicated in two different controllers. Services As Singletons Services As Communication Hubs Summary. Jeffbcross/ngswipe-demo. AngularJS Daily. Egghead.io - AngularJS - Experimental "Controller as" Syntax. Dynamically Loading Controllers and Views with AngularJS and RequireJS - Dan Wahlin's WebLog. Dynamically Loading Controllers and Views Updated: August 30th, 2014 A complete sample application that uses the techniques shown in this post can be found at AngularJS provides a simple way to associate a view with a controller and load everything at runtime using the $routeProvider object.
Routing code is typically put in a module’s config() function and looks similar to the following: While this type of code works great for defining routes it requires controller scripts to be loaded upfront in the main shell page by default. That works fine in some scenarios but what if you have a lot of controller scripts and views in a given application and want to dynamically load them on-the-fly at runtime? This approach works well in cases where you don’t want all of your controller scripts loaded upfront, but it still doesn’t feel quite right – at least to me. Notice that a single value is passed into the route.resolve() function. Here’s how it works: AngularJS Daily. Things I Wish I Were Told About Angular.js. Recently I have worked on a project using Angular.js. As of writing this post, it’s a medium sized app (~10 modules, ~20 controllers, ~5 services and ~10 directives) with quite decent test coverage.
When I look back, I find myself learning much more about Angular.js than before. It’s not a smooth ride: I’ve gone through lots of refactor and rewrite. And there are lots of things I wish I were told before I started to work on Angular.js Heads up! About Learning Curve Angular.js has a very different learning curve from Backbone.js. However, Angular.js is very different.
The problem is when you dive into Angular.js and start to write some serious app, the learning curve suddenly becomes very steep and its documentations are either incomplete or cumbersome. Understand Modules Before You Start Angular.js does not force you to use its module system. So I had to stop and refactor my code. So if you do not want to go through the refactor, learn and plan your modules before you start. About Testing. Classical OOP Inheritence in AngularJS using Coffeescript. Var __hasProp = {}. hasOwnProperty , __extends = function ( child , parent ) { for ( var key in parent ) { if ( __hasProp . call ( parent , key )) child [ key ] = parent [ key ]; } function ctor () { this . constructor = child ; } ctor . prototype = parent . prototype ; child . prototype = new ctor (); child . __super__ = parent . prototype ; return child ; }; angular . module ( 'myApp' , [ 'ngCookies' ]). factory ( 'BaseObject' , [ '$log' , '$http' , function ( $log , $http ) { var BaseObject ; return BaseObject = ( function () { function BaseObject ( options ) { this . options = options ; BaseObject . prototype . send = function ( args ) { $log . log ( 'sending' , args ); return $http ( args ); return BaseObject ; ]). factory ( 'ParentObject' , [ 'BaseObject' , '$cookies' , function ( BaseObject , $cookies ) { var ParentObject ; return ParentObject = ( function ( _super ) { __extends ( ParentObject , _super ); function ParentObject ( options ) { ParentObject .
Return this . send ( this ); Angular-app/angular-app. AngularJS Best Practices: I’ve Been Doing It Wrong! Part 2 of 3 | Art & Logic Blog. Three sanity-preserving ideas that will make me and you 10x more productive with real-world AngularJS applications This is the second in a three-part series on practical large-scale development with AngularJS. The TL;DR version is at the end of the article. If you have not read the first part, you might want to start with it. It lays out the foundation for the structure of a large-scale AngularJS project. Part 2: Enjoyable Automated Testing Automatic testing is easy, natural, and helpful.
Like any undesirable habit, the habit of not-testing-the-code can be fixed if tests are an integral part of our coding routine, and they get executed and checked without any conscious effort on our part. So, what does Karma do for you? Thanks to integration with Grunt, every time you modify a file, the test suite gets a re-run, and test results are regenerated. The official documentation says it best. How do I write my tests? It depends on your favourite testing framework. Unit Tests Happy testing! AngularJS State Management with ui-router | txt. Managing state with AngularJS’s ui-router ( is down right elegant. How is it different from a traditional router you might ask? Well I’ll tell you, but first… Update!! I’ve written an updated post which includes a sample repository and walks through much of this example with up to date versions of angular and ui-router. A little history about routers Routers provide an abstraction between a url and a request that an application knows how to satisfy.
With traditional web service applications, this is straight forward: A url is routed to a request. When a service is rendering a page or retrieving data, this separation of responsibilities makes sense. But what happens when the concept of a “page” becomes more ambiguous? If page composition is fluid, but we still need urls to discretely (for the most part) represent the various permutations of content, how do we effectively route requests?
AngularJS State Manager You Don’t! What can State do for me? App.js. Angular App in Sub Path using base @ Leon Radley. When integrating angular into a system that isn't new it's a bit of a struggle trying to get all routes to work and get the initial data in there. At work we have recently started to integrate Angular with our current applications by serving them up from a sub path, such as: The problem I faced with this was that I didn't want to have to include /admin/survey/123 in all my routes / links. There must be a better way. Meet the html base tag It's not one of the most used html tags but it's great. To the top of your <head> all relative links now are relative to the specified base href. So a link that would have looked like this <a href="/admin/survey/{{survey.id}}/field/{{field.id}}"></a> can now be shortened to <a href=".
Notice the period (.) before the / this is what makes it relative to the base tag and not the the domain. And the same goes for all the routes. Could now be simplified as this. Base href data <! And then the AppCtrl and SurveyService Conclusion. Nucleus-angular/rest. Btford/ngmin. Googledrive.github.io/realtime-tasks/#/install. AngularJS - HTML as it should be | What next? | Tools of the trade. Plunker. AngularJS. New features on Restangular: the ultimate Rest API client for AngularJS. Hey, I’ve been working more and more on Restangular and added a bunch of more features. You don’t know about it yet? Click here to find out @Github Let’s get down to business. What are the cool new features? 1) You can now do URL Building with Restangular: Sometimes, we have a lot of entities names with their ids and we just want to fetch the later entity. 2) Now you can manually run any custom Rest operation that’s not 100% Restful anyway.
Sometimes our APIs have other operations besides the regular one. 3) You can also create your own Restangular methods and extend it as you want. Let’s assume that your API needs some custom methods to work. 4) It’s now available in a CDN. 5) Now you can send your own Headers Every method in Restangular now accepts custom Query parameters and custom Headers as parameters. 6) Now you can use any response format in Restangular 7) Restangularized promises Now all promises are enhanced as well. That’s it for now! Easily index your Single Page Application thanks to PhantomJS ¤ Vickev.
Google provides a way to index your Single Page Application (SPA), built with Angular.js, Backbone.js, or other Javascript framework (ember.js, knockout.js, and others). In this article, we will first see together how it proceeds, the amount of work that the webmaster has to do, and then we will come up with an automatic solution. All along this article, I will introduce tools and examples of this website, vickev.com (which is built with Angular.js and Node.js), to prove the relevance of the method. The magic of Google crawl Google perfectly indexes websites, but without executing any javascript code.
If the website is well-done, it should display the information, no matter if the javascript is enabled or not. However, in the case of SPA, the foundation is based on Javascript. So, Google came up with a solution for developers. If it is not clear (I'm not sure it is, actually), please consult the official guide, which is pretty clear in my opinion. Try it yourself! We will have this result: Mapping AngularJS Routes Onto URL Parameters And Client-Side Events. The Nuances of Scope Prototypal Inheritance · angular/angular.js Wiki. What is the difference between module.factory and module.service and how might both be applied?
Models and Services in Angular. Image from What's a Model? What's a Service? I read over a post by Joel Hooks today called Modeling Data and State in Your AngularJS Application and the idea was put forward that you can clean up your Controllers by (basically) using Angular's service as a model. The idea is a good one: Clean Controllers are Godly Controllers but there's some confusion in the post that I think will end up spreading. Straight up-front: All services (service(), factory(), provider()) in Angular are SINGLETONS. It's difficult under any circumstances to consider a Singleton as a model. There are so many jargon-filled terms disseminated throughout different approaches to software design... but I think we can agree that a model is representative of data (as opposed to a Domain Model which is all of your stuff under a big umbrella). One might consider this list to be two instances of a single Model, Author: Domain vs. Ng-animate First Look with AngularJS Wizard.
The Setup So my friend Matias, aka Year of Moo, Moo or MooMoo as I like to call him just dropped some animation functionality into AngularJS. I think this is fantastic and am super excited to see AngularJS get some love in the visual department. I dig that I can be functional AND fashionable! There is still a lot of work to be done around ng-animate but it is a great start and so I wanted to build something “useful” to get our feet wet.
In the spirit of transparency I freely admit that my example is whimsical and silly and so if you write me and are like “You forgot to do BLAH BLAH or it is going to blow up in the enterprise” I AM GOING CLOTHESLINE YOU! With that said, we are going to build a wizard style dialog using AngularStrap and ng-animate. And beneath the dialog we find the nucleus. DemoCode The Foundation We are going to first build the wizard by itself without any of the special sauce and then I am going to show you how easy it is to add in the animations. Step 2: AngularStrap Modal. AngularJS Modules for Great Justice | Coding Smackdown TV - Putting a headlock on the coding lifestyle! First off I want to thank Joel Hooks of the DFW Area AngularJS Meetup Group for suggesting this topic and providing the title.
“Modules provide an excellent mechanism for cleanly dividing up our code into functional areas. Angular allows us to use modules in many ways. Let’s take a look at modules and some of the approaches we can leverage to produce cleaner more manageable code.” – Joel Hooks So with that, let’s get started. AngularJS modules are the core means by how you define the components in your app. Besides defining your components, modules provide a way to indicate the dependencies your components require and they help you organize your components to help you write modular code that can be re-used across applications. As long as I have been developing with AngularJS there has always been the great best practices debate over how to structure your application.
Package by Feature Package by Feature became popular in the Java development camp a few years back. Package by Layer <! <! Lazy Loading In AngularJS | IFY I/O. AngularJS Best Practices (public)