Bundling AngularJs Html Pages With Aps.Net

Bundling AngularJs Html Pages With Aps.Net

یه مطلب خوب درباره Bundle کردن فایل های html در AngularJs پیدا کردم که براتون گزاشتم. البته این مطلب یه مقدار قدیمیه و یه کم مشکل داره ولی برای ایده گرفتن بسیار عالیه. در آینده اگه خواستین بگین که کدی که خودم نوشتم را هم بزارم براتون.
bundle_image_6Bundling and minification are two well-known techniques used to improve the load time of your website. These are especially important for sites that use extensively JavaScript to offer better user experience. There are plenty of tools to help you do bundling and minification of JavaScript and CSS files. If you are a .NET developer you are probably very used to live inside Visual Studio and expect it to offer you everything you might think of. In ASP.NET 4.5 you can use a bundling API to define how your files will be grouped and sent to the client. The following example demonstrates the usage of this API.
public static void Register(BundleCollection bundles)
 bundles.Add(new ScriptBundle("~/bundles/jquery")
 bundles.Add(new StyleBundle("~/bundles/css")

Then in your page (either an ASP.NET page or a MVC view) you would invoke the rendering of these bundles by calling Scripts.Render(“~/bundles/jquery”) and Styles.Render(“~/bundles/css”).

When using AngularJS for building a rich client-side applications you would typically end up with a lot of HTML pages too. These HTML pages are actually the views in the MV* pattern that AngularJS implements. If you use a routing mechanism to simulate multiple pages in AngularJS, then for every page a new request to the server will be issues to download the HTML page for the corresponding page. For your production environment, however, you may wish to predownload all HTML pages so that no further requests are made to the server. One options is to rely on tools like Grunt, which provides a rich set of options. However, in this post I want to show you a very easy way to achieve the same using the bundling API of ASP.NET.

First we have to understand how AngularJS processes the HTML pages. When AngularJS needs to render a view (e.g., when loading a route or when visualizing a directive), it checks a local cache, called template cache. This is an abstraction over a simple key-value store that runs locally. If the template is not in this template cache, then AngularJS issues a request to the server in order to download it and then it puts into the cache. Next time the same view is requested, it can be rendered immediately. So what we can do in this scenario is that we can prepopulate this template cache will all the HTML pages we have. Thus, every time AngularJS needs to render a view, it will have a cache hit.

The next question is how to implement this logic using the bundle API. With the help of a .NET reflector one can look into the code of the existing JavaScript and CSS minification mechanisms and see how they work. The interface IBundleTransform provides a method that can manipulate all the files in a bundle and decide how to render them. Thus, we can collect all HTML pages that are included in the bundle and render them as a JavaScript file. We can attach a method to the run block of our AngularJS application module and make use of the $templateCache service to manipulate the template cache. Here is an excerpt of our AngularJsHtmlCombine transform implementation.

var sb = new StringBuilder();
sb.AppendFormat("angular.module('{0}'), appName);
foreach (BundleFile file in response.Files)
 string fileId =
 string filePath =
 string fileContent = File.ReadAllText(filePath);

Note that I rely on JSON.NET to convert a .NET string to a JSON string. We can then create a special bundle to apply our transformation.

public class AngularJsHtmlBundle : Bundle
 public AngularJsHtmlBundle(string virtualPath)
  : base(virtualPath, null, 
   new[] { (IBundleTransform)new AngularJsHtmlCombine() }) {}

How do we use this bundle now? Well, the same way as we use the scripts and the styles bundle.

public static void Register(BundleCollection bundles)
 bundles.Add(new ScriptBundle("~/bundles/js")
 bundles.Add(new AngularJsHtmlBundle("~/bundles/myapp/html")

When we request the bundle via Scripts.Render(“~/bundles/myapp/html”) a JavaScript file will be returned with all HTML pages rendered as strings. If we do not want to enable the bundling process, e.g., the debug attribute is present in the web.config, then nothing will be rendered and AngularJS will still make the usual requests to the server. Voila!

A have to mention a few notes in my implementation.

  • We need a way to pass the name of the application module to our bundle. I have chosen to do this via a predefined URL template, i.e. ~/bundles/{appName}/html.
  • Although I use JSON.NET, even the traditional DataContractJsonSerializer should be capable of the string serialization.
  • Be careful with the HTML file IDs. This implementation will make the file IDs with a leading slash in the URL. However, AngularJS is sensitive about this slash. So if you write the template URL of your directive to be “Content/hello.html”, AngularJS will not find it in the template cache and hence a new request will be made.

You can find the source code along with a demo on GitHub.



Top 15 Ext JS Development Practices to Avoid – Section4
پانزده اشکال رایج برنامه نویسی در اکست-جی-اس– قسمت چهارم

  1. عدم رعایت قراردادهای نام گذاری ( Naming-Conventions)
  2. محدود کردن یک کامپوننت به کامپوننت والد آن
  3. پیچیده کردن غیر ضروری و بیش از حد کد


Enable thusandSeparator on ExtJs NumberFields<br/>اعمال جداکننده سه رقمی در نامبر فیلد اکست-جی-اس

Enable thusandSeparator on ExtJs NumberFields
اعمال جداکننده سه رقمی در نامبر فیلد اکست-جی-اس


یه override برای numberfieldهای ExtJs نوشتم که share کردم امیدوارم به دردتون بخوره.


Demo اون هم از اینجا میتونین ببینین:


Top 15 Ext JS Development Practices to Avoid – Section3<br/> پانزده اشکال رایج برنامه نویسی در اکست-جی-اس– قسمت سوم

Top 15 Ext JS Development Practices to Avoid – Section3
پانزده اشکال رایج برنامه نویسی در اکست-جی-اس– قسمت سوم

  1. ساختار فایل بندی نامناسب
  2. استفاده از Id و Ext.getCmp() برای انتخاب کامپوننت های ExtJs
  3. رفرنس های غیر قابل اتکا (un-reliable)


کتاب آموزش ام_وی_سی در اکست_جی_اس

کتاب آموزش ام_وی_سی در اکست_جی_اس

Sencha ExtJs MVC Architecture

A practical guide for designers and developers to create

scalable enterprise-class web applications in ExtJS and

Sencha Touch using the Sencha MVC architecture.

Read more for download _

برای دانلود به ادامه مطلب مراجعه کنید


Top 15 Ext JS Development Practices to Avoid – Section2<br/> پانزده اشکال رایج برنامه نویسی در اکست-جی-اس– قسمت دوم

Top 15 Ext JS Development Practices to Avoid – Section2
پانزده اشکال رایج برنامه نویسی در اکست-جی-اس– قسمت دوم

  1. استفاده از کامپوننت های تو در توی غیر ضروری
  2. کمبود حافظه به دلیل destroy نکردن کامپوننت های اضافی
  3. کنترلرهای بسیار طولانی و پیچیده: 
  4. دسترسی به نمونه ی یک کنترلر:
  5. نحوه ی گوش دادن به رویداد های یک کنترلر دیگر: 


Top 15 Ext JS Development Practices to Avoid – Section1<br/> پانزده اشکال رایج برنامه نویسی در اکست-جی-اس– قسمت یکم

Top 15 Ext JS Development Practices to Avoid – Section1
پانزده اشکال رایج برنامه نویسی در اکست-جی-اس– قسمت یکم

بدون اینکه اینجا بخواهم درباره ی خوبی ها و یا بدی های ExtJs صحبت کنم، میخواهم درباره اشکالات رایج برنامه نویسی در استفاده از این فریمورک جاوااسکریپت را بیان کنم. برخی از این اشکالات رو خود sencha اعلام کرده و بقیه هم حاصل تجربیات من توی یه تیم بین ۱۰ الی ۲۰ نفره توی یه پروژه Enterprise هست که ۱سال توی ExtJs کدنویسی کردن. بعضی از شماره ها ممکن است به نظر شبیه هم باشند اما برای تاکید بیشتر جدا شدن!


  1. استفاده از Global Variables
  2. عدم معرفی کلاس هایی که در کلاس جاری استفاده شده اند (دستور requires)
  3. عدم اعلان store یا view به کنترولر
  4. استفاده ی نادرست از Scope در event listener ها
  5. استفاده ی از متغیر ها و متد های  private یا document نشده در ExtJs
  6. استفاده از Config های document نشده در ExtJs