Posts

Angular 2 basic terminologies

Transpiler : A source-to-source compiler, transcompiler or transpiler is a type of compiler that takes the source code of a program written in one programming language as its input and produces the equivalent source code in another programming language.   Decorator : Decorators are a proposed standard for ECMAScript 2016 by Yehuda Katz, to annotate and modify classes and properties at design time. This sounds pretty much like what annotations do right? Well… sort of. Let’s take a look at what a decorator looks like: // A simple decorator @ decoratorExpression class MyClass { } Wait. This looks exactly like an AtScript annotation! That’s right. But it isn’t. From a consumer perspective, a decorator indeed looks like the thing that we know as “AtScript Annotation”. There is a significant difference though. We are in charge of what our decorator does to our code. Taking the code above, a corresponding decorator implementation for @decoratorExpression ...

Injecting services in angular 2

Angular 2 applications can basically be written in any language, as long as it compiles to JavaScript in some way. When writing our application in TypeScript, we use decorators to add metadata to our code. Sometimes, we can even omit some decorators and simply rely on type annotations. However, it turns out that, when it comes to DI, we might run into unexpected behaviour when injecting dependencies into services. This article discusses what this unexpected problem is, why it exists and how it can be solved. Injecting Service Dependencies Let’s say we have a simple Angular 2 component which has a DataService dependency. It could look something like this: @ Component ({ selector : 'my-app' , template : ` < ul > < li * ngFor = "let item of items" > {{ item . name }} < /li > < /ul > ` }) class AppComponent { items : Array < any > ; constructor ( dataService : DataService ) { this...

How to Deploy an Angular 2/Rails 5 App to Heroku

Initializing the App The first step will be to initialize a new Rails 5 project . I’m calling mine rails_5_angular_2_deployment_example . For the front-end we’ll use angular2-seed . Clone the repo into a subdirectory called client . (The name client , in this case, is important. If you call it something else, the deployment won’t work.) git clone git@github.com:mgechev/angular2-seed.git clie git clone git @ github .com : mgechev / angular2 - seed .git client We’re just interested in the angular2-seed code. If we keep it as a repository inside our project’s repository, there will be problems. Kill client/.git . rm -rf client/.git rm - rf client / .git Now install the Node packages. cd client npm install cd client npm install Before we try to deploy our app w...

using yield and content for in a partial

Time comes in your development process when you want one partial for two action with some changes in a section of html. In that case usually developers prefer to opt for if else or creating another partial or the whole new html template but all of them are good but not being rubyist style. To achieve that you can use yield and content_for for example : suppose you do have a partial _a.html.erb with some html in it <div class='main'> <p> this is main section</p> <div class = 'subpart'> <p> this is subpart </p> </div> <div class="block_of_code"> <%= yield :block_of_code %> </div> </div> In this block of code div you want to replace it with your block of code using same partial but with different block of code . So here I have used yield :block of code and now you can use content for rendering different block of code for different actions. for example you do have two action...

define_method in ruby

So one more step close to meta programming define_method. The usual way of defining new methods is to put your intended logic between def & end . And that works perfectly fine for the most part. But consider a situation where you have to create a series of methods all of which have the same basic structure save for one string, and which can only be one of a certain set of strings. Now, you might say we'll just define one method and accept that one string as a parameter, which we can then use wherever we want. And you'd be right. But, the problem with such an approach is it's not particularly declarative: you don't know exactly what values that optional parameter can accept.   class DefineMethod      define_method("perform_chunk") do |argument|          "performing chunk on #{argument}"      end      define_method("perform_chomp") do |argument|   ...

Delete Vs. Destroy In Rails

I’ve been writing this web app that has the following models: Order, Recipient, Message. An order has many recipients and a recipient has many messages. The recipients are also dependent upon the order and the messages are dependent upon the recipient. In Ruby code this looks like: Order.rb class Order < ActiveRecord::Base has_many :recipients, :dependent => :destroy has_many :messages, :through => :recipients end Recipient.rb class Recipient < ActiveRecord::Base belongs_to :order has_many :messages, :dependent => :destroy end The idea here is that when I delete an order, I also delete any associated recipients and any associated messages. My controller looked like this: def delete Order.delete(params[:id]) end There are a couple things wrong with this. The first and most important thing is that when I delete a row in the order table, it leaves orphaned rows in the order and messages table. I want to delete these rows as well...

print page while inserting new html before print with print.css in rails

Printing page is normal requirement with specified css and layout or some html which is not the current page but the problem comes when you want both the application css and print css to work for that layout. For that you need to do a trick you need to  preload the html in DOM and made it hide then on click of a print button hide the content which you don't want to come on the print page and show your preloaded html then print page comes with both the application/css and print.css and then again hide the print html and show the current html.