Skip to main content

Posts

Showing posts from June, 2016

Angularjs scope lifecycle

chutzpah - jasmine unable find inject

if you're getting some weird message "reference error: inject is not defined", This very likely means required.js is not loading angular mock library for you.

To fix that, declare a variable and reference it.

import * as mock from "angular-mocks/ngMock";
var load = mock;

Yeap, the fix is that simple. :)


Note about requirejs - require, define, shim and config.js

 Just a quick recap of what's theses terms means

1, define - allows you to load module and its dependencies asynchronously. Assuming that your script supports AMD.




2. shim - allows you to add support for older script that does NOT support AMD. It has a few options like configuring deps, exports,

Configuring dependencies - here we are saying we need moduleA and moduleB too.



Configuring exports - here we are saying we need moduleA and from now onwards it will be known as ModA.



3. require() is to load modules. define() is to expose functions in a module to promote code reuse.


Creating a really basic angular directive with typescript

We're going to build a simple search angular directive using typescript. So it is going to look like this. As you type through, your search text changes. When you hit, search it fakes search results.


This is how our typescript look like.  It is not so complicated and extensively documented, in case you have any question. Please spend some time go  through the code. It is as basic as it can get. 


Lets walk through anyway.  
Line #1 - we import all angular's 1 typings. 
Line #5 - we declare an interface ISimpleSearchScope for the scope (this is the $scope - that you would use in angular1), just so we can put some intelli-sense to our code. :)
Line #11 - is where we define our SimpleSearchDirective. It inherits from ng.IDirective. 
Line #12 - binds a controller to our directive. If we do not do this, Search() function will not work but your, filter expression will {{}}. Just so we know the difference. 
Line #14 - controllerAs gives our controller a different name. 
Line #24 - is rea…

Mocking angularjs and typescript

First of all, lets get some details straight,

1. ngmock is for mocking angularjs internal components like $scope, $http and other services and that's all it does.

2. mocking typescript, you gotta use something like typemoq. Probably a good place to start as it support npm, bower and nuget out of the box. But you still need to create dummy mock (
base instance of your interface - which is kinda drag! :(

In fact if you're going to use something like typemoq, you end up writing manual mock object (literally typing out and implementing the required interface). Perhaps better to use jasmine spy.

Let me know what you're thoughts are on this.












Going back to Angularjs 1

Definitely not an expert when it comes  to Angular. This is part of my 1 week learning experience and i hope i pick up as much angular, typescript as a i can.

In general, Angularjs1 works in 2 phases :-

a) Configuring

b) Binding / Runtime

During the configuration phases, Angular has concepts like module, controller, services, providers and components (ui components)

Typically we worked with App -> Controller -> Services / Factory etc

Why use Factory and Value recipes? 

Long, long time ago, we have factory and we have values recipes. These becomes the cornerstone for laying down other components in angularjs (again we are repeating ourselves - module, controller, services, providers and components (ui components)

Because Angular injects various dependencies.

Factory recipes allows :-

- Lazy initialization
- Leverage on other services from a module or modules
- Service initialization

Value recipes is something like a key value pair that gives key / value definition for data-bindin…

Going back to Angularjs 1

In general, Angularjs1 works in 2 phases :-

a) Configuring

b) Binding / Runtime

During the configuration phases, Angular has concepts like module, controller, services, providers and components (ui components)

Typically we worked with App -> Controller -> Services / Factory etc

Why use Factory and Value recipes? 

Long, long time ago, we have factory and we have values recipes. These becomes the cornerstone for laying down other components in angularjs (again we are repeating ourselves - module, controller, services, providers and components (ui components)

Because Angular injects various dependencies.

Factory recipes allows :-

- Lazy initialization
- Leverage on other services from a module or modules
- Service initialization

Value recipes is something like a key value pair that gives key / value definition for data-binding in angularjs.

Example of value recipes are as follows :-

var myApp = angular.module('myApp', []);
myApp.value('valueType', 'TestApi);

Pro…

Going back to Angularjs 1

In general, Angularjs1 works in 2 phases :-

a) Configuring

b) Binding / Runtime

During the configuration phases, Angular has concepts like module, controller, services, providers and components (ui components)

Typically we worked with App -> Controller -> Services / Factory etc

Why use Factory and Value recipes? 

Long, long time ago, we have factory and we have values recipes. These becomes the cornerstone for laying down other components in angularjs (again we are repeating ourselves - module, controller, services, providers and components (ui components)

Because Angular injects various dependencies.

Factory recipes allows :-

- Lazy initialization
- Leverage on other services from a module or modules
- Service initialization

Value recipes is something like a key value pair that gives key / value definition for data-binding in angularjs.

Example of value recipes are as follows :-

var myApp = angular.module('myApp', []);
myApp.value('valueType', 'TestApi);

Pro…

Going back to Angularjs 1

In general, Angularjs1 works in 2 phases :-

a) Configuring

b) Binding / Runtime

During the configuration phases, Angular has concepts like module, controller, services, providers and components (ui components)

Typically we worked with App -> Controller -> Services / Factory etc

Why use Factory and Value recipes? 

Long, long time ago, we have factory and we have values recipes. These becomes the cornerstone for laying down other components in angularjs (again we are repeating ourselves - module, controller, services, providers and components (ui components)

Because Angular injects various dependencies.

Factory recipes allows :-

- Lazy initialization
- Leverage on other services from a module or modules
- Service initialization

Value recipes is something like a key value pair that gives key / value definition for data-binding in angularjs.

Example of value recipes are as follows :-

var myApp = angular.module('myApp', []);
myApp.value('valueType', 'TestApi);

Pro…

setup Chutzpah for running unit test

Chutzpah is a open source javascript test runner that allows you to run unit test using qunit, jasmine, mocha, coffeescript and most importantly typescript.

What in the world are you using Chutzpah for unit testing? Well, many teams started to writing their
angularjs code in typescript.

In this post, we're going to run our typescript unit test. First we need to setup our tool.

1. install Chutzpah test runner context menu extension- this allows you to right click on a file and runs a test. Life is easy.

Restart  your visual studio and you're good to go.

2. You probably need to setup jasmine as your unit testing framework. For more information, please  following instruction here.

Lets start with configuring our test runner and we're going to go with jasmine. Let's create new file called chutzpah.json and it should have the following contents :-



Lets create a simple typescript test and you can right click on it to run a unit test.

Debugging jasmine unit test

To debug unit…

Ruby extension method

Ruby extension class is pretty simple. so i am just going to use a very simple example. Say i am going to extend Ruby's string class to include a method called "hello". Basically what it does is add a "hello" string to any string you might have.

For example,

myString = "'Jeremy"

myString.hello() will get you "Jeremy hello there!". Here is  an example of our code.







Understanding Rails ActiveRecord association or relationship

Lets say we are trying to define a relationship user and product in ActiveRecord you need to :-

1. Define association on both sides of your model. For example, a user can have many products, you would in turn define relationship as follows :-






We have the association parameter on both sides of our model. This also means product table will need a column called 'user_id'- which stores relationship to a specific user who owns this product.

User model has a marker called 'has_many'

Product model has a marker called 'belongs_to' - belongs_to also requires that you create a new column called user_id field in your database.

Please note, that i use 'Product' and not the plural table name auto created by rails which always pluralized an object for you.

2. create a new database migration - it might involve creation of a new field for example user_id to hold data for an association. We might run the following command

rails generate migration add_user_id_to_product …

Securing rails activerecord with password cannot be any easier.

Lets say we have a user table that contains password and we would like to secure this from external access.

I assume you already have a controller. So lets go ahead and create our model.


1. Run the following command

rails g model User name email password_digest password_confirmation reputation


2. Run its serializer.

rails g serializer User name email password_digest password_confirmation reputation

3. Next, lets modify our User ActiveRecord by adding a new field called 'has_secure_password', as shown in diagram below :-



This is basically part of bcrypt (a.k.a blowfish encryption) implementation.

Here are the specification

a) In our database, we need a field called 'password_digest'
b) In our ActiveRecord, we need to specify 'has_secure_password'

4. Next, we just need to run rake.

rake db:migrate

This ensure we have created the necessary table structure for our database.


5. We need to wire this up in our controller. Lets say we have a controller called Home…

Rails API creating a simple REST service

The first thing you need to do is

1. gem install rails-api

2. create your new rails api application by issuing the following command

 rails-api new RailApi

Here, we have just created a new application called RailApi. This has more or less the same structure with traditional rails based application

3. cd RailApi

4. Lets create our REST service'. We begin by creating a user controller and its model.

rails g scaffold User name email

If you goto db/migrate, you will see a file called user followed by some date. It should has the following contents :-




4. Add active_model_serializer to our gem file, as shown here.

gem 'active_model_serializer'

5. And run "bundle install"

6. Create its serializer

rails g serializer user name email

This will generate the files as follows :-



7. Lets update our database by issuing rake command

rake db:migrate

If will go ahead and creates all the required table for our application

8. Lets start our server by issuing :- rails server

9. We n…