Heim > Fragen und Antworten > Hauptteil
想在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) {