AngularJs CoffeeScript Grunt

Posted 2023-03-03

【中文标题】AngularJs CoffeeScript Grunt

【英文标题】：

【发布时间】：2017-09-30 21:42:48

【问题描述】：

我正面临一个代码优化问题，即 mangle。我使用 angular 和 require ，除了服务/工厂情况外，一切正常。有一些例子（helloService.coffee）

define 'HelloService', [], ->
   'use strict'
   HS = ($timeout) ->
      sayHello: (name) ->
        $timeout ->
          console.log 'Hello: ' + name
        ,2000
   HS.$inject = ['$timeout']
   HS

在控制器中我做了这样的事情：(mainController.coffee)

define 'MainController', ['HelloService'], (HS) ->
  'use strict'
  MC = ($scope) ->
    HS.sayHello 'Stack Overflow' # it return sayHello is not a function
    # do something with scope here
  MC.$inject = ['$scope']
  MC

还有 app.coffee 的样子：

define 'app', ['angular', 'HelloService', 'MainController'],(angular, HelloService, Maincontroller)->
  app = angular.module 'app', []
  app.service 'helloService', HelloService
  app.controller 'mainController', MainController

  app.bootstrap = ->
    angular.element(document).ready ->
      angular.bootstrap document, ['app']
  app

在某个地方（main.coffee）

requirejs.config
  baseUrl: ''
  paths:
    angular:['cdn_url','angular_fallback_in_project_dir']
  shim:
    angular:
       exports: 'angular'
       deps: []

require ['app'], (app) ->
  app.bootstrap()

这让代码更容易维护，而且它真的很友好。 如果我尝试类似：

hs = new HS()

然后我可以调用 hs.saylHello 'String' 但现在 $timeout 未定义或有时不起作用。

【参考方案1】：

经过长时间的代码检查

define 'MainController', [], ->
   'use strict'
   MC = ($scope, HelloService) ->
       HS.sayHello 'Stack Overflow' # it return sayHello is not a function
       # do something with scope here
   MC.$inject = ['$scope', 'HelloService']
   MC

代替使用 require 来加载服务“HelloService”，我们将该工作交给 Angular。这种选择的原因是，在内部 $inject 我们使用 new 关键字将参数（在列表中）称为实例，因此所有属性都可用。 但是如果你不使用 Angular 我们必须这样写

define 'MainController', ['HelloService'], (HS) ->
   'use strict'
   MC = ($scope) ->
     HSS = new HS()
     HSS.sayHello 'Stack Overflow' # it return sayHello is not a function
     # do something with scope here
   MC.$inject = ['$scope']
   MC

因此行为是相同的。就是这样。