Angular 2 with JQuery – Part 1

I’ve seen people saying that there are problems with angular and jquery working together. To me, it’s not a single problem. Since angular uses/prefers typescript by default, it’s kind of combination of JQuery + Typescript + Angular. So, I decided to write about the problems people generally face during the development in a series of blog posts. This is the Part 1 of the series and meant for the beginners.

As a note, when I say Angular, it means Angualr 2.x and above (including Angular 4).

In  general, it’s not recommended to use more than one way to access/manipulate the DOM. Angular already does a nice job when it comes to DOM manipulation. You should be using Angular if you’re starting a new project.

But for the exising projects which uses JQuery extensively, you don’t have an option.

You may want to migrate to Angular, but it’s possible at once. You have to do it iteratively. So for the time being, you might want to use both angular and jquery at the same time.

Let’s start with a simple component.

import { Component, OnInit } from "@angular/core";

@Component({
  selector: 'app-root',
  template: `Click Me!`
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
  }
}

This is a plain angular component which simply shows a button called ‘Click Me’. If you click that button in browser, it’ll display you an alert message. Let’s add jquery on top of this and will make it more interesting.

npm install --save jquery

Here, I just installed jquery node module into project and saved it in package.json file.

If you’re using angular-cli for bootstrapping the project, then you need to tell the webpack (default build tool in angular-cli) to include the jquery during the build, so that it’ll be availble for your browser at runtime.

To do that, just replace the existing empty scripts block with this lines in your .angular-cli.json file.

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
],

Now the setup is over!… We can start using it right away.

import { Component, OnInit } from "@angular/core";

declare var jQuery: any;

@Component({
  selector: 'app-root',
  template: `Click Me!`
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    jQuery('button').click();
  }
}

Here, I declared a type called jquery so that typescript compiler will not complain me about its usage. Since it’s declared as any, you can call any method on it. But in runtime (i.e, inside your browser), jquery variable will be interpretted as the actual jquery. So, it’ll work in the runtime.

If you run the above example, you’ll see an alert message when loading the page. That means, jquery is working with angular and typescript.

I won’t recommend to include this kind of logic in the ngOnInit() method in real applications.

PS: I used the following version of packages for this example. Angular 2.4.9, Typescript 2.0.0, Angular Cli 1.0.0-rc.1 & JQuery 3.1.1.

Advertisements

Blogging Update

I’ve learnt lot of exiciting things in 2016, but I haven’t shared those stuffs in my blog in 2016. This year, i wanna change that habbit and ensure that i regularly blog my thoughts.

Last year, i was trying to migrate my blog from wordpress to my own hosting and thought of managing myself. With that in mind, i tried many other options.

Since I’m a developer, habbit of reinventing stuffs will be part of me and so decided to write my own blogging application which i wrote it in Java (using JEE 7) and MongoDB with nice REST API’s and deployed that to Openshift platform. It was a nice project and got a good experience from that.

And then i saw people using static site generator and impressed by that fact. The advantage of static site is that you can host it in github pages and manage it in a repo. So, you’ll be writting blogs in markdown format using github editor.

So, I started deploying my blog using JBake as well as Jekyll at the same time. I liked the simplicity of jekyll and chose it as my choice of tool. Jekyll works well with github and i really liked it. I didn’t stop there, i was working in an android mobile app for fun. I had an old Nexus 4 (with CyanogenMod OS) lying on my room. So, i decided to use it for some hacking purpose and end up with running an light-weight web server on that. I tried to host my blog on that device and opened my firewall for the internet. It worked!… But i can’t keep running this forever, because of the security. I started seeing weird connections to my devices and realized that someone is trying to hack my web server and get into my device. It’s unsecured!.. Then i stopped running that application on my device and closed the firewall.

