I am new to the bootstrap framework, but already I want to be able to use AngularJS rather than the provided jQuery that comes out of the bootstrap box. The documentation for BootstrapUI seems easy enough, I can simply download the code from github and include it in my Django project.
What I am not so unclear on, and maybe I missed this in the documentation somewhere, but is this intended to fully replace the javascript components of bootstrap? For example there are a lot of JS libraries that are being delivered via CDNs in the bootstrap examples that appear to make the site browser independent. For example, in the jumbotron examples, I see the following code:
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="' + {% static 'bootstrap/docs/assets/js/vendor/jquery.min.js'%} + '"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
</script>
<script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'bootstrap/docs/assets/js/ie10-viewport-bug-workaround.js' %}"></script>
With BootstrapUI is this something I take out or leave in? Just what exact steps do I need to perform in order to use Angular instead of jQuery in a bootstrap powered site? The documentation doesn't really go over this. Please point me to the right place if I've missed something.
UI-Bootstrap basically contains a bunch of Bootstrap components where the original JavaScript/jQuery has been re-written and wrapped in AngularJS directives which can be easily dropped into your application.
As per the docs,
This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required.
Related
I am developing new web application using AngularJS and bootstrap. I need some clarification
1) Is there any sequence to include below files for better performance? if Yes, why?
bootstrap.min.js
npm.js
angular.min.js
angular-ui-router.min.js
jquery.js
any other jQuery Library
style.css
bootstrap.min.css
bootstrap.min.css.map
bootstrap-theme.min.css
bootstrap-theme.min.css.map
2) what is difference between AngularJS 1 & AngularJS 2
3) what is difference between bootstrap 3 & bootstrap 4
Yes, There is a sequence to include CSS and Javascript library files. This sequence will also increase the performance of your website. Your website will load fast at client end.
To understand the sequence to include CSS and js library files. One should have the basic knowledge of HTML5 code template.
Basic HTML5 code template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Reference link: http://getbootstrap.com/getting-started/#template
Above template is the BOOTSTRAP Framework Coode Template.
CSS & JavaScript library file sequence as follows
Bootstrap Framework - CSS Library.
A) Always add BOOTSTRAP CSS library first.
Want to know about Bootstrap CSS library and component that bootstrap provide. Reference link: http://getbootstrap.com/css/
<link href="css/bootstrap.min.css" rel="stylesheet">
a) Bootstrap.min.css is the minified version of Bootstrap. This version is used only for production purpose.
b) Bootstrap.css is used for Development purpose.
B) Add the additional Bootstrap themes if required.
<link href="css/bootstrap.theme.css" rel="stylesheet">
OR
<link href="css/bootstrap.theme.min.css" rel="stylesheet">
For additional theme please refer this link: https://bootswatch.com/
C) After you can add all your Custom CSS Stylesheets.
2. Bootstrap Framework - JavaScript Library.
Note: Always add JavaScript above the closing body tag i.e <script src=""></script></body>
Why to add JavaScript above the closing tag: Because it increase the speed of loading speed of your website OR The website open very fast at Client end.
A) Always add jQuery library first. Other wise you can't able to use BOOTSTRAP JavaScript functionality like (Modal, Dropdown and many more).
Want to know about Bootstrap JavaScript library and component that bootstrap provide. Reference link: http://getbootstrap.com/js/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
B) Then add BOOTSTRAP JavaScript file.
<script src="js/bootstrap.min.js"></script>
C) After that you can use you own custom JavaScript file OR you can use jQuery Plugins.
3. Difference Between Bootstrap 3 & Bootstrap 4?
Bootstrap 3.3.6 is the current stable version when is used for web development & Bootstrap 4 is the testing version. Developers are testing Bootstrap 4. Bootstrap 4 is the next version of Bootstrap 3 with more functionality.
4. Difference Between Angular JS 1 & Angular JS 2?
Angular JS 1 is the pervious version of Angular JS 2.
I am working on improving the UI of a website, and needed to use Semantic JS with it. The website was written in Angular, and the one piece of Semantic functionality that was not working was Dropdowns. The styling worked fine, but as soon as I tried to initialize the dropdown with a
$('...').dropdown({options});
I encountered a "$('...').dropdown is not a function" error. Looked around and nowhere mentioned the answer to my problem.
Since SemanticJS modifies the $ operator from Jquery, Jquery needs to be included before SemanticJS.
//Index.html//
<html>
<head>
</head>
<div ng-view></div>
<script src="jquery.blah.min.js"></script>
<script src="semantic.min.js"></script>
</html>
Recently, I have an error regarding to my pagination that can't be updated after filter. Luckily, this was managed, however, now I'm dealing with a conflict regarding to the usage of ui-bootstrap. As I have my project, Im using,
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Based on the codes that I'm relaying with they used,
<script src="angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"; type="text/javascript"></script>
***Here's the thing, I do have as well a datepicker in my codes. But when I used the
<script src="angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"; type="text/javascript"></script>
this datepicker doesn't work. If now I will switch to my formerly ui-bootstrap
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
, now the pagination after filter can't be used but the datepicker will work. Any ideas how to solve this or what I'm going to do? thanks!
From what I understand, your problem is due to directive conflict; e.g. you have a custom directive defined called "datepicker":
angular.module('App').directive('datepicker', ...
That's going to cause problems because UI-Bootstrap also defines a directive with the same name. The simplest solution would be to simply exclude the datepicker module from UI-Bootstrap.
https://angular-ui.github.io/bootstrap/
On their website, you can choose "create a build". It will allow you to download a version of UI-Bootstrap custom-tailored to your needs by adding and removing certain modules, like the datepicker.
Then you will drop the file into your HTML:
<script src="path/to/your/ui-bootstrap.min.js"></script>
I notice you are using Bower to manage your dependencies. Unfortunately, Bower can't work with a custom UI-Bootstrap build; you'll have to manage the file yourself (put it in a subdirectory, like "assets/").
In my angular project, I am planning to have a separate .js file for each page and a separate .js file for each service.
However, as I begin to code, I realized that I have a lot of import statement in my index.html. This would cause user having to load all the .js file even if they might not need it.
An example of the .js for my index.html
<!-- JS -->
<script src="js/vendor/angular.js"></script>
<script src="js/app/app.js" ></script>
<!-- controllers -->
<script src="js/app/controllers/roomController.js"></script>
<script src="js/app/controllers/dashBoardController.js"></script>
<!-- services -->
<script src="js/app/services/dashBoardService.js"></script>
<script src="js/app/services/roomService.js"></script>
<script src="js/app/services/chatService.js"></script>
<script src="js/app/services/videoService.js"></script>
Is there any solution to this?
It's really a best practice to have each controller, each service, each directive… in a separate file, so you're doing it in the right way.
However, as you notice, it's better for the user (and for the server!) to download a minimal number of files. Your index.html is fine for development, but in production, you must compress all your files in in one, typically with a tool like UglifyJS or YUI Compressor.
This is a known issue, especially with large projects. A viable solution is using RequireJs . You can find plenty of resources on the web about that, for instance you can try this.
I had exactly the same problem so decided to use RequireJS to allow on-demand loading of my angularJS scripts. I created a wrapper called angularAMD that hopefully can help you integrate RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/
Yeoman built out my first angular app, and in the index.html, it placed the following code that I'm guessing will be consumed by some build process (I don't know what that process is yet.)
But in the index.html, it broke up the scripts between these 3 comment groups. The last one seems to be where my code goes, but the first 2 are somewhat arbitrary in their distinctions. I'm trying to figure out what they mean, so I know where to insert these pieces that I need to add to make the app usable:
<script src="bower_components/angular-ui-calendar/calendar.js"></script>
<script src="bower_components/ng-grid/ng-grid-2.0.7.min.js"></script>
Do they belong in the first group (build:js scripts/plugins.js) or the second (build:js scripts/modules.js)? And why are jquery and angular outside both of those groups. Feels like I need some kind of handle on what those directives do, but googling for build:js doesn't produce results that seem to be relevant.
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
An explanation or pointers to the relevant docs would be very helpful.
Yeoman built out my first angular app, and in the index.html, it
placed the following code that I'm guessing will be consumed by some
build process (I don't know what that process is yet.)
The "build process" is grunt, but more specifically the grunt-usemin plugin is what will be using the directives inside the comment blocks in the index.html.
Do they belong in the first group (build:js scripts/plugins.js) or the
second (build:js scripts/modules.js)?
That's a decision for you to make. Keep in mind that all the scripts included within each block will get concatenated and minified into a single script include in the built version of the index.html file. The "build:js scripts/plugins.js" instruction is telling the grunt build system that this is a javascript block and to create a plugins.js from the result of concatenating and minifying the contents of the block.
And why are jquery and angular outside both of those groups?
You can group and categorize your scripts however you want, but there are some best practices. For instance, you may want to place all the scripts that are owned by you in one block since they may change frequently. This may help improve caching performance on the client since changes to your scripts should probably not cause all scripts to be re-downloaded. You probably wouldn't want to include jQuery and Angular scripts in the same block as your code because it would build a very large (monolithic) script that would have to be reloaded every time you update your code.
I typically organize my groups either by categories, such as 3rd party plugins, libraries, or modules. Sometimes, if performance is key, I may think about my groups in terms of how frequently I expect the scripts in each category to be updated, that way the user isn't being forced to download code that hasn't really changed.
Feels like I need some kind of handle on what those directives do, but
googling for build:js doesn't produce results that seem to be
relevant.
Read the docs at the grunt-usemin plugin page to learn all about how to use the "directives" you are seeing.
I think jQuery and Angular are outside because by default, grunt cdnify changes those paths to use Google's CDN.