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.
Related
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.
I would like to combine twitter bootstrap together with angular material. I found bootstrap material design https://github.com/FezVrasta/bootstrap-material-design
Angular material uses following declarations;
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-animate/angular-animate.min.js"></script>
<script src="../bower_components/angular-aria/angular-aria.min.js"></script>
<script src="../bower_components/angular-material/angular-material.min.js"></script>
For bootstrap material, the declarations in the documentation are like this;
<!-- Material Design fonts -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/icon?family=Material+Icons">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">
Will there be conflict if I include all the links? I am quite confused on how to combine angular material and bootstrap.
It is better not to mix Bootstrap and Angular Material because bootstrap's grid system (as of version 3~) is based on CSS display table and Angular Material is using display flex. So as suggested in this answer you're likely to get CSS conflicts and your application size will increase.
If you need better browser support and you're using Bootstrap, I have written Angular Bootstrap Material which is an AngularJS version of Bootstrap material design theme. It eliminates the dependency on jQuery and bootstrap's JavaScript and supports form validation using ng-messages.
You can install from bower via bower install abm.
I'm experimenting with the Angular UI Bootstrap libraries (specifically modal) but I'm having trouble getting the right versions of each library loaded in the right order, but I keep coming up against the No module: template/accordion/accordion-group.html error. I've switched back to Bootstrap 2.3 but it's still there. My application header is below, can anyone spot any wrong versions or JS files out of order? I'm also using Angular UI Sortable, hence its inclusion.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
My app declaration looks like this:
var app = angular.module('myModule', ['ui', 'ui.bootstrap']);
Edit
I managed to get it working like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
and
var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);
did you download all the files? according to their docs
Files to download
Build files for all directives are distributed in several flavours:
minified for production usage, un-minified for development, with or
without templates. All the options are described and can be downloaded
from here. It should be noted that the -tpls files contain the
templates bundled in JavaScript, while the regular version does not
contain the bundled templates. For more information, check out the FAQ
here and the README here.
Alternativelly, if you are only interested in a subset of directives,
you can create your own build.
Whichever method you choose the good news that the overall size of a
download is very small: <76kB for all directives (~20kB with gzip
compression!)
Looks like your error is with a template not begin available or loaded. Maybe you missed the download which packaged the templates. In your case the accordian template isn't being loaded.
After reading the FAQs I'm also wondering if having both angular-ui cdns is causing your problem. The angular-ui is loading first without templates and then your loading angular-ui-bootstrap with templates.
Angular-ui-bootstrap FAQ
This project comes with several deliverables described here:
https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If
the roles of those files are not clear for you just pick
ui-bootstrap-tpls-[version].min.js, but be sure to include only one
file in your project.
You're showing this
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
Try just loading
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
More info on the builds from github
the excerpt i'm reading is
Now it should be clear that files with the -tpls in their name have
bootstrap-specific templates bundled with directives. For people who
want to take all the directives and don't need to customize anything
the solution is to grab a file named
ui-bootstrap-tpls-[version].min.js. If, on the other hand default
templates are not what you need you could take
ui-bootstrap-[version].min.js and provide your own templates, taking
the default ones
(https://github.com/angular-ui/bootstrap/tree/master/template) as a
starting point.
Did you add 'ui.router' and 'ui.sortable' as dependency in your app.js file ?
var myApp = angular.module('myApp', ['ui.router','ui.sortable']);
I would use a package manager such as Bower or WebPack to manage your client side dependencies.
According to the Angular UI docs you only need to add:
AngularJS and Bootstrap CSS. No need for jQuery.
And then you should initialize your Angular App module with ui.bootstrap dependency:
angular.module('myModule', ['ui.bootstrap']);
== UPDATE
According to this example, this should be everything you need:
index.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
```
app.js
var myapp = angular.module('sortableApp', ['ui.sortable']);
Let me know if this helps you
I have an existing CSS file that I would like to include in my ExtJS production build.
I am using a custom theme. I know I can go to MyApp/packages/myCustomTheme/sass/etc/ and use an #import in the all.scss file. But that uses the #import in the production file.
I'm hoping there is a way that I can get my existing CSS file compressed with the rest of my app's CSS.
To include your custom css file in your production build, you can include the stylesheet above the <!-- <x-compile> --> comment in your index.html. So your index.html should look like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>YourAppName</title>
<link rel="stylesheet" href="link-to-custom.css">
<link rel="stylesheet" href="link-to-another-custom.css">
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<link rel="stylesheet" href="bootstrap.css">
<script src="ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script src="app/app.js"></script>
<!-- </x-compile> -->
</head>
<body></body>
I don't know if there is better way of doing this. So far this has worked for me. Hope this helps.
According to the guide, we should be placing #import statements in etc/all.scss.
I found that in doing this, any imported files were in fact compiled in our theme's css file. Imports were not used in the production build.
http://docs.sencha.com/extjs/4.2.1/#!/guide/theming - see the section on "Adding Custom Utility SASS"
i'm trying to update my sencha app from Extjs2.0 to ExtJS 3, but i'm finding a bit difficulty in it.
actually i developed that application in ExtJS2 but now i have to use the grid panel which is present in Extjs3.
so when i include the extjs3 in the current html file my whole app crashes please help....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Picker</title>
<link rel="stylesheet" href="resources\css\sencha-touch.css" type="text/css">
<link rel="stylesheet" href="resources\css\ext-all-css.css" type="text/css">
<script type="text/javascript" src="ext-touch.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src\Stocking.js"></script>
<script type="text/javascript" src="src\Datafile.js"></script>
<script type="text/javascript" src="src\index.js"></script>
<style>
body {
background-color: #286999;
margin: 0;
padding: 0;
}
</style>
</head>
<body></body>
</html>
You should look at the Official Sencha migration guide first. From there, you should identify specific parts of your application that are breaking. If it is a layout issue, start commenting out individual panels one at a time to find the problem. Once you've identified the panel with the layout issue, start commenting out individual widgets that might be causing the issue.
You should also take advantage of your debugging tools such as Firebug. Use the call stack navigator. You may be able to use it to locate the specific control with the problem.
EDIT: official guide is gone from the interwebs... try http://www.sencha.com/forum/showthread.php?70352-Upgrading-to-Ext-3
Why are you including Sencha Touch and Ext JS on the same page? If you're planning on trying to run an Ext JS GridPanel on a mobile site... you probably aren't going to have an optimal user experience.
Also, just FYI, Ext JS 3 is not new (current version is 3.3). It came out about a year and a half ago, and Ext 4 is due to hit beta within the next couple of months. Might want to consider holding off on a large migration effort to 3.x if possible.