css - What is the right order to load angularjs, bootstrap, sp js libraries and jquery? -
i have single app needs utilize bootstrap, ui bootstrap, angularjs , jquery. functionally button below works fine, not getting styling should: check alerts sample here: http://angular-ui.github.io/bootstrap/
the html file follows, sharepoint hosted app.
<%-- next 4 lines 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" %> <%-- markup , script in next content element placed in <head> of 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 together css styles next 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 javascript next 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> <%-- markup in next content element placed in titlearea of page --%> <asp:content contentplaceholderid="placeholderpagetitleintitlearea" runat="server"> </asp:content> <%-- markup , script in next content element placed in <body> of 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
why don't utilize require.js organize js files modules? can define each module's dependency , loaded on demand, 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 main.js file load 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']]); }); }); jquery css angularjs twitter-bootstrap sharepoint
No comments:
Post a Comment