Posts

Showing posts from July, 2016

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 cou

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