Shaun Xu

The Sheep-Pen of the Shaun


News

logo

Shaun, the author of this blog is a semi-geek, clumsy developer, passionate speaker and incapable architect with about 10 years’ experience in .NET and JavaScript. He hopes to prove that software development is art rather than manufacturing. He's into cloud computing platform and technologies (Windows Azure, Amazon and Aliyun) and right now, Shaun is being attracted by JavaScript (Angular.js and Node.js) and he likes it.

Shaun is working at Worktile Inc. as the chief architect for overall design and develop worktile, a web-based collaboration and task management tool, and lesschat, a real-time communication aggregation tool.

MVP

My Stats

  • Posts - 122
  • Comments - 622
  • Trackbacks - 0

Tag Cloud


Recent Comments


Recent Posts


Archives


Post Categories


.NET


 

Bootstrap provides a component named Tabs, which provides tab container and tab pages. In order to make it easy to use in Angular.js, Angular UI team created a directive called "ui.bootstrap.tabs". By using this directive we can define a bootstrap tab component, we can also specify the content in each tab pages. But the problem is, all tabs' content must be in the same scope. For example, below is the sample code from "ui.bootstrap.tabs". As we can see, I must put all tabs' content in the same page, ......

 

Today when I upgraded my application from Angular.js 1.3.9 to the latest 1.4, I got some bugs. After investigated a bit I found they are related with date properties and "angular.merge" function, which was included in 1.4. In the official document, "angular.merge" is Deeply extends the destination object "dst" by copying own enumerable properties from the "src" object(s) to "dst". It also mentioned the different with "angular.extend", which had been included in previous versions. Unlike "extend()", ......

 

Directive is very powerful in Angular.js. I would like call it "User Control for Web". When I'm writing sx.wizard, sx.highlight and sx.tabs, I was using directives. And in directive, one of the most important concept is isolated scope. Shared Scope Let's start with an example. Assuming I have an Angular.js application. I have a controller contains an object, and display the content in the page. The code is very simple. 1: <body ng-app="Demo" > 2: <div class="panel panel-info" ng-controller="HomeCtrl"> ......

 

When I'm working in my project, as well as development "sx.wizard" toolkit, I need to deal with asynchronous operation. For example, in "sx.wizard", template for each steps are loaded in parallel asynchronously. And the "$wizard" service will start to render UI once all templates are loaded successfully. In this case we need to use $q. $q was explained in Angular.js document as follow. A service that helps you run functions asynchronously, and use their return values (or exceptions) when they are ......

 

In my project I have a feature which needs user to specify a large amount of properties against an object. I though a wizard would be the best solution since it makes the user focus on part of the object in each steps. Then I checked the Internet to see if any existing Angular directives is OK to me. I found this, this and this. All of them are awesome but unfortunately none of them covers all my requirement. So I decided to create my own wizard, and below I would like to introduce how to use it. ......

 

In my project I'm using SignalR and Angular.js to make the page real-time. But I found a slightly problem. It's a little bit hard to notice user when something changed if there are a lot of fields in the page. Hence I decided to create a small directive which will apply highlight style when it the model value was changed. Below is how it looks like. And you can play with it on my Plunker. Step 1 Download and include the source code of this directive from Github. Step 2 Add dependency to your Angular.js ......

 

Last week after watched videos of ngConf 2015, I decided to have a try on Angular 2.0. And I think the best start point would be its new router. The application I'm going to change is "My DocumentDB", a web-based Microsoft Azure DocumentDB management tool I created last year. Although Google said it would be very simple and smoothly to migrate from Angular 1.x to this new router and then easy to go forward to Angular 2.0, I found a lot of problem if I'm using Angular-UI-Router. In this post I would ......

 

Below are some gulp plugins I'm using in my Angular.JS website for build and deployment. Basically what I need are 1, Generate <script> and <link> element in "index.html" page based on packages installed through Bower. 2, Generate <script> elements for all Angular.JS JavaScript files we wrote. 3, Generate configuration file based on environment variants. 4, Combine and minify (except those had been minified) JavaScript and CSS files in release mode, but NOT in debug mode. Now let's ......

 

When I'm developing "My DocumentDB" I decided to enhance the JSON input part by introducing a designer. After Google-ed I found JSONEditor is good to me. It's a web-based tool allows to view, edit and format JSON with simple API to integrate into a web page. Then I was going to use this cool thing into my project. Use Directive I firstly created a directive that will apply JSONEditor in its DOM. The JSON data will be specified from the "ng-model" attribute. The code is very simple as below. 1: app.directive('uiJsonEditor', ......

 

Microsoft had announced ASP.NET vNext in BUILD and TechED recently and as a developer, I found that we can add features into one ASP.NET vNext application such as MVC, WebAPI, SignalR, etc.. Also it's cross platform which means I can host ASP.NET on Windows, Linux and OS X. If you are following my blog you should knew that I'm currently working on a project which uses ASP.NET WebAPI, SignalR and AngularJS. Currently the AngularJS part is hosted by Express in Node.js while WebAPI and SignalR are hosted ......

 

If we are using SignalR, the connection lifecycle was handled by itself very well. For example when we connect to SignalR service from browser through SignalR JavaScript Client the connection will be established. And if we refresh the page, close the tab or browser, or navigate to another URL then the connection will be closed automatically. This information had been well documented here. In a browser, SignalR client code that maintains a SignalR connection runs in the JavaScript context of a web ......

 

Currently I'm working on a single page application project which is built on AngularJS and ASP.NET WebAPI. When I need to implement some features that needs real-time communication and push notifications from server side I decided to use SignalR. SignalR is a project currently developed by Microsoft to build web-based, read-time communication application. You can find it here. With a lot of introductions and guides it's not a difficult task to use SignalR with ASP.NET WebAPI and AngularJS. I followed ......