I did this kind of cool & fun stuffs in 2016 without actually publishing a blog post. After few months (in 2017 starting), I saw the shinny wordpress desktop application for Mac and impressed by it. Dropped all other options and moved back to awesome wordpress. Now, I know what’s like developing an blog application and hosting it on your own and writing it on Markdown format and securing it from hackers. I don’t have words to say how awesome wordpress is. Sometimes we don’t realize the value simply because it’s free.

That’s the update!…

Disable Menu Bar Toggle in Firefox

Recent Firefox has the support for toggling the menu bar using the ‘Alt‘ key. But many times its annoying the me. There is a way to disable that in Firefox.

To disable it :
1) Type “about:config” in the url bar and enter
2) Search for “ui.key.menuAccessKeyFocuses” and set the value to “false

That’s it!…

Writing Portable HTML5 Server Side Events Applications using the Atmosphere Framework

6312

The Atmosphere Framework easily allow the creation of HTML5 Server Side Events (SSE). Better, any existing Servlet based application can add SSE support without any changes to their existing application.

HTML5 Server Side Events (SSE) are getting more and more adopted and support for it starts to appear. As an example,  the GlassFish Application Server recently added support for it,  the upcoming release of the Jersey Framework is also adding some sort of support, and framework like jQuery-Socket has sample supporting SSE as well. Both GlassFish and Jersey suffer major issues: First, you need to use non portable API to start using SSE (will only work in GlassFish or Jersey) and second, they expose special API to support SSE, which is a major mistake in my opinion. Just take a look at how simple it can be to implement SSE using the jQuery-Socket sample. Why would you use heavyweight…

View original post 681 more words

Evernote for Linux

Evernote

Evernote is an awesome app for note taking but unfortunately it isn’t available for Linux yet. So, we can use the Evernote web app as a standalone application using the GNOME web app launcher. Since the Evernote web app is pretty clean, you don’t feel a difference at all.

From Gnome 3.10 onwards, you can launch any web app without the usual browser menus. Two browser currently supports this:

  • Epiphany (Gnome Web)
  • Chrome

Epiphany isn’t a shinny browser like Google Chrome and Firefox. It doesn’t render some pages correctly. And Firefox doesn’t support web app launchers yet. So, I recommend the Google Chrome for this job.

Chrome
1) Go to your Evernote home page (usually https://www.evernote.com/Home.action).
2) In Chrome, Click “Settings -> More tools -> Create application shortcuts…”.
3) It’ll create the necessary Desktop entry and Application Menu entry in the user’s home directory. Just click “Create“.
4) It’ll use the web app’s favicon as the Application Icon which has low resolution and not good.
5) So, to change the application icon, download the evernote icon from the internet (https://cdn4.iconfinder.com/data/icons/free-colorful-icons/360/evernote.png).
6) Go to user’s application settings directory :
cd ~/.local/share/applications/
7) Find the .desktop file which starts with “chrome” as prefix and “evernote” in the file name like “chrome-https___www.evernote.com_Home.action_2.desktop“.
8) Replace the “Icon=” entry’s value with the newly downloaded icon’s path.
9) Just logout and login.
10) Search for Evernote in your GNOME Activities, you’ll get a fancy Evernote app in your menu.

Note : I’m using Fedora 21 with GNOME 3.14.2 on it.

Micro Benchmarking with JMH: Measure, don’t guess!

Antonio's Blog

I’m sure you’ve all heard that assigning a variable to null helps the Garbage Collector, or not declaring a method final improves in lining…. But what you also know is that JVMs have evolved drastically and what was true yesterday may not be true today. So, how do we know that our code performs? Well, we don’t, because we are not supposed to guess what the JVM does… we just measure!

Measure, don’t guess!

As my friend Kirk Pepperdine once said, “Measure, don’t guess“. We’ve all faced performance problems in our projects and were asked to tune random bits in our source code… hoping that performance will get improved. Instead, we should setup a stable performance environment (operating system, JVM, application server, database…), measure continuously, set some performance goals… then, take action when our goals are not achieved. Continuous delivery, continuous testing… is one thing, but continuous measuring is another step.

Anyway…

View original post 816 more words