Skip to content

2015

  • in podcast
  • 2 min read

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.

  • in zh
  • 1 min read

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)
  },
])

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

  • 2 min read

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. ☺

  • in podcast
  • 2 min read

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.

  • in zh
  • 1 min read

使用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": "成功"

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

  • 1 min read

Angular UI Bootstrap: Opening the First Accordion with ng-repeat

The Problem:

I was using the accordion directive in Angular UI Bootstrap version 0.1.2. On the demo page, there's an example showing how to open the first accordion group by default:

<accordion-group heading="First Header" is-open="true"> </accordion-group>

This works well for static content but fails to operate as expected with dynamic content generated using ng-repeat. In other words, it does not work like this:

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="true"
>
</accordion-group>

My Solution:

In the template, bind the is-open property of the accordion as follows:

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="status.isItemOpen[$index]"
>
</accordion-group>

And in the controller:

$scope.groups = ["First Header", "Second Header", "Third Header"]
$scope.status = {
  isItemOpen: new Array($scope.groups.length),
  isFirstDisabled: false,
}
$scope.status.isItemOpen[0] = true

Change the value of the last line to false if you prefer the first accordion to be closed by default.

Let me know if this doesn't work for you. 😊

  • in podcast
  • 2 min read

Angular UI Bootstrap: Opening the First Accordion with ng-repeat

The Problem:

Welcome to "Continuous Improvement," the podcast where we explore solutions to common programming problems and help you become a better developer. I'm your host, Victor. In today's episode, we'll be discussing a problem I recently encountered with the accordion directive in Angular UI Bootstrap and the solution I found to make it work with dynamic content. So let's dive in!

The problem arose when I was using the accordion directive in Angular UI Bootstrap version 0.1.2. On the demo page, you can see an example where the first accordion group is opened by default:

<accordion-group heading="First Header" is-open="true"> </accordion-group>

This worked perfectly fine for static content. However, when I tried to generate dynamic content using ng-repeat, it didn't behave as expected. The accordion didn't open as intended. Let me show you an example:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="true"> </accordion-group>

But don't worry, I've found a solution to this problem!

Instead of using a static value for is-open, we can bind it to a property in our controller. Here's what the updated template looks like:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups" is-open="status.isItemOpen[$index]"> </accordion-group>

And in the controller, we define the groups and the status object which will hold the isItemOpen property:

$scope.groups = ['First Header', 'Second Header', 'Third Header'];
$scope.status = { isItemOpen: new Array($scope.groups.length), isFirstDisabled: false };
$scope.status.isItemOpen[0] = true;

By using $index, we can dynamically set the value of isItemOpen for each accordion group based on their index. In this example, the first accordion group will be opened by default.

[BREAK]

If you prefer the first accordion group to be closed by default, simply change the value of true to false in the last line of the code snippet.

So, with this solution, you can now have dynamic content in your accordion groups and control their initial state using the is-open property.

And that's a wrap for today's episode of "Continuous Improvement." I hope this solution helps you overcome the problem with the accordion directive in Angular UI Bootstrap. If you have any questions or need further clarification, feel free to reach out to me. Thanks for listening, and until next time, happy coding!

  • in zh
  • 1 min read

Angular UI Bootstrap：使用ng-repeat開啟第一個手風琴

問題：

我在使用Angular UI Bootstrap版本0.1.2的手風琴指令。在示例頁面上，有一個範例顯示如何默認開啟第一個手風琴組：

<accordion-group heading="First Header" is-open="true"> </accordion-group>

這對於靜態內容來說工作得很好，但是對於使用ng-repeat生成的動態內容來說，它無法如預期地操作。換句話說，它不能這樣工作：

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="true"
>
</accordion-group>

我的解決方案：

在模板中，將手風琴的is-open屬性綁定如下：

<accordion-group
  heading="{{group.title}}"
  ng-repeat="group in groups"
  is-open="status.isItemOpen[$index]"
>
</accordion-group>

並在控制器中：

$scope.groups = ["First Header", "Second Header", "Third Header"]
$scope.status = {
  isItemOpen: new Array($scope.groups.length),
  isFirstDisabled: false,
}
$scope.status.isItemOpen[0] = true

如果你希望第一個手風琴默認為關閉，則將最後一行的值改為false。

如果這個解決方案對你沒有作用，請讓我知道。😊

  • 2 min read

Note on Ionic Framework: Android Platform in OS X

In this blog post, we will walk through several error messages that you might encounter when installing dependencies for the Android platform of the Ionic framework on Mac OS X. Follow this official guide to install Cordova and Ionic, and then create a project up until the step where you configure the platform.

To enable the Android platform, run the following command:

ionic platform add android

However, you may encounter this error:

Error: ANDROID_HOME is not set and "android" command not in your PATH.

Step 1: Download the Android SDK

Visit the Android developer website and download the stand-alone SDK Tools: https://developer.android.com/sdk/installing/index.html.

