I am using typescript with Angular. My requirement is to dynamically fill the contents of the tab.
I have a variable which has HTML content with Angular components included using ng-include.
I m using this variable in my HTML inside ng-bind-html tag. It is not recognising the Angular tags.
I'd I just use Normal HTML tags, it compiles fine.
In your plunker, Angularjs is never included, you don't have ng-app directive at the top, so I don't see how it can recognise anything related to Angularjs
Related
A client of mine has an issue with his AngularJS Project that during the loading, some interpolations are rendered as text before they are replaced with the proper content. I haven't encountered this behavior before. Does anyone know what they might be doing wrong?
Use the ng-cloak directive to avoid the undesirable flicker effect caused by the html template display.
From the Docs:
The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading.
The directive can be applied to the <body> element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view.
For more information, see
AngularJS ng-cloak Directive API Reference
I'm using AdminLTE template to create a simple web app. I'm traing to use AngularJS for my front end. I want to split my theme in some child themes because it's easier to mantein. To do this, i use "ng-include" directive, but the html in the child view isn't beeing display correctly:
in the past when I was using php with i don't have the same problem. WHat can I do?
Solution. I was using:
when using tag "ng-Include" the css don't work. So i include the first line of profile.html and i add the ng-Include directive:
This work fine for me!
I have a problem with acessing $scope in prettyPhoto inline opened HTML.
This is simple HTML in which I have ng-click.
<div id="inputMask" class="gridSystem modalWindow responsive" style="display:none;">
...
</div>
and here is JS for creating prettyPhoto modal window:
$.prettyPhoto.open('#inputMask','','');
PrettyPhono creates special DIV, which I cannot connect with controller and/or $scope.
Does anybody have any idea how this should be made?
Tnx
AngularJS would not work with dynamically generated content that the prettyphoto plugin generates, since angular needs to compile the html and setup the necessary watches.
You need to wrap the jquery plugin into a directive and manually update the scope elements based on the events handlers available for the plugin.
In all of the AngularJS examples, the Angular library is placed in the HEAD tags of the document. I have an existing project that has been built upon the HTML5 Boilerplate layout. This defines that JS libraries should be placed at the very bottom of the DOM before the </BODY> tag.
Does AngularJS need to be placed in the HEAD?
AngularJS does not need to be placed in the HEAD, and actually you normally shouldn't, since this would block loading the HTML.
However, when you load AngularJS at the bottom of the page, you will need to use ng-cloak or ng-bind to avoid the "flash of uncompiled content". Note that you only need to use ng-cloak/ng-bind on your "index.html" page. When ng-include or ng-view or other Angular constructs are used to pull in additional content after the initial page load, that content will be compiled by Angular before it is displayed.
See also https://stackoverflow.com/a/14076004/215945
This one answer on Google Groups gave me perfect insight (shortened):
It really depends on the content of your landing page. If most of it
is static with only few AngularJS bindings than yes, I agree, the
bottom of the page is the best. But in case of a fully-dynamic
content you would like to load AngularJS ASAP [in the head].
So if your content is generated in large part through Angular, you'd save yourself the extra CSS and ng-cloak directives by just including Angular in the head.
https://groups.google.com/d/msg/angular/XTJFkQHjW5Y/pbSotoaqlkwJ
Not necessarily.
Please take a look at this http://plnkr.co/edit/zzt41VUgR332IV01KPsO?p=preview.
Where the angular js is placed at the bottom of the page, and still renders the same output if it were to be placed at the top.
Loading Angular JS at the bottom of the page does result in a flash of ugly {{ something }} html. Using the ng-cloak directive in the body tag creates an empty flash until the JS is loaded so it doesn't add any benefit over just loading AngularJS in the head element. You could add ng-cloak to every element with ng directives in it but you'll end up with a flash of empty elements. Soooo, just load Angular and your app.js files in the head element as the Angular documentation recommends in this quote from their documentation: "For the best result, the angular.js script must be loaded in the head section of the html document"
I need to know if AngularJS is used as js framework for the front-end, do we need Handlebars separately for template-engine? ... as in my view template-engine functionality can be accomplished using AngularJS itself !
You are right, Handlebars and Angular together would be pretty useless.
Handlebars and Angular are completely different things.
Handlebars is a template engine. You write a fancy templatey-string, give it a JSON object, and it renders out HTML from the data. There's no data-binding, no updating, it's just a once-off render.
AngularJS is an HTML compiler and databinder. Angular will look through the HTML for angular-templating tags, interpret/compile them, and update the HTML with changes to data on a given controller scope. Angular doesn't just render an HTML string once, it compiles the HTML, binds it to a scope, and updates when data on that scope changes.
Handlebars in one picture
AngularJS databinding/templating in one picture
AngularJS's HTML compiler in one article
AngularJS's whole overview/guide, so you can know how it actually works