Develop Reference

Best way to pass server (c# / Razor) values into an AngularJS app

We use DNN and often need to pass a few context specific values (like page id or module-on-page-id) into an AngularJS app. We've developed our own conventions how to do this, but would like to hear from others how they approach this to find a best practice.
So basically the situation is that the server-page has information needed by the JS. Using WebAPI is not an option, as these values are known in the page, but not in a separate request. Things I've seen so far have been:
Use in-view-razor like href="#Tab.TabId/{{...}}" (I don't like this)
Place the values in the ng-init like ng-init="config = { prop1: '#Tab.TabId' }"
Create a separate <script> tag where we generate a module on the fly containing these values so angular.module("config", []).constant('prop1', '#Tab.TabId')
Create a json with razor in the page somewhere and inject all of it as a module into the app using a generic code which does the same as #3, just with cleaner code re-use.
I've seen all these and have also used all. Currently we avoid #1 as we believe it's not good to mix templating languages and because it doesn't allow externalizing parts of the view. So basically we use #2 as for quick-and-simple (and a bit dirty) + #3/#4 for larger projects.
Do you have a better way, or which way would you prefer?

We are using variant #4.
This has the advantage that the JSON defines the exact interface for the config needed by the JS module. And Razor is great to generate URLs using #Url.Action.

we use NewtonSoft and do JSONConvert.SerializeObject(ObjectName) and then pass it over as a Session from the controller and then use #Html.Raw(ObjectName) and its a JSON Object that can be utilized easily in javascript...

Jquery plugin Vs javascript

Can somebody please explain the pros and cons for below.
Am having a function to get the url querystring parameters, but I need to know which is the best way to write the function. Eg: if i create the function using jquery plugin style, then every time I need to use a target element to access the function as below
$("#targetDom").getQueryString("name");
However, if I create the function using javascript classes or javascript design pattern, it would be
getQueryString("name");
This is a small example but considering large application which approach is best? is there any disadvantage in going with jquery plugin way?
Regards,
Navin

I found a while ago this sentence:
Don't learn jQuery. Just use it.
It's one of the best advices for a newbie, I think.
jQuery is just an addition to javascript. It simplifies DOM traversing/manipulation, makes easy event handling and so on, but it is not something you should start learning before you know vanilla Javascript.
Regarding your example, it is not the best thought example for jQuery plugin.
The syntax you suggested ($("#targetDom").getQueryString("name");) implies that you treat URL query string as attached somehow to the HTML element, which is wrong...

Change Handlebars notations

I have two teams working on the same project , both are using template engines ( Client and Server Side Engines ) with the same notations "{{X}}" but with different contexts .
now what I want to do is to change the Handlebars notations from {{ }} into something else for example <% %>
I want to use this notation for example :
<div><%X%></div>
instead of :
<div>{{X}}</div>
some edits needs to be done on the Handlebars.js , but I can't find it.
how can I do that ?
knowing that I can do it with Mustache by changing the line
exports.tags = ["{{", "}}"];
to
exports.tags = ["<%", "%>"];

You should really think twice before proceeding with this approach. Modifying Handlebars.js and adding customized features is going to introduce several management issues that could possibly present a much higher cost at a later stages of the project. Consider these points:
If you modify the current version, it will be either very hard or time-consuming to keep up with future updates of the tool.
Current documentation and tutorials about the tool becomes obsolete or hard to follow.
Any new developers added to the project will need to adjust to the changes and try to understand the new features of the tool.
Given these points, I would suggest to follow the standards and best-practices provided by each third party tool.
Hope this helps, and good luck!

Handlebars is defined with a formal grammar. You need to change https://github.com/wycats/handlebars.js/blob/master/src/handlebars.l

Django localize built-in widgets

I use Django built-in widgets like AdminSplitDateTime. However, strings used in this widget aren't localized as they're in JavaScript. How to correct that?

Did you taked a look the Django documentation about that subject? Or maybe it's something else that you want?
The main idea is that JS does not have a native implementation of gettext, so you need to use an special catalog.

JavaScript Templating Engine

I would like to create universal templating engine in JavaScript, how to?
HTML template
<h1><%title1%></h1>
<h2><%title2%></h2>
JSON file
{
"title1" : "Hello World!",
"title2" : "Hi World!"
}
Javascript
Find in HTML file <%title1%>
Find in JSON file variable "title1"
Replace <%title1%> with value of variable "title1"
Same for <%title2%>
Thanks!

Have a look at this article. It discusses a proposal (by microsoft) how support for templates could be added to the jQuery library.
In the same article you will also find an overview of some already existing template solutions (maybe you'll find something that matches your needs, instead of re-inventing the wheel).
Update (2012-07-23):
The jQuery templates project was abandoned more than a year ago. It seems that Boris Moore continues his work with the new projects jsrender and jsviews.

John Resig Micro-Templating is cool solution

You might want to have a look at my jQuery templating plugin jQote2. As far as usability and speed is concerned, I have yet to see a better templating solution (trust me, I've tried them all).
It has a built in closure compiler that let's you precompile your templates (handy if you want to keep your templates in .js files) and a caching mechanism. The current version also comes with a couple of convenient methods that ease the pain of appending/prepending/replacing DOM nodes.
Give it a try, you won't regret it.
Regards