angulaire.js - Comment introduire d'autres fichiers JS dans AngularJS

Question

Je souhaite introduire d'autres fichiers js dans angulairejs. Ici, je souhaite présenter le plug-in de carrousel d'images dans l'interface utilisateur sœur, qui a des besoins similaires. Habituellement, cela nécessite d'intégrer js dans la page
Par exemple, quelque chose comme ça, si vous introduisez le plug-in js directement dans le html, puis l'écrivez comme ça dans la page, cela n'aura aucun effet, et cela nécessite jQuery, bien que je sois en angulaire, jQuery n'est pas utilisé... Comment configurer angulaire ?

$(function() {
  $('.am-slider').flexslider({
    // options
  });
});

Answer 1

1. Chargez tout en HTML en même temps
2. Utilisez le plug-in oclazyload
3. Utilisez le $q d'Angular pour écrire un service de chargement de fichiers

Answer 2

L'utilisation de https://github.com/revolunet/angular-carousel peut répondre à vos besoins

Answer 3

Posez et répondez simplement à vos propres questions. Actuellement, requirejs est utilisé pour résoudre les problèmes de dépendance dans le projet.
Tout d'abord main.js est l'entrée de l'ensemble de l'application ng Ici vous pouvez ajouter les plug-ins à charger

.

'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应用
    });
});

Lors de l'utilisation de app.js, la page index.html dispose d'un contrôleur pour démarrer l'application

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