suchen

Heim  >  Fragen und Antworten  >  Hauptteil

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

想在angularjs中引入其他js文件,这里想引入妹子ui中的图片轮播插件,类似的需求。通常这种需要在页面中内嵌js
比方说,类似这样的,如果直接html里引入js插件,然后页面中这样写的话,没有作用,而且这种是需要jQuery的,虽然我在angular中并没有使用jQuery... 请问该怎样配置angular呢?

$(function() {
  $('.am-slider').flexslider({
    // options
  });
});
習慣沉默習慣沉默2744 Tage vor996

Antworte allen(3)Ich werde antworten

  • 我想大声告诉你

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

    1、一次性全在html加载
    2、用oclazyload插件
    3、自己使用angular的$q 写一个加载文件的服务

    Antwort
    0
  • 高洛峰

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

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

    Antwort
    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) {

    Antwort
    0
  • StornierenAntwort