Step 2: Unzip the File

I unzipped the SDK to the path of my workspace:

/Users/Victor/Workspace/android-sdk-macosx

Step 3: Set the Android Command in Your PATH

Note: Replace "Victor" with your username. If you are using oh-my-zsh, replace the .bash_profile with your .zshrc profile.

  1. Open your terminal and ensure that .bash_profile ends with a newline:
echo >> /Users/Victor/.bash_profile
  1. Set the ANDROID_HOME environment variable in .bash_profile:
echo "export ANDROID_HOME=/Users/Victor/Workspace/android-sdk-macosx" >> /Users/Victor/.bash_profile
  1. Update the PATH variable as well:
echo "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools" >> /Users/Victor/.bash_profile
  1. Reload the terminal to apply the changes:
. /Users/Victor/.bash_profile

Step 4: Install Android-19

Now, if you try to run:

ionic platform add android

You might see the following error:

Error: Please install Android target "android-19".

Run android from your command line to open the SDK manager:

android

Check the box for Android 4.4.2 (API 19) and then click "Install 8 packages…". Accept the license and keep your fingers crossed while waiting for the download process to complete.

Finally, try running the command again:

ionic platform add android

And voila:

Project successfully created.

If you encounter any issues, feel free to send me a help request. Cheers! ☺

  • in podcast
  • 3 min read

Note on Ionic Framework: Android Platform in OS X

In this blog post, we will walk through several error messages that you might encounter when installing dependencies for the Android platform of the Ionic framework on Mac OS X. Follow this official guide to install Cordova and Ionic, and then create a project up until the step where you configure the platform.

Hello everyone and welcome to another episode of Continuous Improvement - your source for tips, tricks, and solutions to help you overcome hurdles in your development journey. I'm your host, Victor, and in today's episode, we will be discussing some common error messages that you might come across while installing dependencies for the Android platform of the Ionic framework on Mac OS X.

But before we dive into that, I want to remind you to check out our official guide at ionicframework.com/docs/guide/installation.html. It provides a step-by-step walkthrough for installing Cordova and Ionic, as well as creating a project up until the point where you configure the platform.

Alright, let's get started!

So, you've followed the official guide and reached the point where you need to enable the Android platform by running the command:

ionic platform add android

But hold on, you might encounter an error message that says:

Error: ANDROID_HOME is not set and "android" command not in your PATH.

What does this mean? Well, it simply means that the Android command is not recognized by your system because the necessary environment variables are not properly set. But fret not, I'm here to guide you through the process of resolving this.

Step 1 is to download the Android SDK. You can find the link to the Android developer website in our blog post at [link]. Once you're there, go ahead and download the stand-alone SDK Tools.

Step 2 involves unzipping the downloaded file. Make sure to choose a suitable location for the SDK. For me, I extracted it to my workspace directory at:

/Users/Victor/Workspace/android-sdk-macosx

But you can choose a different location if you prefer.

Now that we have the Android SDK set up, it's time for Step 3: setting the Android command in your PATH. This step is crucial for your system to recognize the Android command as a valid command. So, open your terminal and follow along.

First, let's make sure your .bash_profile ends with a newline:

echo >> /Users/Victor/.bash_profile

Next, we need to set the ANDROID_HOME environment variable in your .bash_profile file. This can be accomplished with the following command:

echo "export ANDROID_HOME=/Users/Victor/Workspace/android-sdk-macosx" >> /Users/Victor/.bash_profile

Remember to replace "Victor" with your own username.

In addition to the ANDROID_HOME variable, we also need to update the PATH variable. This ensures that your system knows where to find the Android tools and platform tools. Execute the following command:

echo "export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools" >> /Users/Victor/.bash_profile

Great, we're almost there! Now, in order to apply the changes we made to the .bash_profile file, we need to reload the terminal. You can do this by executing the command:

. /Users/Victor/.bash_profile

Phew, we've made it through Step 3! Now we're ready for Step 4, which involves installing Android-19. If you try running the command:

ionic platform add android

You might come across the following error message:

Error: Please install Android target "android-19".

To resolve this, we need to open the SDK manager by running the android command from your terminal:

android

Once the SDK manager is open, check the box for Android 4.4.2 (API 19) and click on "Install 8 packages…". Then, simply accept the license and patiently wait for the download process to complete.

Now, it's time to give it another shot! Run the command again:

ionic platform add android

And voila! Hopefully, you will see the reassuring message:

Project successfully created.

And there you have it, folks! You've successfully resolved the error messages that can occur while installing dependencies for the Android platform of the Ionic framework on Mac OS X. If you experience any issues throughout the process, don't hesitate to reach out to me via email at victorleungtw@gmail.com.

That wraps up another episode of Continuous Improvement. I hope you found this information helpful and that it saves you time and frustration in your development journey. Make sure to subscribe to our podcast for more valuable tips and solutions. Until next time, happy coding!