angular.js - angularjs 如何引入其他js文件
習慣沉默
習慣沉默 2017-05-15 16:56:02
0
3
992

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

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

全部回复(3)
我想大声告诉你

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

小葫芦

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

阿神

算是自问自答吧,目前使用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) {
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板