Victor's Blog

Live as if you were to die tomorrow. Learn as if you were to live forever

NAVIGATION - SEARCH

The color coding of Google Chrome Inspect Element.

In Google Chrome, the developer tools allowed you to inspect page elements and would highlight them in blue in html. It will also highlight elements in different colors like this below.

 

Now what do these different color mean?

Google chooses these colors corresponding to the W3 CSS box-model

  • Blue is the content
  • Green is the padding
  • Orange is the margin

You can see this in the Metrics section of the developer tools 

 

Add Disqus into your Angular.js site.

Add Disqus into your Angular.js site.

Disqus ranks #1 in Quantcast's U.S. networks with 144 million monthly unique U.S. visits. Disqus is featured on many major publications, such as CNN, Daily Telegraph and IGN and about 750,000 blogs and websites. So it's a no-brainer to put Disqus into your website if you want to have a out-of-box comment system. Recently, I tried to put Disqus into my website which uses Angular.js. But this wasn't as easy as I thought. So I want to share with you what I found out.

1. There are a lot of disqus directive over the net. I found the best one would be this kirstein / angular-disqus. It is very simple to use. Also, it works if you have multiple domain names point to the same site. 

2. Disqus will only update on sites which use hashbang ( #! ). Disqus will ignore everything in your url after # unless it is followed by the !. So please make sure that you have your $locationProvider.hashPrefix('!') set.

Example:

angular.module("test",   ["ngDisqus"]).
  config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    $routeProvider
      .when("/", { templateUrl: "/Home.html" })
      .when("/login", { templateUrl: "/Account/Login.html" })
      .otherwise({ redirectTo: "/" });

    $locationProvider.html5Mode(false).hashPrefix("!");
}]);

3. Once you enter your comment, you might not be able to find your comment to appear at your page straightway. It seems Disqus needs sometime to process the comment and put into the system. So please wait few minutes before you think there is something wrong with your code. (You can always verify your comment through your Disqus admin console.)

 

Make Angular.js and Asp.net MVC work harmoniously

I am always a hardcore .net guy. And I really like Angular.js too. So in my recent pet project, I tried to make these two work together. I know this is not a new topic. But I want to show you how you can fully utilize MVC inside a Angular SPA. 

First, you would need to create your normal ASP.net MVC project and add angular.js into your project.

Your MVC home controller will look like 

public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    public ActionResult Home()
    {
      return View();
    }

    public ActionResult Contact()
    {
      return View();
    }
  }

Now create your angular.js file. Let's call it app.js

"use strict";

angular.module("demo", ["ngRoute"]).
  config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    $routeProvider
      .when("/", { templateUrl: "/Home/Home" })
      .when("/contact", { templateUrl: "/Home/Contact" })
      .otherwise({ redirectTo: "/" });

    $locationProvider.html5Mode(false).hashPrefix("!");
  }]); 

Now here are things you need to be aware of. 

  1.   Since Angular V1.2 ngRoute has been separated to it's own file (angular-route.js). So don't forget to reference them in the view.
  2.   $locationProvider is optional. If you want to use html5Mode, you need to change the code to $locationProvider.html5Mode(true). You also need to configure URL rewrite at server side. Otherwise when you refresh the page, you will get 404 error. 
  3.   You should set Layout = null in your views except for your start page. You may noticed in my controller, I have Index and Home. But I only reference Home in the JavaScript. I only set the layout in the Index view otherwise you will create a recursive loop between your views. Index view will only be used as place holder unless the website can't initialize angular properly. Users will only see Home view as the start page.

This is my _laytout.cshtml looks like

<!DOCTYPE html>
<html lang="en" data-ng-app="demo">
<head>
 <!-- put your links here -->
</head>
<body>
    <div class="navbar navbar-inverse" role="navigation">
        <div class="container">
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#!/contact">
                        <h5>Contact</h5>
                    </a></li>
                </ul>
            </div>
        </div>
    </div>
    <div>
        <div id="body" data-ng-view class="container">
            @RenderBody()
        </div>
    </div>
</body>
</html>

Index.cshtml

@{
    Layout = "~/Views/Shared/_Layout.cshtml"; 
}
<div>Loading...</div>

Home.cshtml

@{
  Layout = null;
}

<div>Home content</div>

 

These is pretty much all you need to start coding your wonderful MVC&Angular website. Happy coding.