There are two ways in which one can make headers using Ionic framework.
<div class="bar bar-header bar-dark">
<h1 class="title">Title</h1>
</div>
And
<header-bar title="'Title'" type="bar-dark">
</header-bar>
Links in Documentation :
For first : http://ionicframework.com/docs/components/
For second : http://ionicframework.com/docs/angularjs/views/header/
What is the difference between them?
The first is native HTML elements using the predefined CSS class names.
The second is using an AngularJS directive. Basically it is a custom element that at runtime will be replaced by a template. See here for the actual AngularJS directive definition. You can see the template that replaces the original element.
Directives like this will play an interesting part of the future of the web. There is a standard on its way in Web Components that will standardize these kind of markup constructs. Besides directives in AngularJS there is another popular way of doing this style of components using Polymer.
Related
AngularJS 1.6 documentation for directives states:
$compile can match directives based on element names (E), attributes (A), class names (C), and comments (M).
(...)
The following demonstrates the various ways a directive (myDir in this case) that matches all 4 types can be referenced from within a template.
<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>
Can you use components in the same way, adding them to HTML element by attribute? Because documentation for components always shows examples of comonents being used as elements.
To clarify, instead of having to write it like below and cluttering my markup with non-standard elements:
<component-name></component-name>
I'd like to be able to do something like that in my HTML:
<h1 component-name=""></h1>
The entire web is moving towards components. I wouldn't be concerned about "non-standard elements." At any rate, components are restricted to elements only. They cannot be used for Attributes. This is the primary use case for directives vs. components.
Components are provided specifically for creating HTML and augmenting it with view based behavior. Directives are now primarily for decorating HTML.
I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.
I am trying to use angular together with an JSF backend.
I have the problem that custom directives are not processed within JSF when set as attributes for example:
<div my-directive .... > ...(some code)... </div>
JSF or XHTML sais that is not allowed to use attributes withtout being assigned (with an =).
To workaround, I used
<div my-directive ="" ...> ...(some code)... </div>
That would be fine with angularFS but when using the attribute
"my-directive" it will be removed after JSF rendering completely. The problem is my html relies on JSF ajax calls to a DB that I need as the backend relies on JSF 2.2/JSP.
The only thing I can bring it to work is using a tag/an element like
<my-directive> ... </my-directive>
Doing so is somewhat undesireable as I would like to use an attribute.
I learnt that JSF can be tricky if used with angularFS.
Did someone have this issue before?
If I understood your question correctly, JSF2.2 does what you need. It allows either to go with pure Html5 and bind with JSF or go with JSF and use p:passthrough.
#see a few links below
Link 1, Link 2, Link 3
I have a few bits of HTML like
<p class="noresults">{{numberOfContacts}} Results Are Available</p>
Is it possible for me to hide {{numberOfContacts}} until Angular has loaded? So it would just say Results Are Available
I've seem some solutions such as hiding the entire body until Angular has loaded, but I'd rather not do that if possible.
Yes, use ng-cloak. Simply add class="ng-cloak" or ng-cloak to an element like this
Using directive <div ng-cloak></div>
Using class <div class="ng-cloak"></div>
It's simply a set of CSS rules with display: none !important and as Angular has rendered your DOM it removes the ng-cloak so an element is visible.
use <span ng-bind="numberOfContacts" /> instead of {{numberOfContacts}}
Sometimes, even if I used the ng-cloak, I could still see the braces for a few seconds. Adding the following style resolved my issue:
[ng-cloak]
{
display: none !important;
}
Please see this link link for more explanation.
Hope it helps :D
This is typically only an issue when working with complex content on really slow devices. In those instances, there can be a brief moment when the browser displays the HTML in the document while AngularJS is parsing the HTML, getting ready, and processing the directives. In this interval of time, any inline template expressions you have defined will be visible to the user. Most devices nowadays have pretty good browsers which are quick enough to prevent this from being an issue. There are two ways to solve the problem.
Avoid using inline template expressions and stick with ng-bind directive.
(Best) Use the ng-cloak directive which will hide the content until Angular has finished processing it. Basically, the ng-cloak directive uses CSS to hide the elements and angular removes the CSS class when the content has been processed, ensuring that the user never sees the {{ and }} characters of a template expression.
One strategy to consider is using the ng-cloak directly to the body element, which will ensure that the user will see an empty browser while AngularJS loads. However, you can be more specific by applying it to parts of the document where there are inline expressions.
I have seen issues with ng-cloak not working when added to an element. In the past, I have worked around this issue by simply adding ng-cloak class to element.
You can use ng-bind instead of expression like
<span ng-bind="data"></span>
I'm new to AngularJS, coming from a PHP background where I do all the template aggregation on the server. With PHP I would grab several templates, mash them together, then send it to the clients browser. AngularJS allows me to insert a template using ng-view. This is great, but it doesn't handle the case where the template that I insert may include tags that are placeholders for other templates. For example, I may have the following as one of my templates:
<div class="some_class">
<div class="another_class">
{content}
</div>
</div>
In PHP I would insert this template, then replace the contents of {content} with another template. In AngularJS I know how to insert the main template (using ng-view), but I'm not sure how to dynamically load my "partial template" into the {content} tag. How is this suppose to be done with AngularJS?
A straightforward approach would be to use the ngInclude directive:
<div class="some_class">
<div class="another_class">
<ng-include src="templatePath"></ng-include>
</div>
</div>
Then, in Controller that is associated with this template you can define the templatePath variable dynamically:
function MyCtrl($scope){
$scope.templatePath = // define this var dynamically here
}
Using ng-view to nest multiple templates is not currently supported natively in Angular.js. There are, however, multiple options to emulate that functionality. See the answers in this SO question for several of those options, including the ui-router suggested by akonsu.