搜尋

首頁  >  問答  >  主體

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

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

$(function() {
  $('.am-slider').flexslider({
    // options
  });
});
習慣沉默習慣沉默2821 天前1075

全部回覆(3)我來回復

  • 我想大声告诉你

    我想大声告诉你2017-05-15 16:58:02

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

    回覆
    0
  • 高洛峰

    高洛峰2017-05-15 16:58:02

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

    回覆
    0
  • 阿神

    阿神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) {

    回覆
    0
  • 取消回覆