0

我正在尝试学习 AngularJS，并因此制作了一个非常简单的 Angular 应用程序。一切正常，直到我试图通过制造工厂来拆分我的控制器（我认为这是正确的做法）。现在我的主/索引只显示一个空页面，与工厂实施之前一样，表单正在显示。我想不通！注意：我正在使用 Yeoman 的 Angular 设置。

文件夹结构：

  • 控制器
    • about.js
    • 转换.js
    • main.js
  • 应用程序.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: '/'
      });
  });
4

1 回答 1

0

转换.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);
    };

}]);

应用程序.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: '/'
      });
  });
于 2014-12-23T02:29:38.093 回答