background preloader

AngularJS

Facebook Twitter

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.

AngularJS Popup Dialog as a Reusable Service : Fundoo Solutions

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. We didn’t want to pollute the DOM with the modal content unless the modal was to be displayed. 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.

Awesome Google Maps Components with AngularJS by wbyoko

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. What to know to be an expert in AngularJS. You need to know its “core” very well. i.e.

What to know to be an expert in AngularJS

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? 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.

AngularJS Abstractions: Services

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. 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.

Dynamically Loading Controllers and Views with AngularJS and RequireJS - Dan Wahlin's WebLog

Routing code is typically put in a module’s config() function and looks similar to the following: AngularJS Daily. Things I Wish I Were Told About Angular.js. Recently I have worked on a project using Angular.js.

Things I Wish I Were Told About 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. 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 .

Classical OOP Inheritence in AngularJS using Coffeescript

__super__ = parent . prototype ; return child ; }; angular . module ( 'myApp' , [ 'ngCookies' ]). factory ( 'BaseObject' , [ '$log' , '$http' , function ( $log , $http ) { var BaseObject ; return BaseObject = ( function () { function BaseObject ( options ) { Angular-app/angular-app. AngularJS Best Practices: I’ve Been Doing It Wrong! Part 2 of 3. 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.

AngularJS Best Practices: I’ve Been Doing It Wrong! Part 2 of 3

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. AngularJS State Management with ui-router. Managing state with AngularJS's ui-router ( is down right elegant.

AngularJS State Management with ui-router

How is it different from a traditional router you might ask? Well I'll tell you, but first... 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: 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.

Angular App in Sub Path using base @ Leon Radley

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. Nucleus-angular/rest. Btford/ngmin. Googledrive.github.io/realtime-tasks/#/install. AngularJS - HTML as it should be. 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. 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. 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? 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! 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. Lazy Loading In AngularJS. When building large sites or apps with many routes/views in AngularJS, it would be good to not have to load all artefacts such as controllers, directives etc., on the first load. Ideally, on first load, only the artefacts that are needed for the route in question, will be loaded. This may be either in one download or multiple depending on the app, however, it will only be what is needed to render the particular route. Then as the user navigates the app by changing the route, other artefacts that have not already been loaded, will then be loaded as and when there are needed.

Not only should this potential speed up the initial page load, but it should also result in bandwidth not being wasted. AngularJS Best Practices (public)