Display tabs using angular ui bootstrap - tabsets - javascript

I am trying to create bootstrap tabs using angular ui. But the tabs content are not displayed one at a time. And the tab like buttons are not visible.
Jsfiddle is #http://jsfiddle.net/qn8vcjwo/2/
Tabset code is,
<tabset>
<tab heading="title one">this is tab number one</tab>
<tab heading="title two">this is tab number two</tab>
<tab heading="title three">this is tab number three</tab>
</tabset>
And, i am getting the error as,
Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available

You need to change the setting 'onLoad' under 'Framework and Extensions' to 'No wrap - in head'. This places your code into the head section instead of running it on the onLoad event. See jsfiddle docs. Angular attempts to initialize your app automatically on the DOMContentLoaded event, but your app has not yet been defined, as onLoad has not yet fired, thats why you are getting an error.
When you update that there is another issue. You've included the UI Bootstrap library, but that version does not include the default templates. Since you are not currently defining a custom template, you should include the library with the templates. Thats just a matter of using this URL instead which comes bundled with the templates:
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js
Working fiddle here if needed

Related

Using JavaScript Plugins with Angular 4

I'm trying to use the Bootstrap 3 Datepicker plugin (http://eonasdan.github.io/bootstrap-datetimepicker/) with Angular 4.0.
I've included the necessary JS and CSS (and a custom JS script calling the plugin) in my angular-cli.json file and the script loads great on the first page that I open but stops working as soon as I route to another component.
I figure that I need a way to call $('.datetime-picker').datetimepicker() every time I route to the new component. How would I do that?
this is a different solution try using primeNg google it.

Applying a dependency with javascript to Angular 2 such as bootstrap, foundation or jquery

creating this Angular 2 project I am trying to add other dependencies to the global project that incorporate js files and css files.
The css files work fine... but the javascript files seem to not to apply correctly at all.
I am attempting to do this in the root index.html file.
In the dom everything appears to be correct and there are no warning, errors or conflicts which leads me to believe it is an injection issue.
Interestingly if I apply the html to the index.html everything works fine... but adding it to any component makes it useless.
There is something I am probably doing wrong.
You need to bootstrap your external libraries' code when the component bootstraps.
For example, if you are using the bootstrap collapse on some menu items in a component, you need to call $(class).collapse() in the ngOnInit of that component( or anywhere else in the lifecycle of the component ).

How to use Foundation CSS Calendar Inside ng-include Angular JS

I need to use Foundation CSS calendar in my AngularJS Application. I included the foundation-datepicker.min.js and foundation-datepicker.min.css in my project and referenced the same from my index.html.
In my .html page, I used the date picker like <input type="text" class="span2 dp1" /> and initialised the element in the controller like
$('.dp1').fdatepicker({
initialDate: '02-12-1989',
format: 'mm-dd-yyyy',
disableDblClickSelection: true
});
This initialises the element and works find with default date set.
But when I use the same input element in a view which is included using ng-include, it is not getting initialised. It shows an empty input field with no default value set.
How to initialise an element in ng-include view from a controller and make it work?
My Application have JQuery libraries included. Is that stopping anywhere. Also I don't want to include Bootstrap in my Application since it is already overloaded.
Thanks in advance.
I came up with a working solution to overcome this problem, at the bottom of every page included by ng-include I put the following:
<script>
$(document).foundation();
</script>
It launches foundation internals to load necessary JS code with CSS.

How to add a navigation sidebar and a footer to an AngularJS template without ng-include.?

I'm new to angular development. I have been using a few paid angular admin themes. In all of them, developers have only added ng-view and ng-class attribute to index.html. I just want to know how to add a sidebar navigation and a footer to every page without using any ng-include.
If you do not want to use ng-include, you can put your HTML directly in the index.html. That is called a layout template, which is the view that contains the common elements along your application.
In summary, everything in index.html outside the ng-view element is going to appear in every page (as long as you use any module such as angular-route for routing within the same original HTML document (e.g. index.html)).
I would recommend you to follow the official AngularJS tutorial if you are new to this framework. Also, ng-book by Ari Lerner is a must-read on this topic.

Why are my angular-bootstrap tabs not rendering?

Here is the site where you can view my angular app and also view source on it: http://clearsoftinc.com/dist/
There should be three blue tabs on the screen. I'm using the tabs directive from the ui-bootstrap directive for tabs (http://angular-ui.github.io/bootstrap/). I used to have it working and now for some reason its broken. I have tried for two days to fix it, with no luck.
I have also posted a zip of the source code here: http://www.clearsoftinc.com/Archive.zip
In controller.js, change
angular.module('clearsoftDemoApp', [])
to
angular.module('clearsoftDemoApp')
If 2nd parameter of module() is presented, it defines a new application instead of getting the existing one defined in app.js.

Categories