angular.js - angularjs 如何引入其他js文件

Question

想在angularjs中引入其他js文件，這裡想引入妹子ui中的圖片輪播插件，類似的需求。通常這種需要在頁面中內嵌js
比方說，類似這樣的，如果直接html裡引入js插件，然後頁面中這樣寫的話，沒有作用，而且這種是需要jQuery的，雖然我在angular中並沒有使用jQuery... 請問該怎麼配置angular呢？

我想大声告诉你 · Answer

1、一次性全在html載入
2、用oclazyload外掛
3、自己用angular的$q 寫一個載入檔的服務

高洛峰 · Answer

使用 https://github.com/revolunet/angular-carousel　能滿足你的要求

阿神 · Answer

算是自問自答吧，目前使用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) {