想在angularjs中引入其他js文件,這裡想引入妹子ui中的圖片輪播插件,類似的需求。通常這種需要在頁面中內嵌js
比方說,類似這樣的,如果直接html裡引入js插件,然後頁面中這樣寫的話,沒有作用,而且這種是需要jQuery的,雖然我在angular中並沒有使用jQuery... 請問該怎麼配置angular呢?
$(function() {
$('.am-slider').flexslider({
// options
});
});
阿神2017-05-15 16:58:02
算是自問自答吧,目前使用requirejs解決專案中的依賴問題。
首先main.js
是整個ng應用的入口,這裡來新增要載入的插件
'use strict';
require.config({
baseUrl: 'js',
waitSeconds: 0,
paths: {
text: '../lib/require/text',
jquery: '../lib/jquery/dist/jquery',
angular: '../lib/angular/angular',
bootstrap: '../lib/bootstrap/dist/js/bootstrap',
bindonce: '../lib/angular-bindonce/bindonce.min',
ngtable: '../lib/ng-table/dist/ng-table',
ngBootstrap: '../lib/angular-bootstrap/ui-bootstrap',
ngBootstrapTpls: '../lib/angular-bootstrap/ui-bootstrap-tpls',
uiRoute: '../lib/angular-ui-router/release/angular-ui-router',
oclazyload: '../lib/oclazyload/dist/ocLazyLoad',
datePicker: '../lib/angularjs-datetime-picker/angularjs-datetime-picker',
app: 'app',
common: 'common',
host:'../host',
},
shim: {
'angular': {
exports: 'angular'
},
'bootstrap':{
deps:['jquery']
},
'bindonce': {
deps: ['angular']
},
'ngtable': {
deps: ['angular']
},
'ngBootstrap': {
deps: ['angular']
},
'ngBootstrapTpls': {
deps: ['ngBootstrap', 'angular']
},
'uiRoute': {
deps: ['angular']
},
'oclazyload': {
deps: ['angular']
},
'datePicker': {
deps: ['angular']
},
'myDatePicker': {
deps: ['jquery']
}
},
priority: [
'angular'
]
});
require([
'angular',
'jquery',
'app',
'routes',
'bootstrap',
], function(angular) {
$(document).ready(function() {
var appName = $('body').attr('data-ngApp');
angular.bootstrap(document, [appName]); //手动启动ng应用
});
});
使用的時候 app.js ,index.html頁面有一個controller來啟動應用程式
define(['angular',
'bindonce',
'ngBootstrap',
'ngBootstrapTpls',
'ngtable',
'uiRoute',
'oclazyload',
'datePicker',
],
function(angular) {
var myApp = angular.module('myApp', ['pasvaz.bindonce', 'ngTable', 'ui.bootstrap', 'ui.router', 'oc.lazyLoad','angularjs-datetime-picker']);
myApp.controller('admin', ['$scope','$timeout', function($scope, $timeout) {