Home

AngularUI：處理Google地圖標記的滑鼠懸停事件

問題：

我花了一些時間才弄清楚這個問題，所以我覺得這個問題值得一篇自己的博客文章。當我試著用AngularUI連接Google Map標記的滑鼠懸停事件時，我發現自己很困惑。文件在這件事情上很含糊，說它只支援單一標記，而不支援多個標記。

對於單一標記，只需要在HTML中指定一個帶有 events 屬性的指令就很直接：

<ui-gmap-marker events="marker.events"></ui-gmap-marker>

然後在控制器中：

$scope.marker = {
  events: {
    mouseover: function (marker, eventName, args) {
      // 回調代碼在此
    },
  },
}

然而，相同的做法不適用於多個標記。我最初以為我可以簡單地為每個標記添加滑鼠懸停事件，就像這樣：

markers.push({
  events: {
    mouseover: function (mapModel, eventName, originalEventArgs) {
      console.log("I'd really like to show the info window on mouseover.")
    },
  },
})

我的解決方案：

為了解決這個問題，將以下內容添加到HTML markers 指令：

events="clickEventsObject"

並在控制器中：

$scope.clickEventsObject = {
  mouseover: markerMouseOver,
  mouseout: markerMouseOut,
}

function markerMouseOver(marker, e) {
  // 回調代碼在此
}

function markerMouseOut(marker, e) {
  // 回調代碼在此
}

它成功了！這個處理程序返回一個直接映射的模型陣列，該陣列屬於與事件一起發送的gMarker集群。如果你有任何問題，請隨時向我提問。😊

Hacking New Year's Resolutions for 2015

As the year draws to a close and a new one begins on January 1st, many people set New Year's resolutions. However, 92% of New Year's resolutions ultimately fail. Why is that?

The question intrigues me. With my hacker mentality, I enjoy applying problem-solving skills to various situations, and I would be ecstatic to break this 8% success rate barrier.

Research suggests that 'willpower' may be a finite resource. We all aspire to improve ourselves, but relying solely on willpower is often insufficient. Failing to meet our goals can be disheartening, leading to a cycle of self-criticism that doesn't help us move forward.

To effect meaningful change, we need to keep our goals both simple and achievable. Tackling low-hanging fruit can provide the motivation to keep going. It's important to convert vague aspirations into specific objectives and to strive for them daily. After all, we are the sum of our repeated actions. Excellence, then, is more a habit than an isolated act.

My Annual Objectives

To keep myself on track, I maintain a daily to-do list that includes:

1. Always Be Coding – Dedicate at least one hour each day to solving toy problems or taking on coding challenges.

2. Prioritize Physical Health – Spend 30 minutes a day jogging or engaging in other exercises. A healthy body fosters a healthy mind.

3. Commit to Learning – Allocate an hour each day to reading books or watching educational videos to expand your knowledge.

4. Strengthen Social Bonds – Spend an hour each day connecting with family and friends, whether it's over lunch, dinner, or a simple catch-up.

Hacking New Year's Resolutions for 2015

As the year draws to a close and a new one begins on January 1st, many people set New Year's resolutions. However, 92% of New Year's resolutions ultimately fail. Why is that? Welcome back, listeners, to another episode of Continuous Improvement. I'm your host, Victor, and today we're diving into a topic that has captivated my curiosity - New Year's resolutions. We all strive to better ourselves, but why do so many of our resolutions fail?

Studies have shown that only 8% of New Year's resolutions actually succeed. That's a staggering number. So, I embarked on a mission to understand why and discover how we can defy the odds.

Researchers suggest that relying solely on willpower to achieve our goals may not be enough. Willpower can be depleted, leaving us feeling disheartened and less likely to continue our journey towards self-improvement.

But fear not, my fellow growth enthusiasts! There is a way to break this cycle and achieve meaningful change. The key lies in setting simple and achievable goals.

Let's break it down. Instead of aiming for lofty ambitions, focus on the low-hanging fruit. These small wins can provide the motivation we need to keep going. Remember, excellence is not a one-time accomplishment but rather a habit formed through consistent actions.

