Why are my angular-bootstrap tabs not rendering? - javascript

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.

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 ).

'angular-backtop' back to top button not working

Hi I am trying to implement a back to top button as easily as possibly in my angular app.
I found the angular-backtop directive and it seems perfect but I can't get it to work.
I have angular-backtop.js and angular-backtop.css included in my index file and 'angular-backtop' included as a dependency in my main module.
In the angular-backtop.js the use of scope is present (without $) and I know there is a bug where scope doesn't work with the new angular router which I am using. Is this why the angular backtop isn't working?
It seems like this isn't correlated but I'm not sure why else this wouldn't work.
All you have to do is inject that directive anywhere you want into your html file as
<back-top></back-top>

Display tabs using angular ui bootstrap - tabsets

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

navigation bar in single page app using angular

I've tried to find the answer to my problem with no luck. I'm new to web development and I've been trying to create a simple app using angularjs and bootstrap. There's no much content on my pages, only a couple of inputs and buttons that do nothing.
I placed ng-view in the index.html page as I saw in many tutorials and that allows me to navigate to all my pages. I'm trying to add a navigation bar to all my pages once a user logs in, so I placed another ng-view on my home(page after user logs in), but it seems that angular allows only one view for each app. And also it doesn't allow nested app. If I'm wrong, please correct me (that's what I understood from my Google 'research').
So, my question is: how can I add a navigation bar(or any same html content) to all my pages after the user logs in without copying the same code in each html page?
Btw, I had this working with jQuery, but I don't know how to do it using angularjs
Thanks!
You can use Angular Directive that use a template to create a custom tag and you can use a controller only for this directive. Call this tag to all pages when logging.

Categories