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 ?

我想大声告诉你 · Answer

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

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

阿神 · Answer

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