An Open View

Creating your own Angular Material Navigation Menu

Posted by Chris Britz

Jul 8, 2015 12:48:00 PM AngularJS, Enterprise Fullstack, angular-material

Create an Angular Material style side nave menu.

For those like me who want to see the code first, then the code for this can be found in two locations.

  1. Github repo found here:  Github Angular Material Menu  
  2. Working Plunker found here:  Plunker ngMaterial Menu

Backstory

Ever since Angular Material came out I have been watching and waiting for the neat side navigation menu on their site


Read More


How to Test An Angular Directive's Linking Function Using Isolate Scope

Posted by Chris Britz

Feb 17, 2015 4:28:00 PM AngularJS, Enterprise Fullstack

Have you ever wanted to get the scope of a linking function in a directive for testing.  Let me rephrase that. Have you ever wanted to test the isolate scope within your directive's linking function?  You probably have if your are a fan of well written and maintainable code. So I was trying to test my brand spanking new directive lets call it "myPerogative".   Now myPerogative just happens to have an isolate scope like most directives. Normally when I test I use this sort of syntax:

NOTE: I write my Angular tests with Jasmine.  So any tests you see will use Jasmine's matchers and setup.  This Plunker will be used to demonstrate this blog post

     beforeEach(inject(function ($rootScope, $controller) {


        $scope = $rootScope.$new();


        controller = $controller('MyController', {
            '$scope': $scope
        });

However, this works will only controllers that are registered with the $controller service.  

Your probably thinking:


Read More


Angular and D3 = ng3-charts: How to Build D3 Charts with Angular Directives

Posted by Chris Britz

Jan 8, 2015 1:37:00 PM AngularJS, JavaScript, Enterprise Fullstack

            Have you ever wanted to create stunning charts without having to learn the intricacies of D3 and SVG graphics in HTML?  After watching endless hours of D3 videos and reading multiple blog posts, documentation, and books with nothing to show but a headache and a blank web page I decided to try to find something encapsulate D3's internals.

Read More


How to enable a reCAPTCHA Image in an Angular/Node Application

Posted by Chris Britz

Oct 7, 2014 4:24:00 PM AngularJS, Node js

In this post I will talk about how I embedded a simple captcha widget in my Angular/Node application.  This task requires your Angular client and Node server to be changed, as the node server needs to make a request to the Google reCAPTCHA API server to verify key and challenge question.  Having the Angular and Node kind of separation of concerns I'll go through the Angular side first, and then I'll end with the Node server side implementation.


Read More


How to Create a Dynamic Modal Directive in Minutes using Angular and UI Bootstrap

Posted by Chris Britz

Aug 18, 2014 12:56:00 PM AngularJS

This talk I will walk through creating a modal window that is generic in the sense that it will take any old arbitrary html and stuff it in a modal window that is used throughout your site. This uses the Angular Bootstrap UI Modal window and wraps that directive in another directive. You can find the source code to a demo that I have created for this here. I have broken this down into the major sections in which, hopefully, this will be explained. You can either follow along or just look at the code located on the github link above. So let's get started.


Read More


Compiling HTML on the Fly via $compileProvider Directive

Posted by Chris Britz

Apr 9, 2014 5:16:00 PM MongoDB, AngularJS, JavaScript, $Compile

Once again I find myself learning something new with Angular. Today I found out how to effectively use the $compile service to compile an html snippet containing an Angular binding expression. For example, a snippet matching the context of this:


Read More


Including a Blog RSS Feed in your AngularJS App

Posted by Doug Schnelzer

Mar 12, 2014 12:45:00 PM AngularJS, Google Feed API, Node js

Including an RSS feed from a blog or news site is a great way to keep the content of your website fresh so that people will want to come back and check out your site regularly.  Including an RSS feed in your AngularJS application is easy using the Google Feed API.  We recently used the Google Feed API in an AngularJS web app.  We wanted to share this with the community, so we put together a simple example to show how this works.  You can check out the example on my GitHub account.  Thanks to Chris Britz for helping put all this together.


Read More


    

An Open View

Vizuri Blog

Subscribing to our blog is a great way to stay up to date with the latest information from Vizuri, as well as our strategic partners. We focus on providing a range of content that is practically useful and relevant from both a technical and business perspective.

We promise to respect your privacy.

×