使用 AngularJS 的文件散列答案

【问题标题】：File Hashing using AngularJS使用 AngularJS 的文件散列
【发布时间】：2016-12-18 02:31:41
【问题描述】：

我目前正在开发一个基于 angularAMD 的 Angular JS 项目。

链接：http://marcoslin.github.io/angularAMD/#/home

这里我们只包含控制器所需的必要依赖文件，而不是所有文件。

例如。

define(['angularAMD', 'common/services/service1', 'module1/services/service2',], function (angularAMD) {
    'use strict';

    angularAMD.controller('abcController', function ($scope, service1, service2) {

              // controller code goes here 
    }

我尝试过 Grunt Hashing 但是
Grunt 提供散列，但散列文件的位置会发生变化。

这不会改变单个控制器内文件的路径，从而导致应用程序无法运行。即service1, service2

问题
我想知道当我们包含新文件时是否有办法对文件进行哈希处理？

还有其他方法可以解决这个问题吗？

提前致谢

【问题讨论】：

请分享 service1 & service2 的源码
@steve service 1 and service 2 我想只是为了提出一个问题，这可以是控制器正在使用的任何 js 文件。
我的想法是 service1 & 2 文件设置不正确；即他们没有使用定义设置或没有正确注册他们的个人提供者以供控制器查找
你能发布你的 GruntFile 吗？

标签： javascript angularjs hash gruntjs requirejs

【解决方案1】：

你如何设置你的模块。你的 main.js 可能看起来像这样

'use strict';
require.config({
    waitSeconds: 0,
    urlArgs: "bust=v1.0.0",
    paths: {
        bootstrap: 'Scripts/bootstrap.min',
        jquery: 'Scripts/jquery-1.10.2.min',
        angular: 'Scripts/angular.min',
        angularRoute: 'Scripts/angular-route.min',
        angularAMD: 'Scripts/angularAMD.min',
        app: 'ngApp/app',
        appConfig: 'ngApp/app.config',

        /*register Services - Start*/
        service1: 'ngServices/Common/service1',
        service2: 'ngServices/module/service2',
        /*register Services - End*/

        /*register Filters - Start*/

        /*register Filters - End*/

        /*register Controllers - Start*/

        /*register Controllers - End*/



    },

    // specifying library dependencies
    shim: {
        'bootstrap':{ deps:['jquery']},
        'angular': { deps: ['jquery'], exports: 'angular' },
        'angularRoute': { deps: ['angular'] },
        'angularAMD': { deps: ['angular'] }
    },

    // define application bootstrap
    deps: ['app']
});

在你的 index.html 中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body data-ng-controller="appController as appCtrl" ng-cloak>
        <div >
                <ng-view></ng-view>
        </div>
    </div>
    <script data-main="main" src="Scripts/require.js"></script>
</body>
</html>

在你的控制器中

'use strict';
define(['angularAMD', 'service1', 'service2'],
function (angularAMD) {

    angularAMD.controller('abcController', ['service1', 'service2',
    function (service1, service1) {
        var self = this,
         // your code
    }]);
});

【讨论】：

但是基于模块加载文件的想法是没有意义的。因为在 main.js 中包含 service1 和 service2 将加载该文件。服务1：'ngServices/Common/service1'，服务2：'ngServices/module/service2'，
@Abhimanyu。不，它将动态加载。我们在 main.js 中指定 service1 或 service2 的路径。只有当我们定义 ['service1'..] by angularAMD' 时文件才会加载
哦，是的，没抓住重点，但是在大型项目中，在 main.js 中设置所有文件路径有意义吗？因为它会污染 main.js，我们有什么其他的想法吗？
是的，当然。在大型应用程序中，在单个文件中维护路径而不是在所有模块中指定路径名会很容易
Ciril，我们如何使用上述结构（文件散列）使用文件版本控制，我想将所有文件组合成单个文件。这是我的 requrejs grunt 任务jsfiddle.net/jgm4u8ok