AngularJS ngInclude directive and scope inheritance

ngInclude directive and scope

There are many times when you want to include a html snippet code from another file but preserve the scope of it. It is usually when you have different form fields for the various objects and you want to have a global controller that oversees the updating of different forms. So if you want to take the quickest route and use ngInclude directive you would be surprised that it is not properly linking to your controller and you cannot access the form instance.

This is due to ngInclude internals and how they work. ngInclude creates for each use as a new child scope so overwriting anything inside the new included HTML file content will be written into child scope and not in the one you’ve anticipated to be. So there are few workaround around this as creating a new object inside the scope for example

$scope.data = {}

inside the controlling controller and then in the imported html file set values inside the

<input type="text" ng-model="data.name"/>

This works if you don’t have a problem with static value being inserted into all html files, but if you want maximum flexibility then this is not the perfect solution. So after inspecting the source code inside ngInclude.js, I have seen a room for improvement and created a similar directive to ngInclude called ngInsert, which instead of making new child scope it inherits the current scope and continue using it inside. You can pick up the whole source code at this gist. You can use it in the same manner as existing ngInclude. Continue reading “AngularJS ngInclude directive and scope inheritance”

How to record iPhone screen

To record iPhone screen has never been easier

Developing great new iOS application requires not just a usable application, but also a great video presentation of it. How it works, basic usability tricks to make users want to get your new application which you spent numerous hours to make it perfect.

If you are working alone on next big thing or inside a small agency or team and you probably have a limited budget to outsource your video production one of the hardest parts was shooting the actual content from iOS device, whether it is iPhone or iPad. Until now you could use some kind of recording of iOS simulator or using airplay method to sync the video. It worked but it was somehow clunky experience and you needed to buy extra software.

With the release of Mac OS Yosemite version everything has changed. Now you can record you iOS device screen directly without buying additional software whatsoever. All you need to have the computer upgraded to Yosemite version and an iPhone or iPad to latest iOS 8. iOS device needs to connect to your computer through lighting cable.

Continue reading “How to record iPhone screen”

AngularJS and Ruby on Rails work together

Finding the best integration of AngularJS and Ruby on Rails

Recently I got really excited with AngularJS so to make it work perfectly with Ruby on Rails there are some configurations needed. There are available blog posts on how to integrate it perfectly but somehow I wasn’t happy with the available preferences. Some offered to add the javascript files manually to the project and to manual project organization, others offered some kind of gem packager or even automated as a rails app template.

My goal is to describe how to start new rails app project from the scratch but the instructions should be succinct enough to be able to reuse them for the existing project (Actually I did extract it from the existing application I am working on). For the front end development I recently discovered great gem that really can make it more closer to pure full stack javascript development.
Bower is a great javascript package manager by the people who are working on Twitter Boostrap. It is like Bundler but made for javascript instead of ruby language. When I found out that there is a ruby gem that is integrated with rake tasks so I can easily update all javascript libraries without needing adding gem library for each one. The gem is called bower-rails.

My initial plan is to evolve this post into a series of blog posts on how to develop a fully functional demo application so I’ve included some steps that are might not needed but are good to have. Don’t worry I will provide explanation why I am using each of them.
Here is my plan what I will try to achieve with this series of posts:

  • creating a new demo project with angularJS from scratch, showing all my changes along the way, and trying to explain every step. this will include creating basic rails 4 app
  • adding basic gems
  • setup front end development with Bower
  • adding angularJS
  • implementing basic Rails and AngularJS controllers

Continue reading “AngularJS and Ruby on Rails work together”

Working OAuth2 with Foursquare on Sinatra

require 'rubygems'
require 'sinatra'
require 'oauth2'
require 'json'
require 'net/https'
require 'foursquare2'

set :port, 80

CLIENT_ID = '****************************************************'
CLIENT_SECRET = '****************************************************'
CALLBACK_PATH = '/callbacks/foursquare'

def client
OAuth2::Client.new(CLIENT_ID, CLIENT_SECRET,
{:site => 'https://foursquare.com/',
:token_url => "/oauth2/access_token",
:authorize_url => "/oauth2/authenticate?response_type=code",
:parse_json => true,
:ssl => {:ca_path => '/etc/ssl/certs' }
})
end

def redirect_uri()
uri = URI.parse(request.url)
uri.path = CALLBACK_PATH
uri.query = nil
uri.to_s
end

get CALLBACK_PATH do
puts redirect_uri
if params[:code] != nil
token = client.auth_code.get_token(params[:code], :redirect_uri => redirect_uri).token
client = Foursquare2::Client.new(:oauth_token => token)
email = client.user('self')['contact'].email.to_s
return "Authenticated user: #{email}"
else
'Missing response from foursquare'
end
end

get '/' do
redirect client.auth_code.authorize_url(:redirect_uri => redirect_uri)
end

Latest eclipse app on Mac OS Lion preference pane

When upgrading to a new eclipse app and selecting existing workspace it makes preference pane unavailable. So to be able to access settings you have to either create a new workspace and migrate projects to a new workspace or remove settings files from old one. This saved my time a couple of times.