Angular.js uses several directives prefixed with ng like below:
ng (base directive)
ng-switch
ng-repeat
ng-view
I was wondering if anyone knew what ng stood for because I couldn't find it in the docs. Is it an acronym for something?
The prefix ng stands for "Angular;" all of the built-in directives that ship with Angular use that prefix. Similarly, it is recommended that you do not use the ng prefix on your own directives in order to avoid possible name collisions in future versions of Angular.
From the FAQ:
Why is this project called "AngularJS"? Why is the namespace called "ng"?
Because HTML has Angular brackets and "ng" sounds like "Angular".
I guess there are not many Star Trek fans among you. "ng" stands for Next Generation, as Angular is the next generation of HTML.
"Enhanced" HTML I would say xD.
I thought they took an arbitrary subsection of the Angular name and used it as the name space:
aNGular
Plus "NG" does not sound like Angular; no matter which way you say it.
ng is an abbreviation of Angular.
Programmers don't like to code long names, so they keep it short and that makes it a bit more cryptic. If you look at Assembler, you know what I mean with ADD, JMP etc. JQuery is the name, the $ is what you use. Angular is the name, ng is what you use.
NG stands for "Next Generation".
It is used in many applications as a suffix, specially in Linux. Example: syslog-ng and Aircrack-ng.
According to the AngularJS Miscellaneous FAQ:
Why is this project called "AngularJS"? Why is the namespace called "ng"?
Because HTML has Angular brackets and "ng" sounds like "Angular".
This guy is a Google superstar, I think ng is a part of their culture.
https://en.wikipedia.org/wiki/Andrew_Ng
Related
What does M stand for in the restrict AngularJS option?
From AngularJS Developer Guide - Directives documentation I see that the:
The restrict option is typically set to:
...
'C' - only matches class name
'M' - only matches comment
But in order to avoid memorizing that C is for class and M is for comment, I would like to understand why the M is used.
I did not find anything about it on the internet. My guess is that the m is the next consonant letter in the word comment after the c and since the c is already taken by comment the m is used.
This does exactly what it says it does - allows a directive to be matched to a comment.
Thus:
directive('yourDirective', function() {
return {
restrict: 'M',
template: '<span>Something in here</span>'
};
});
Can be used like this:
<!-- directive: your-directive -->
AngularJS supports comment directives but it is best not to use them.
From the Docs:
Best Practice: Prefer using directives via tag name and attributes over comment and class names. Doing so generally makes it easier to determine what directives a given element matches.
Best Practice: Comment directives were commonly used in places where the DOM API limits the ability to create directives that spanned multiple elements (e.g. inside elements). AngularJS 1.2 introduces ng-repeat-start and ng-repeat-end as a better solution to this problem. Developers are encouraged to use this over custom comment directives when possible.
For more information, see
AngularJS Developer Guide - Directive Types
AngularJS Comprehensive Directive API Reference - restrict
For example, I have not found html page. Should I name it
1. not-found.html
2. notFound.html
What's the file name convention?
While I am not aware of a broadly adopted convention, I personally use camelCase, notFound.html. I like to do this across Angular files so notFound.directive.html for a template associated with a notFound.directive.js directive.
The one requirement in Angular to be aware of is that camelCased directive names need to be converted to "dashed" when referencing in HTML. So to reference the notFound directive in HTML you will need to reference <not-found></not-found>.
One resource that has helped me with regard to Angular conventions in general is John Papa's style guide, found here. Note that he actually suggests not-found.html, but again this specific case is up to personal preference.
If you follow the john papa angular style, it's not-found.html. But seriously, just choose the one that seems most natural to you :)
I'm using underscore.js for my templates which are stored in multiple separate XXX_tpl.html files inside sections similar to:
<script type="text/x-template" id="tpl_XXX">
<h1>hi</h1>
</script>
Which I am then using inside backbone.js views as follows:
render: function () {
this.$el.html($('#tpl_XXX').text());
}
I am now using brunch.js build tool which nicely outputs all my libs/js/css code into several optimized files but I am having issue with managing / organizing my templates. How do I make brunch.js build tool to append all *_tpl.html files at the end of index.html? All the examples I am seeing online show how to use brunch.js to merge templates into .js files but I don't yet understand how that works (the templates are a mix of html/js and I lose both access by ID and syntax formatting/highlighting when storing templates in .js files).
Q1. If what I'm doing is right (multiple templates in multiple different .tpl.html files all appended at the end of index.html when built) then how do I make build.js merge all of that?
Q2. If what I'm doing isn't right, what's a better approach to:
have multiple templates that are organized and easily managed
not create additional http requests to pull / all compiled into a single file
have easy access from backbone.js models
want to achieve syntax highlighting in my IDE for the template markup (i.e. no JS string concatenations, etc)
Nice question, but I don't know if you understood how underscore templates should work precisely. Let's try to clear that up first.
Template compilation
An underscore template source is any text with interpolated code. For example:
var myTemplateString = "hello: <%= name %>";
When you want to use that template, you need to compile it into a function first. What? Here's how it works:
var myTemplateFunction = _.template(myTemplateString);
This creates a myTemplateFunction which contains your template logic. In a very simplified, pseudo-code way, you can expect myTemplateFunction to work somewhat like this:
function (context) { return "hello: " + context.name };
So, now you understand why you can call this function and produce a string!
myTemplateFunction({name: 'moe'}) // hello: moe
Using compiled templates
OK, but why do you need to compile it previously? Why not always call directly:
_.template(myTemplateString)({name: 'moe'})
Because compilation can be CPU-intensive. Therefore, it's much faster to use a pre-compiled template. You should not force the user's browser to do it! You should do it for him!
Delivering compiled templates
By now, you understand you don't care about delivering the text of your functions to your client, only the compiled template functions. There are many ways to accomplish that.
Brunch has a bunch of plugins for pre-compiled templates, but apparently none for underscore: http://brunch.io/plugins.html
You can use webpack and it's EJS template loader.
Your code would look something like this:
var myTemplateFunction = require('./template.html')
console.log(myTemplateFunction);
You can also use Grunt and it's underscore template task: grunt-contrib-jst.
Whichever you choose, they will all work similarly: they'll compile your template into a function and you'll be able to use that function. Personally, I recommend learning webpack!
Im trying to look up to see if UISelect(multiple) provides a feature to drag move items within the control to sort the list ?
I tried googling for the same and couldn't find much information on this.
Appreciate if you can provide link to some kind of documentation so that i can start from there.
NOTE : I fairly understand how UISelect works.
Just for reference: There has been added a sortable="true" option in v0.10. However this feature is not yet properly documented, but for further information, see this github issue or demo-multi-select.html in the examples folder.
It uses the ui-select-match directive as the "template" inside an ng-repeat that generates them.
Unfortunately that ng-repeat, unlike ui-select-choices's repeat parameter is hardcoded inside ui-select's directive templates.
Look at this template: https://github.com/angular-ui/ui-select/blob/master/src/select2/match-multiple.tpl.html
In the build version of ui-select it's inlined using $templateCache, thus you can easily replace it with your own version and apply sorting on that ng-repeat="$item in $select.selected".
You could also integrate something like ngDraggable there.
The main issue here would be CSS though and absolute positioning used.
I was watching some videos on Egghead.io about AngularJS. The creator of the videos uses Webstorm (and, I believe, works for them). One feature I noticed is that he can set different syntax highlighting within different scopes or quotation marks. So, in code like the following (from an AngularJS directive)
return {
template: '<div>something</div>',
// ^^^ these guys ^^^
}
...he can get the inside of the quotation marks to highlight as HTML.
I use Sublime Text 2, and am fairly wedded to it. Is there an existing feature/plugin for Sublime that could handle a case like this? If not, is something like this technically possible using the Sublime Text 2 API?
I don't think it's built in, but it's certainly possible. I've been doing some work with graphviz and wanted to do something similar. Labels can be generated with html like syntax. Anyways, I played around with the .tmLanguage file and added a new pattern to match the context where html like entries were valid (I look for label = <). The patterns I used for the captures aren't that good, but it works for fine for me. This give me the following, which I think is similar to what you are looking for.
I don't know anything about AngularJS, so I can't help you with anything specific to that, but it is certainly possible. Note that in the image below, the last <table></table> are just to show that highlighting doesn't occur there.
Edit:
Forgot to include this in the original post, but here is my updated tmLangauage file. That first pattern is what I added(link). I used PlistJsonConverter to go from JSON to plist, then saved the file as .tmLanguage. Hope this helps.
#skuroda is right, I implemented #skuroda's code with an additional plugin to easily edit HTML within an AngularJS directive JS file. The result is HTML syntax highlighting within a directive JS file and additional functionality to remove string related delimiters while editing templates.... Sublime AngularJS HTML Template Plugin