angular.js - angularjs 如何引入其他js文件-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

習慣沉默 2017-05-15 16:56:02

[AngularJS讨论组]

1320

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

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

習慣沉默

全部回复(3)

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

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

赞 +0

添加回复

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

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

赞 +0

添加回复

阿神2017-05-15 16:58:02 1楼

算是自问自答吧，目前使用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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>