angular.js - Bagaimana untuk memperkenalkan fail js lain dalam angularjs
習慣沉默
習慣沉默 2017-05-15 16:56:02
0
3
1025

Saya ingin memperkenalkan fail js lain ke dalam angularjs Di sini saya ingin memperkenalkan pemalam karusel imej dalam kakak ui, yang mempunyai keperluan yang serupa. Biasanya ini memerlukan membenamkan js dalam halaman
Contohnya, sesuatu seperti ini, jika anda memperkenalkan pemalam js terus ke dalam html, dan kemudian menulisnya seperti ini dalam halaman, ia tidak akan memberi kesan, dan ini memerlukan jQuery, walaupun saya dalam jQuery sudut tidak digunakan... Bagaimanakah saya harus mengkonfigurasi sudut?

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

membalas semua(3)
我想大声告诉你

1. Muatkan semua dalam html sekaligus
2. Gunakan pemalam oclazyload
3. Gunakan angular's ​​$q untuk menulis perkhidmatan memuatkan fail

小葫芦

Menggunakan https://github.com/revolunet/angular-carousel boleh memenuhi keperluan anda

阿神

Hanya tanya dan jawab soalan anda sendiri Pada masa ini, requirejs digunakan untuk menyelesaikan masalah pergantungan dalam projek.
Pertama sekali, main.js ialah pintu masuk ke seluruh aplikasi ng Di sini kami menambah pemalam untuk dimuatkan

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

Apabila menggunakan app.js, halaman index.html mempunyai pengawal untuk memulakan aplikasi

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) {
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan