Question

我正在尝试学习AngularJS，并因此制作一个非常简单的Angular应用程序。一切都在运作，直到我试图通过建立一个工厂来拆分我的控制器（我想这是正确的方法）。现在我的main / index只显示一个空页面，在实现工厂之前，表格正在显示。我无法弄清楚！注意：我正在使用Yeoman的Angular设置。

FOLDERSTRUCTURE：

控制器
- about.js
- conversion.js
- main.js
app.js

这是我的主要/索引页面（main.html）：

<div ng-controller="MainCtrl as measure">

<form role="form">
  <h2>BMI udregner:</h2>
  <div class="form-group">
    <label for="exampleInputEmail1">Vægt</label>
    <input type="number" class="form-control" ng-model="measure.weight">
    <select ng-model="measure.inMass" class="form-control input-sm" >
      <option ng-repeat="m in measure.mases">{{m}}</option>
    </select>
  </div>

  <div class="form-group">
    <label for="exampleInputEmail1">Højde</label>
    <input type="number" class="form-control" ng-model="measure.height">
  </div>

  <div>
    <b>Total:</b> 
    <span>
      {{ measure.total(measure.inMass) }}
    </span>
  </div>
</div>
</form>

我的控制器（main.js）：

'use strict';

/**
 * @ngdoc function
 * @name measureBmiApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the measureBmiApp
 */
angular.module('measureBmiApp', ['Conversion'])
  .controller('MainCtrl', ['weightConverter', function(weightConverter) {
    this.height = 180;
    this.weight = 90; 
    this.inMass = 'kg';
    this.mases  = weightConverter.mases;

    this.total = function total(outMass) {
        return weightConverter.convertMass(this.weight / (this.height / 100 * this.height / 100), outMass);
    };

  }]);

我的工厂（conversion.js）：

'use strict';

angular.module('Conversion', [])
    .factory('weightConverter', function() {
        var mases  = ['kg', 'lb'];
        var kgToLb = {
            kg: 1,
            lb: 2.2046226
        };
        var convertMass =  function (amount, outMass) {
            return amount * kgToLb[outMass];
        };

        return {
            mases: mases,
            convertMass: convertMass
        };
    });

app.js：

'use strict';

/**
 * @ngdoc overview
 * @name measureBmiApp
 * @description
 * # measureBmiApp
 *
 * Main module of the application.
 */
angular
  .module('measureBmiApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Answer 1

conversion.js

angular.module('measureBmiApp')
    .factory('weightConverter', ['weightConverter', function(weightConverter) {
    'use strict';
    var mases  = ['kg', 'lb'];
    var kgToLb = {
        kg: 1,
        lb: 2.2046226
    };
    var convertMass =  function (amount, outMass) {
        return amount * kgToLb[outMass];
    };

    return {
        mases: mases,
        convertMass: convertMass
    };
}]);

main.js

angular.module('measureBmiApp')
    .controller('MainCtrl', ['weightConverter', function(weightConverter) {
    'use strict';
    this.height = 180;
    this.weight = 90; 
    this.inMass = 'kg';
    this.mases  = weightConverter.mases;

    this.total = function total(outMass) {
        return weightConverter.convertMass(this.weight / (this.height / 100 * this.height / 100), outMass);
    };

}]);

app.js

'use strict';

/**
 * @ngdoc overview
 * @name measureBmiApp
 * @description
 * # measureBmiApp
 *
 * Main module of the application.
 */
angular
  .module('measureBmiApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

AngularJS工厂不起作用（Yeoman）

1 个答案: