I would like to combine AngularJS and Twitter Bootstrap into a fresh web app. It seems like AngularJS directives have been written for Bootstrap.
However, on careful look, it seems that these directives don't cover all of Bootstrap. Can I combine both the AngularUI Bootstrap code with the original Bootstrap to get completeness? Can it be done in the first place?
I stumbled on another Angular project called AngularStrap. Can I combine all three?
What is the best way to combine AngularJS and Twitter Bootstrap to get completeness?
Generally, the CSS part of Bootstrap works exactly the same way with AngularJS as it works with the Bootstrap JavaScript. So as long as you only want to use Bootstrap CSS, you do not have to think about it.
For almost all of the Bootstrap JavaScript functionality, AngularUI provides an alternative approach. E.g. the navbar in general works with CSS only, so just look at the Bootstrap docs and implement it. If you require some responsive features for the navbar, you will require the collapse directive; for an example see here: angular-ui navbar
So if you think anything is missing in AngularUI, could you please be more specific with "are not complete enough to cover the entire Twitter Bootstrap"? I do not have the impression that there is a general gap.
Moreover, http://angular-ui.github.io/bootstrap/ is the most mature library for the task. So if you think there are features missing, I would strongly recommend to patch it and make a pull request.
The code can be combined by writing your own Angular directives which generate HTML that has Bootstrap classes. I am working on a similar web application that combines Bootstrap with Angular. What I did there, was something like this:
app.directive('trackerMenu', function(){
return {
restrict: 'E',
templateUrl: "partials/menu.html"
};
});
And the content of menu.html is:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-show="auth">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Issue Tracker</a>
<ul class="nav navbar-nav">
<li class='toggleable'>
<a ng-click="navigate('dashboard')"><i class="fa fa-home"></i>Dashboard</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('tasks')"><i class="fa fa-tasks"></i>Tasks</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('bugs')"><i class="fa fa-bug"></i>Bugs</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('statistics')"><i class="fa fa-bar-chart-o"></i>Statistics</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('team')"><i class="fa fa-users"></i>Team</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('profile')"><i class="fa fa-user"></i>Profile</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('settings')"><i class="fa fa-cog"></i>Settings</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</form>
<ul class="nav navbar-nav">
<li>
<a ng-click="logout()"><i class="fa fa-power-off"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
And the directive is used like this:
<body ng-class="togglePadding()" ng-controller="RootCtrl">
<tracker-menu></tracker-menu>
</body>
Basically, what my directive does is to inject a Bootstrap navbar into a page.
Angular Strap supports navbar, also speaking from experience you can mix ui boostrap with angular strap on a module by module basis. Both Projects allow you to inject their components for a custom build like so:
angular.module('myApp', [
'mgcrea.ngStrap.modal',
'mgcrea.ngStrap.aside',
'ui.bootstrap.popover'
]);
However, they can and will conflict with each other. I.E you cannot have the ui-bootstrap modal and the angular strap modal in the same project. Additionally, some of the directives from both projects have dependencies on other modules for example, the Angular Strap date picker has a dependency on the tooltip directive.
Related
I am referencing the gallery selector options that auto cycle in the relative content. This site is built in full HTML hard code so feel free to view source.
Everything is completely operational on local side. As soon as I upload to godaddy and test, the functionality is not working: https://www.steam-green.com/gallery.html
Here is what is not working:
<div class="collapse navbar-collapse latest--project" id="navbarfiltr">
<ul class="simplefilter">
<li class="active" data-filter="*">All</li>
<li data-filter=".carpet-cleaning">Carpet & Rug Cleaning</li>
<li data-filter=".upholstery-cleaning">Upholstery Cleaning</li>
<li data-filter=".tile-and-grout">Tile & Grout</li>
<li data-filter=".hardwoods">Hardwoods</li>
<br><br>
<li data-filter=".water-damage-restoration">Water Damage Restoration</li>
<li data-filter=".mold">Mold Removal</li>
<li data-filter=".rug">Area Rug</li>
</ul>
</div>
I am seeing you are using isotope jquery library.
I saw your custom.js and I don't see where you are initilizing this plugin for that specific menu nor your html.
Please refer again to documentation https://isotope.metafizzy.co/
Its possible that you didn't update your custom.js file in production, please check.
I've been messing around with Angular and have a simple test project with working however when adding in the module for ngGrid, everything just stops functioning.
A snippet of working HTML is:
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">{{hdr.title}}</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li ng-click="hdr.setIndex(0)" ng-class="(index==0) ? 'active' : ''">
<!--Contributions-->
<!--STATE directive-->
<a ui-sref="{{hdr.menu[0].state}}">{{hdr.menu[0].name}}</a>
<!--<a ui-sref="collections">{{hdr.menu[0].name}}</a>-->
</li>
<li ng-click="hdr.setIndex(1)" ng-class="(index==1) ? 'active' : ''">
<a ui-sref="{{hdr.menu[1].state}}">{{hdr.menu[1].name}}</a>
</li>
<li ng-click="hdr.setIndex(2)" ng-class="(index==2) ? 'active' : ''">
<a ui-sref="{{hdr.menu[2].state}}">{{hdr.menu[2].name}}</a>
</li>
<!--<li> {{hdr.title}}</li>-->
</ul>
</div>
The script contains:
angular.module('app', ['ui.router'])
The display fails when the script is updated to either of the following:
angular.module('app', ['ui.router','ngGgrid'])
angular.module('app', ['ngGgrid'])
Now instead of the page displaying properly, all that displays is:
{{hdr.title}} {{hdr.menu[0].name}} {{hdr.menu[1].name}} {{hdr.menu[2].name}}
The script file is being loaded with:
<script src="Scripts/ng-grid.js"></script>
Thanks in advance for any responses.
Another keyword search based on the response from K Scandrettt enabled me to locate another post that contained a resolution to my question.
I am using a bootstrap dropdown, I want to focus on the dropdown so I can use keyboard to navigate over the list. What is the way to do it using jquery?
I tried to use $('#myULid').focus() and this is not working.
I am able to open the dropdown, but not focus on it.
<button id="time_btn" type="button"
class="btn btn-reverse dropdown-toggle"
data-toggle="dropdown">
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in items" ><a><span>test</span></a></li>
</ul>
just add
<ul tabindex='1'>
....
</ul>
then add the .focus() method
There is an excellent article "Accessible Dropdown Menus" all about the various ways to do this at http://terrillthompson.com/blog/202
It includes examples of various methods. One of the simplest can be seen at http://staff.washington.edu/tft/tests/menus/dropperdown/index.html. It is a pure CSS solution (no JavaScript) that was billed on it's invention as "the world's most accessible dropdown menu.".
However other more advanced methods are demoed as well. I hope it provides everything you need.
I want to re-render all the views present on my page.I have Header, Footer and Body view. In Header view i have a dropDown in which user can select the Language Preference. On clicking on language prefrence all the view should be re-render. Is it Possible in Angular?
In BackboneJs i simply call the render function again on that particular event. Is there some same kind of functionality provided by AngularJs?
Thanks in Advance
Header Template (language Prefrence Dropdown Code)
<li class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#">
Language Preferences<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-manual">
<li id="English" ng-click="englishConversion()">English</li>
<li id="French" ng-click="frenchConversion()" >French</li>
</ul>
</li>
is there any inbuilt function which i can call in englishConversion and frenchConversion to re-render the view/views?
Have you looked at the angular-getText libary ,
Or you can $compile the HTML using angular again. You can simply do like this,
var content=angular.element('#translatedContent');
var scope=content.scope();
$compile(content.contents())(scope));
I normally use Ruby on rails to develop my work with sublime text as my text editor, but today I am using just using notepad and creating a site locally. Now normally all my js and css is rendered perfectly via the asset pipeline in rails but I am having trouble getting the js to work, in particular the dropdown button in the navbar.
i am calling Jquery within the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And I am calling my bootstrap.js file
<script src="js/bootstrap.js" type="text/javascript"></script>
The css for the navbar is as follows
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Am i missing something blindly obvious because the button is not responding?
Any help appreciated
Have you included the required bootstrap.css stylesheet?
<link href="css/bootstrap.min.css" rel="stylesheet">
Edit 1:
Here's a jsBin with your HTML/bootstrap. If you aren't seeing the same output then something is indeed wrong. If you're expecting some behavior when one of the navbar buttons gets clicked, then it isn't actually an error: there is no js behavior attached to the click of the navbar.
Bootstrap will provide you with a "prettified" navbar, it changes the aesthetics but not the behavior, you still need to connect to the individual clicks and define your own behavior for them.
Edit 2:
To connect to the clicks you have to get your menu items and use jQuery to define onclick behaviors. An example would be to define unique ids for each navbar item
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About Us</a></li>
And then retrieve them with jQuery's selectors and attach click handlers:
$("#home").click(function() {
alert('home clicked');
});
$("#about").click(function() {
alert('about clicked');
});
I've edited the jsbin to add this example.
The CDN wasnt pulling the jquery so i have hosted the file locally now and it works fine