Question

我有一个非常单一的应用程序需要使用bootstrap，ui bootstrap，angularjs和jquery。功能上下面的按钮工作正常，但我没有得到应有的样式：检查警报样本在这里： http://angular-ui.github.io/bootstrap/

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

Answer 1

更新回答：

现在处理Angular 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']]);
    });
});

Answer 2

在我看来

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?

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

2 个答案: