Question

在我的索引页面中，我可以将工厂和控制器调用如下：

<script src="scripts/providers/offresFactory.js"></script>
<script src="scripts/controllers/offreController.js"></script>
<script src="scripts/providers/usersFactory.js"></script>
<script src="scripts/controllers/usersController.js"></script>
<script src="scripts/providers/newOffreFactory.js"></script>
<script src="scripts/controllers/newOffreController.js"></script>
<script src="scripts/providers/inscriptionFactory.js"></script>
<script src="scripts/controllers/inscriptionController.js"></script>
<script src="scripts/controllers/resultController.js"></script>
<script src="scripts/controllers/homeController.js"></script>
<script src="scripts/providers/searchFactory.js"></script>

无论如何在app.js中调用这些文件而不是在index.html页面中调用它们？

Answer 1

如果您想要纯粹的前端解决方案，可以尝试：

//app.js

(function(){
    document.write('<script src="scripts/providers/offresFactory.js"></script>');
    document.write('<script src="scripts/providers/offreController.js"></script>');
    document.write('<script src="scripts/providers/usersFactory.js"></script>');
    ...
})();

//since Angular 1.x not support lazy-loading modules/components, 
//you have to write all components to document before bootstrap the app
angular.module('app', []);

强烈建议使用像webpack或gulp这样的捆绑帮助生成单个js文件，而不是将多个js文件添加到DOM

Answer 2

您可以将代码连接到一个JS文件（app.js）。

我使用gulp来连接和缩小我的javascript。

这是我在gulpfile.js中使用的连接的Gulp任务：

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    combiner = require('stream-combiner2'),
    header = require('gulp-header'),
    pkg = require('./package.json'),
    banner = ['/**',
        ' * <%= pkg.name %> - <%= pkg.description %>',
        ' * @version v<%= pkg.version %>',
        ' * @author <%= pkg.author %>',
        ' */',
        ''
    ].join('\n');

var PATHS = {
    JS: ['./src/**/*.js', '!./src/**/*.min.js']
};

gulp.task('concatjs', function() {
    var combined = combiner.obj([
        gulp.src(PATHS.JS), // Path to my JS files.
        concat('app.js'), // generated file's name
        header(banner, {
            pkg: pkg
        }),
        gulp.dest('./www/js/') // Directory destination
    ]);

    // any errors in the above streams will get caught
    // by this listener, instead of being thrown:
    combined.on('error', console.error.bind(console));

    return combined;
});

在我的终端中，我运行：gulp concatjs

我指定的路径将把我的./src文件夹中的所有js文件（除了以.min.js结尾的文件除外）并将它们连接成一个大文件：app.js在我的目标目录中： ./www/js。标题只是一些信息（作者，版本，描述，来自package.json）它在js文件的开头添加了注释。

运行任务后，将在您指定的位置生成app.js文件。然后，您只应在app.js中加载index.html。

请记住安装所需的节点包：

npm install gulp-concat stream-combiner2 gulp-header gulp

建议全球安装gulp：

npm install -g gulp

顺便说一句，使用此方法，您创建的每个新js文件将连接到app.js而无需进一步配置。只需确保在源路径中创建它。这样，您就可以拥有控制器目录，服务目录，并使您的应用程序结构更加清晰。

祝你好运，如果您尝试的话，请告诉我它是否有效：）

Answer 3

我看到了几种方式

<强> SystemJS

首先，您可以将ng1类编写为ES6模块，以便它们可以由SystemJS等模块加载器处理，请查看此guide以获得一步一步的过程。它需要一些配置并可能重写现有的代码库。

即使在配置之前，您也可以尝试使用最少的代码来查看它是否适合您只是通过添加

尝试做的事情。

<script src="jspm_packages/system.js"></script>
<script src="jspm.conf.js"></script>
<script>
    System.import('app/bootstrap')    
</script>

当然app / bootstrap需要使用import语句

import angular from 'angular';
import mainModule from './main';

angular.element(document).ready(function() {
    angular.bootstrap(document, [mainModule.name]);
});

<强>角异步装载机

第二次机会是使用angular-async-loader，我没有经验。您将再次需要使用此语法将ng类定义为模块

define(function (require) {
    var app = require('../app');

    // dynamic load services here or add into dependencies of state config 
    // require('../services/usersService'); 

    app.controller('usersCtrl', ['$scope', function ($scope) {
        // shortcut to get angular injected service. 
        var userServices = app.get('usersService');

        $scope.userList = usersService.list();
    }]);

});

此方法也不需要太多配置，您只需安装带有凉亭的模块

bower install https://github.com/subchen/angular-async-loader.git

它还支持UIRouter。

从app.js调用控制器和工厂

3 个答案: