Thursday, June 30, 2016

Wednesday, June 29, 2016

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.


Monday, June 27, 2016

inject is not defined when running unit test with jasmine + chutzpah


If you face issued with running unit test with error message "inject method not found", then you might be missing angular-mocks.js in your chutzpah.json configuration file.

All you need to do is include it in, like so....


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 really a helper method which be used on line #26 to expose our directive. 

Line #32 - Is our controller and noticed we used 'ISearchSimpleScope' in our controller, so we can be sure we are working with the correct properties. In this case, it is called 'SearchResults' and 'SearchText'

Line #46 - We got pretty much all our component up and running, now it is time to load it with Line #49. 

What would our html look like? Well it looks like this..... 


Some development notes 

If you take out line #35 ->  static $inject = ["$scope"]; .you can be sure, you control is not going to work. Please make sure you have your angular1 other external dependencies specified here, like $http, $scope and etc.





Unit testing SimpleSearch controller 

Let's go ahead and create our unit test for SimpleSearchController. We will  use angular-mock for properly creating our. As you can see, we are using rootscope to create our scope instance. Even though this is scope instance, but we do have access to our 'SearchText' and 'SearchResults'.






Sunday, June 26, 2016

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.












Thursday, June 23, 2016

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-binding in angularjs.

Example of value recipes are as follows :-

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

Provider = $get

Service instance are singleton in Angularjs

Angular Directives 

What the heck is angular directives. Good exmples would be html element types that you laid down on your html mark up like ngmodel, ngbind.

Also note that  the following means the same thing, ng-model

1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Directive 'restrict' options that is available :-

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name
  • 'M' - only matches comment

Angular Decorators

Bootstrap

Angular bootstrapping processes -> module loading, walking through the DOM and then

Only One Ng-App 

You cannot have more than on ng-App in your application.

What happens when Angularjs bootstrap?

  • load the module associated with the directive.
  • create the application injector 
  • compile the DOM treating the ngApp directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.
A simple example of Angularjs directive can be found here.

$compile 

$compile is used when you trying to rebind (adding behaviour, events) or other dynamic content or template into an existing controller. In other words, say you created a static directive and then loads it  in to DOM. If you wanna make any changes to its behaviour, you can't. This is where $compile comes in.

Take a look at the example here.

$observe 

$observe - is for observing attribute. It only available from attribute level, $watch is available in the scope level. Only if there are changes in the attribute level, events associated with a watch gets fired away.

For a quick example, click here.

$watch 

Watch  is a method on Scope object.

$parse

$injector

$injector is used to load modules, instantiate types and invoke method.

Simple example can be shown using code here.












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);

Provider = $get

Service instance are singleton in Angularjs

Angular Directives 

What the heck is angular directives. Good exmples would be html element types that you laid down on your html mark up like ngmodel, ngbind.

Also note that  the following means the same thing, ng-model

1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Directive 'restrict' options that is available :-

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name
  • 'M' - only matches comment

Angular Decorators

Bootstrap

Angular bootstrapping processes -> module loading, walking through the DOM and then

Only One Ng-App 

You cannot have more than on ng-App in your application.

What happens when Angularjs bootstrap?

  • load the module associated with the directive.
  • create the application injector
  • compile the DOM treating the ngApp directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.
A simple example of Angularjs directive can be found here.

$compile 

$compile is used when you trying to rebind (adding behaviour, events) or other dynamic content or template into an existing controller. In other words, say you created a static directive and then loads it  in to DOM. If you wanna make any changes to its behaviour, you can't. This is where $compile comes in.

Take a look at the example here.

$observe 

$observe - is for observing attribute. It only available from attribute level, $watch is available in the scope level. Only if there are changes in the attribute level, events associated with a watch gets fired away.

For a quick example, click here.












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);

Provider = $get

Service instance are singleton in Angularjs

Angular Directives 

What the heck is angular directives. Good exmples would be html element types that you laid down on your html mark up like ngmodel, ngbind.

Also note that  the following means the same thing, ng-model

1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Directive 'restrict' options that is available :-

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name
  • 'M' - only matches comment

Angular Decorators

Bootstrap

Angular bootstrapping processes -> module loading, walking through the DOM and then

Only One Ng-App 

You cannot have more than on ng-App in your application.

What happens when Angularjs bootstrap?

  • load the module associated with the directive.
  • create the application injector
  • compile the DOM treating the ngApp directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.
A simple example of Angularjs directive can be found here.


$compile 

$compile is used when you trying to rebind (adding behaviour, events) or other dynamic content or template into an existing controller.

Take a look at the example here.









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);

Provider = $get

Service instance are singleton in Angularjs

Angular Directives 

What the heck is angular directives. Good exmples would be html element types that you laid down on your html mark up like ngmodel, ngbind.

Also note that  the following means the same thing, ng-model

1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Directive 'restrict' options that is available :-

  • 'A' - only matches attribute name
  • 'E' - only matches element name
  • 'C' - only matches class name
  • 'M' - only matches comment

Angular Decorators

Bootstrap

Only One Ng-App 

You cannot have more than on ng-App in your application.

What happens when Angularjs bootstrap?

  • load the module associated with the directive.
  • create the application injector
  • compile the DOM treating the ngApp directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.


A simple example of Angularjs directive can be found here.










Wednesday, June 22, 2016

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 test in jasmine using Chutzpah, you need to right click on the typescript test and then choose "open in browser". Go to chrome developer tool mode, proceed to  'Sources' and then you look for "yourUnitTest.test.js" file as shown below :-




Place a breakpoint and then hit refresh. You are now in debug mode - easy! :)

References 

Jasmine testing with typescript 101

https://angular.io/docs/ts/latest/testing/jasmine-testing-101.html

Jasmine unit test result matcher

http://jasmine.github.io/2.0/introduction.html

Monday, June 20, 2016

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 user_id :string

3. run rake db:migration

4. Use rails console to test out this association

Wednesday, June 08, 2016

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 and our code might look like something below :-




6. Let's go and see our model in action using rails console. From the command line, type rails console. We will create a new user by using the following command

u = User.new()
u.name = 'jeremy'
u.email = 'jeremy@expert.com'
u.password = 'test'
u.save()

If you look at the output, you will see our field 'password_digest' is automatically populated with hashed characters. From here, i wanted to highlight that the proper way to authenticate is via u.authenticate('abc') => false.  If we try u.authenticate('test') => true  !success.


Now, lets make a get request to our home controller. From the browser link, type http://localhost:3000/home/index. It will returns the following json response to you. Notice that password is null.






 






Monday, June 06, 2016

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 need to setup some test data by going into rails console.

Execute rails console, and create some fake data

10. Lets try to retrieve our data by typing the following in our brower

http://localhost:3000/users

and

http://localhost:3000/users/1

Noticed that Rails automatically gives a plural version of the model that we wanted to create.

It should have your data returned as json format.