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 :)
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
I have problem with custom placeholder. I am using this https://github.com/mareczek/international-phone-number I want to add more ex. E.g. 131123456789 to my place holder which default gave something like this 131123456789. I read the document they use customPlaceholder to custom place holder, but they do not have any example with angularjs, so could someone show me example code with custom place holder like this.
Here my code that I added to my app
app.config([
'$stateProvider',
ipnConfig,
register_form_state
])->ipnConfig.customPlaceholder = 'E.g. 131123456789'
but it doesn't work for me.
This will solve this problem
http://hodgepodgers.github.io/ng-intl-tel-input/
Please refer this link & this is angularJS plugin
https://github.com/hodgepodgers/ng-intl-tel-input
On selection of country, placeholder will change
The documentation for http://hodgepodgers.github.io/ng-intl-tel-input/ is lacking, but it seems like it could be a good tool. I think I would personally like to see a working implementation inside of an existing application before I'd rule it as the solution to use. I'm still having trouble implementing this one compared to the one by mareczek.
edit To answer your question, I think that it changes the placeholder based on the flag you have selected. If you have it set to a default country, can you not just change the placeholder in the html? Or can you target it directly using css?
I'm new to Angular and trying to understand what the "x-" and "data-" prefixes mean. In the directives documentation (http://docs.angularjs.org/guide/directive) it says that these prefixes will make the directive "HTML validator compliant". What exactly does this mean?
The HTML5 spec allows for arbitrary attributes as long as they're prefixed with data- like so:
<div data-myattribute=""></div>
Whereas this would be invalid HTML5:
<div myattrbute=""></div>
For more information on data- attributes, have a look here.
As for "x-" attributes, I think you mean "x:" attributes and elements, which are specific to XHTML validation...
To expand on this, if you were to (for some reason) be using XHTML, you can define custom attributes with namespacing like so (and I'm just summarizing the gist here):
<html xmlns:x="http://sample.com/mynamespace">
<body>
<div x:whatever=""></div>
<x:mytag></x:mytag>
</body>
</html>
where the URL in xmlns is really just to prevent conflicts between like elements. Also, a DTD for the custom elements and attributes could be provided for validation purposes as a part of your DOCTYPE declaration.
*behavior in browsers is going to vary with this xmlns approach.
In summary, though: With most browsers released in the last three years, or IE8+ you're not going to have to worry about any of these things. Only in very specific situations will you really care.
From the HTML5 spec: http://www.w3.org/html/wg/drafts/html/master/single-page.html
Attribute names beginning with the two characters "x-" are reserved
for user agent use and are guaranteed to never be formally added to
the HTML language.
Also:
For markup-level features that are intended for use with the HTML syntax,
extensions should be limited to new attributes of the form "x-vendor-feature", where
vendor is a short
string that identifies the vendor responsible for the extension, and feature is the
name of the feature. New element names should not be created. Using attributes for such
extensions exclusively allows extensions from multiple vendors to co-exist on the same element,
which would not be possible with elements. Using the "x-vendor-feature" form allows
extensions to be made
without risk of conflicting with future additions to the specification.
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
I'm currently making a bilingual Expression Engine 2.5.2 website. I'm using this technique to create the two langues, which works perfectly.
I have created a {country_code} global variable in the two index.php files which allows me to detect the current language.
Using this technique, I have no problems to get language-relative data when accessing an entry. My only concern is that I apparently have to privilege a language-specific "clean" URL.
Example entry:
{entry_id} = 123
{title} = My test article
{title_permalink} = my-test-article
{name_fr} = Mon article
{name_en} = My article
If I request http://www.example.com/index.php/en/blog/articles/my-test-article, I expect to to find, in english, "My article" using the template articles in the blog template group.
Everything is fine, but the french translation is accessible when requesting http://www.example.com/index.php/fr/blog/articles/my-test-article. The correct translation of the URL should be http://www.example.com/index.php/fr/blogue/articles/mon-article-test.
Anyone encountered a problem like this? Any solutions via extensions or modules?
I believe the Transcribe module solves this by both providing the ability to translate template group and template names, and having you create a separate entry for each language and piece of content in your site (hence, you have two separate URL titles). But that means buying into their entire methodology for a multi-lingual site.
Myself, I usually just stick to using the entry_id instead of the url_title, and live with the template names being in the primary language.
The best way I found to achieve this is by embedding templates with segment translations, duplicating template groups and duplicating channels.
In the blog/articles template:
{embed="shared/.head" segment_2_translation="blogue" segment_3_translation="articles"}
In the blogue/articles template:
{embed="shared/.head" segment_2_translation="blog" segment_3_translation="articles"}
In shared/.head template:
[...] {if lang == "fr"}English{if:else}Français{/if} [...]
And then you can create a Articles (FR) and a Articles (EN) channels, and each will have their unique URL titles. You can also add a relationship custom field for each channel to associate an entry with it's translation.
It feels messy, but it is the only way I could make it work without modules, plugins or whatnot.