To illustrate this, let me share with you my annual objectives – the daily habits I've incorporated to keep myself on track.

First and foremost, it's always important to keep coding skills sharp. I dedicate at least one hour each day to solving toy problems or tackling coding challenges. Trust me, even a single hour of focused coding can take you a long way.

Next, physical health. We've heard it time and time again, but it's true – a healthy body fosters a healthy mind. I prioritize spending at least 30 minutes a day jogging or engaging in other exercises that keep me active and energized.

Learning should never cease, my friends. I allocate an hour each day to immerse myself in enriching content – whether it's reading books or watching educational videos. The power of knowledge is remarkable, and by dedicating time to learn each day, we unlock endless potential.

Finally, never underestimate the power of human connection. Strengthening social bonds is vital for our well-being. I spend an hour each day connecting with my loved ones – be it over a meal, a video call, or simply catching up on their day.

There you have it, the secret to continuous improvement lies in setting achievable goals and turning them into daily habits. Remember, it's not about making grandiose resolutions that fizzle out by February. It's about focusing on those consistent, small actions that compound over time.

I encourage you all to reflect on what areas of your life could benefit from a little tweaking and experiment with implementing these daily habits. Trust me, the results will speak for themselves.

That's a wrap for today's episode of Continuous Improvement. Thank you for tuning in, and remember, the journey toward self-improvement is one we embark on together. Stay curious, stay hungry, and never stop striving for growth.

Until next time, this is Victor signing off. Take care, my friends!

找出2015年新年決心的竅門

當一年即將結束，新的一年在1月1日開始時，許多人會設定新年決心。然而，92%的新年決心最終都會失敗。為什麼會這樣？

這個問題引起了我的興趣。以我的黑客思維，我喜歡將問題解決技巧應用到各種情況中，如果能突破這8%的成功率，我會非常高興。

研究顯示，'意志力'可能是一種有限的資源。我們都渴望改進自己，但僅靠意志力往往不足以達成目標。未能達成我們的目標可能會讓人沮喪，導致一種自我批評的循環，這並不幫助我們前進。

要產生有意義的變化，我們需要保持我們的目標既簡單又可實現。解決手邊易於應對的問題，可以提供繼續前進的動力。將模糊的抱負轉化為具體的目標並每天為之努力是很重要的。畢竟，我們是我們重複行動的總和。因此，卓越更多的是一種習慣，而非孤立的行為。

我的年度目標

為保持自己在正軌上，我制定了每日待辦事項，包括：

1. 始終保持編程- 每天至少花一個小時解決玩具問題或接受編程挑戰。

2. 優先考慮身體健康 - 每天花30分鐘慢跑或做其他運動。 健康的身體養育健康的心靈。

3. 致力於學習- 每天花一個小時閱讀書籍或觀看教育影片，擴展你的知識。

4. 加強社交網絡- 每天花一個小時和家人或朋友聯繫，無論是在午餐，晚餐，或一次簡單的聊天。

Angular.js Factory: Handling $http Asynchronously

The Problem:

When I was using the $http service to get data from a remote API, the code snippet below was unable to return data back to the controller.

myApp.factory("myFactory", function ($http) {
  var data = { anArray: [] }

  $http.get("/api").success(function (response) {
    data.anArray.push(response)
  })

  return data
})

This issue arises because the return statement is executed before the $http GET request finishes pushing data into the array.

My Solution:

To handle data asynchronously, the controller needs to instruct the service on what actions to take when the data is received later:

myApp.factory("myFactory", function ($http) {
  return {
    getData: function () {
      return $http.get("/api")
    },
  }
})

myApp.controller("MyController", [
  "$scope",
  "myFactory",
  function ($scope, myFactory) {
    $scope.data = []

    var handleSuccess = function (response, status) {
      $scope.data = response
    }

    myFactory.getData().success(handleSuccess)
  },
])

Let me know if you have any questions. 😊

Angular.js Factory: Handling $http Asynchronously

The Problem:

Hello everyone and welcome to another episode of "Continuous Improvement". I'm your host, Victor, and today we are going to dive into a common problem developers face while using the $http service to retrieve data from a remote API.

