加载angularjs、bootstrap、sp js库和jquery的正确顺序是什么？_Jquery_Css_Angularjs_Twitter Bootstrap_Sharepoint

加载angularjs、bootstrap、sp js库和jquery的正确顺序是什么？

jquery css angularjs twitter-bootstrap sharepoint

加载angularjs、bootstrap、sp js库和jquery的正确顺序是什么？,jquery,css,angularjs,twitter-bootstrap,sharepoint,Jquery,Css,Angularjs,Twitter Bootstrap,Sharepoint,我有一个非常单一的应用程序，需要使用引导、ui引导、angularjs和jquery。从功能上看，下面的按钮工作正常，但我没有得到应有的样式：请检查此处的警报示例： html文件如下所示，它是一个sharepoint托管的应用程序 <%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%> <%@ Page Inherits="Microsoft

我有一个非常单一的应用程序，需要使用引导、ui引导、angularjs和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>


{{alert.msg}
添加警报

然而

在我看来

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?

更新的答案：

现在，处理Angular 2和Angular 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>

测试，顺便说一句，bootstrap（2）也有一个acommpanion.js文件啊，是的，但如果我没记错的话，这取决于jquery。我有一段时间没看过bootstrap ui了，它取决于bootstrap的某个版本，不是吗？仍然没有按它应该的方式呈现：（如果您使用的是Angular Ui引导，那么您不应该使用引导自己的JS.yes，但即使require.JS非常轻量级，它也只是一个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']]);
    });
});