Luis Valencia Luis Valencia - 2 months ago 13
jQuery Question

What is the right order to load angularjs, bootstrap, sp js libraries and jquery?

I have a very single app that needs to use bootstrap, ui bootstrap, angularjs and jquery. Functionally the button below works fine, but I am not getting the styling as it should: Check alerts sample here:
http://angular-ui.github.io/bootstrap/

The html file is as follows, its a sharepoint hosted app.

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<meta name="WebPartPageExpansion" content="full" />

<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<link href="../Content/bootstrap.css" rel="stylesheet" />

<!-- Ad<link href="../Content/bootstrap.css" rel="stylesheet" />d your JavaScript to the following file -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">

</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

<div class="container" ng-app="ui.bootstrap.demo">
<div ng-controller="AlertDemoCtrl">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
<button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
</div>
</div>

</asp:Content>


However

enter image description here

Answer Source

Updated answer:

Nowadays the best way to handle that for Angular 2 and 4 is to use tools such as SystemJS or Webpack.

Original answer:

why don't you use require.js to organize your JS files into modules? You can define each module's dependency and they will be loaded on demand, like in sample below:

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <meta charset="UTF-8">
        <title>MyApp v1.0</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
<body ng-cloak>

<div id="main">
    <div class="row">
        <!--Start Content-->
            <div id="main-content" ng-view></div>
        <!--End Content-->
    </div>
</div>

<!--End Container-->
<script data-main="js/main" src="lib/requirejs/require.js"></script>

</body>
</html>

and on your main.js file you will load the dependencies:

require.config({    
    baseUrl: 'js/',

    paths: {        
        jquery: '../lib/plugins/jquery/jquery-2.1.0.min',
        bootstrap: '../lib/plugins/bootstrap/bootstrap.min',
        angular: '../lib/components/angular/angular',
        angularCookies: '../lib/components/angular-cookies/angular-cookies',
        angularRoute: '../lib/components/angular-route/angular-route',
        myapp: '../lib/base/myapp',
    },  

    shim: {
        'jquery': {'exports': 'jquery'},
        'bootstrap' : {deps:['jquery']},
        'myapp' : {
                    deps : ['jquery', 'bootstrap', 'angular']
                },

        'angular': {
            'deps': ['jquery'],
            'exports': 'angular'
        },
        'angularResource': {
            'deps': ['angular'],
            exports: 'angularResource'
        },
        'angularRoute':{
            'deps': ['angular']
        }
    },  
    priority: [
        'angular'
    ]

});

window.name = 'NG_DEFER_BOOTSTRAP!';

require( [
    'angular',
    'app',
    'routes',
    'myapp'
], function(angular, app, routes, myapp) {
    'use strict';
    var $html = angular.element(document.getElementsByTagName('html')[0]);

    angular.element().ready(function() {
        angular.resumeBootstrap([app['name']]);
    });
});