In a recent blog post, the author shared a code snippet where the $http service was used to get data from an API. However, there was an issue that prevented the data from being returned back to the controller. Let's take a look at the code:

myApp.factory('myFactory', function($http) {
  var data = { anArray: [] };

  $http.get('/api').success(function(response) {
    data.anArray.push(response);
  });

  return data;
});

The problem here is that the return statement is executed before the $http GET request finishes pushing data into the array. This is a common mistake that can lead to unexpected behavior.

Thankfully, the author also suggests a solution to handle this asynchronous data retrieval issue. Have a look at the updated code:

myApp.factory('myFactory', function($http) {
  return {
    getData: function() {
      return $http.get('/api');
    }
  };
});

myApp.controller('MyController', ['$scope', 'myFactory', function($scope, myFactory) {
  $scope.data = [];

  var handleSuccess = function(response, status) {
    $scope.data = response;
  };

  myFactory.getData().success(handleSuccess);
}]);

In this updated code, the factory returns an object with a getData method that performs the $http GET request. The controller then calls this method and handles the eventual response using the handleSuccess function. This way, the data is correctly assigned to the $scope.data variable when it becomes available.

It's important to understand the difference between synchronous and asynchronous operations in JavaScript. Asynchronous operations, like retrieving data from a remote API, take time to complete. It's crucial to account for this and implement appropriate handling mechanisms.

That's it for today's episode of "Continuous Improvement". I hope you found this topic interesting and that it helps you avoid similar issues in your own code. If you have any questions or feedback, don't hesitate to reach out to me by email at victorleungtw@gmail.com.

Thank you for listening and until next time, keep coding and continuously improving.

Angular.js 工廠：異步處理 $http

問題：

當我使用 $http 服務從遠程API獲取數據時，下面的代碼片段無法將數據返回到控制器。

myApp.factory("myFactory", function ($http) {
  var data = { anArray: [] }

  $http.get("/api").success(function (response) {
    data.anArray.push(response)
  })

  return data
})

這個問題的出現是因為在 $http GET請求將數據推送到數組之前，就執行了 return 語句。

我的解決方案：

為了異步處理數據，當數據被接收到時，控制器需要指導服務採取什麼行動：

myApp.factory("myFactory", function ($http) {
  return {
    getData: function () {
      return $http.get("/api")
    },
  }
})

myApp.controller("MyController", [
  "$scope",
  "myFactory",
  function ($scope, myFactory) {
    $scope.data = []

    var handleSuccess = function (response, status) {
      $scope.data = response
    }

    myFactory.getData().success(handleSuccess)
  },
])

如果你有任何問題，請讓我知道。😊

Setting Up a Proxy Server with Express

The Problem:

I am working on a project that uses BreweryDB. While trying to load some data from the API, I encountered a problem: the API doesn't support JSONP. This leads to a CORS issue when I attempt to fetch data directly using Angular:

