CODEWITHSUNDEEP
angularjstwitter-bootstrap
Jay
Jay

Reputation: 153

AngularJS Bootstrap file include sequence

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?

2) what is difference between AngularJS 1 & AngularJS 2 3) what is difference between bootstrap 3 & bootstrap 4

Upvotes: 0

Views: 853

Answers (1)

G Naga Subrahmanyam
G Naga Subrahmanyam

Reputation: 308

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

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

Upvotes: 0

Related Questions