我正在尝试学习 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: '/'
});
});