XMLHttpRequest cannot load [https://api.brewerydb.com/v2/.](https://api.brewerydb.com/v2/). No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

My Solution:

To avoid exposing my API key, I needed to set up an intermediate proxy. Below are the step-by-step instructions for setting up a proxy using Node.js and Express.

Step 1: Install Express and Request

npm install express --save
npm install request --save

Step 2: Create a server.js File

var express = require('express');
var request = require('request');
var app = express();

Step 3: Set Up the Route (replace API_KEY with your actual API key)

app.get('/api', function(req, res) {
  request('https://api.brewerydb.com/v2/?key=' + API_KEY, function (error, response, body) {
    if (!error && response.statusCode === 200) {
      console.log(body);
      res.send(body);
    }
  });
});

Step 4: Set Up the Port

app.listen(3000);
console.log('Server running on port %d', 3000);

Step 5: Start the Server (node server.js)

Open your browser and navigate to http://localhost:3000/api. You should be able to see the JSON object and log it in your browser console:

"message": "Request Successful",
"data": "You have reached the BreweryDB.com API. For access, check out http://www.brewerydb.com/developers",
"status": "success"

If you encounter any problems, feel free to send me an email. ☺

Setting Up a Proxy Server with Express

The Problem:

Welcome to "Continuous Improvement," the podcast where we explore practical solutions to everyday problems. I'm your host, Victor. Today, we're going to talk about a common issue when working with APIs and how to overcome it.

Imagine you're working on a project that uses BreweryDB. You're trying to load some data from the API, but suddenly, you encounter a problem. The API doesn't support JSONP, leading to a CORS issue when you attempt to fetch data directly using Angular. Frustrating, right?

But fear not! I've got a solution for you. In this episode, I'll guide you step-by-step on how to set up an intermediate proxy using Node.js and Express. This will allow you to avoid exposing your API key and resolve the CORS issue.

Let's dive into the solution.

First, we need to install Express and Request. Open up your terminal and type in:

npm install express --save
npm install request --save

After the installations are complete, it's time to create a server.js file. In this file, we'll set up the proxy using Node.js and Express. Make sure you have it ready before moving on to the next step.

So, let's set up the route. Replace API_KEY with your actual API key. This step is crucial to ensure proper authentication.

Inside your server.js file, add the following code:

var express = require('express');
var request = require('request');
var app = express();

app.get('/api', function(req, res) {
  request('https://api.brewerydb.com/v2/?key=' + API_KEY, function (error, response, body) {
    if (!error && response.statusCode === 200) {
      console.log(body);
      res.send(body);
    }
  });
});

Great! Now that we have the route set up, let's move on to setting up the port.

In your server.js file, add the following code:

app.listen(3000);
console.log('Server running on port %d', 3000);

Superb! You're almost there. Now it's time to start the server. Open your terminal, navigate to the location of your server.js file, and enter the following command:

node server.js

Congratulations! You've successfully set up the intermediate proxy using Node.js and Express.

It's time to test your proxy. Open your browser and type in http://localhost:3000/api. If everything goes well, you should be able to see the JSON object and even log it in your browser console.

And that's it! You've overcome the CORS issue by setting up an intermediate proxy. Now you can fetch data from the BreweryDB API without any problems.

If you encounter any difficulties or have any questions, please feel free to send me an email at victorleungtw@gmail.com. I'll be more than happy to assist you.

Thank you for tuning in to this episode of "Continuous Improvement." I hope you found the solution helpful and can apply it to your own projects. Don't forget to subscribe to our podcast for more practical solutions to everyday problems. Until next time, keep improving.

使用Express設置代理伺服器

問題：

我正在進行一個使用BreweryDB的項目。在嘗試從API加載一些數據時，我遇到一個問題：該API不支援JSONP。當我試圖直接使用Angular獲取數據時，會導致CORS問題：

XMLHttpRequest無法加載[https://api.brewerydb.com/v2/.](https://api.brewerydb.com/v2/)。請求的資源上沒有'Access-Control-Allow-Origin'頭。因此，不允許“http://localhost:3000”的來源訪問。

我的解決方案：

為了避免暴露我的API密鑰，我需要設置一個中間代理。以下是使用Node.js和Express設置代理的步驟說明。

步驟1：安裝Express和Request

npm install express --save
npm install request --save

步驟2：建立一個 server.js 檔案

var express = require('express');
var request = require('request');
var app = express();

步驟3：設定路由（將 API_KEY 換成你實際的API密鑰）

app.get('/api', function(req, res) {
  request('https://api.brewerydb.com/v2/?key=' + API_KEY, function (error, response, body) {
    if (!error && response.statusCode === 200) {
      console.log(body);
      res.send(body);
    }
  });
});

步驟4：設定埠口

app.listen(3000);
console.log('伺服器在埠口％d運行', 3000);

步驟5：啟動伺服器（node server.js）

開啟你的瀏覽器，導航到 http://localhost:3000/api 。你應該能看到JSON物件並且在你的瀏覽器控制台中將其記錄下來：

"message": "請求成功",
"data": "您已到達BreweryDB.com API。對於訪問，請查看http://www.brewerydb.com/developers",
"status": "成功"

如果您遇到任何問題，請隨時向我發送電子郵件。☺