想在angularjs中引入其他js文件,这里想引入妹子ui中的图片轮播插件,类似的需求。通常这种需要在页面中内嵌js比方说,类似这样的,如果直接html里引入js插件,然后页面中这样写的话,没有作用,而且这种是需要jQuery的,虽然我在angular中并没有使用jQuery... 请问该怎样配置angular呢?
$(function() { $('.am-slider').flexslider({ // options }); });
1、一次性全在html加载2、用oclazyload插件3、自己使用angular的$q 写一个加载文件的服务
使用 https://github.com/revolunet/angular-carousel 能满足你的要求
算是自问自答吧,目前使用requirejs解决项目中的依赖问题。首先main.js是整个ng应用的入口,这里来添加要加载的插件
main.js
'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) {
1、一次性全在html加载
2、用oclazyload插件
3、自己使用angular的$q 写一个加载文件的服务
使用 https://github.com/revolunet/angular-carousel 能满足你的要求
算是自问自答吧,目前使用requirejs解决项目中的依赖问题。
首先
main.js
是整个ng应用的入口,这里来添加要加载的插件使用的时候 app.js ,index.html页面有一个controller来启动应用