Каков правильный порядок загрузки файлов angularjs, bootstrap, sp js и jquery?

У меня есть очень одно приложение, которое должно использовать bootstrap, ui bootstrap, angularjs и jquery. Функционально кнопка ниже работает нормально, но я не получаю стилизацию, как она должна: Проверьте оповещения здесь: http://angular-ui.github.io/bootstrap/Каков правильный порядок загрузки файлов angularjs, bootstrap, sp js и jquery?

Файл html выглядит следующим образом: его приложение, размещенное в sharepoint.

<%-- 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>

Однако

enter image description here

источник

2014-11-12 Luis Valencia

Обновленный ответ:

В настоящее время лучший способ справиться с этим для угловых 2 и 4 является используйте такие инструменты, как SystemJS или Webpack.

Оригинальный ответ:

почему бы вам не использовать require.js организовывать файлы JS в модули? Вы можете определить зависимость каждого модуля, и они будут загружены по требованию, как в образце ниже:

<!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>

и на вашем main.js файл вы будете загружать зависимости:

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']]); 
    }); 
});

источник

2014-11-12 19:00:50 guilhebl

Хороший ответ, но это было бы еще одна вещь для загрузки. – SoluableNonagon

да, но даже хотя require.js действительно легкий, это только один JS-файл, и вы получите преимущества от необходимости не беспокоиться о том, e файлов. – guilhebl

На мой взгляд

1. jQuery - doesn't depend on other things in this list 
2. Bootstrap - CSS and JS 
3. AngularJS - if angular finds jquery, it will use it in place of jqlite 
4. Bootstrap UI - this has a dependency on Angular right? this is AngularUI right?

источник

2014-11-12 18:07:30 SoluableNonagon

тестирования, кстати, bootstrap (2) также имеет файл acommpanion .js –

ах, да, но если я правильно помню, это зависит от jQuery – SoluableNonagon

Я havent посмотрел на bootstrap ui через некоторое время, это зависит от определенной версии бутстрапа, не так ли? – SoluableNonagon

Каков правильный порядок загрузки файлов angularjs, bootstrap, sp js и jquery?

ответ

Смежные вопросы