使用AngularJS进行文件哈希处理

Question

使用AngularJS进行文件哈希处理

javascriptangularjshashgruntjsrequirejs

12

我目前在基于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

问题
我想知道是否有一种方法可以在包含新文件时对文件进行哈希处理？

还有其他解决此问题的方法吗？

提前感谢您

- Shrujan Shetty

请分享service1和service2的源代码。 - Steve Hynding

@steve，我猜Service 1和Service 2只是为了解决问题，这可以是任何由控制器使用的JS文件。 - Abhimanyu

我的想法是service1和service2文件没有正确设置；即它们没有使用define进行设置，或者没有正确注册它们各自的提供程序以供控制器查找。 - Steve Hynding

你能发布你的GruntFile吗？ - Michele Ricciardi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ciril sebastian · Accepted Answer

如何设置模块。您的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
    }]);
});