I have no idea why this doesn't work. What I'm doing wrong here? I have no errors in console but html from main.html and about.html doesn't load.
When I use controller directly in html it does work well but when I use above code ng-view doesn't get html from main.html and about.html files.
app.js
angular
.module('invoice2', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'InvoiceController'
})
.otherwise({
redirectTo: '/'
});
});
about.js
angular.module('finance2', [])
.factory('currencyConverter', function() {
var currencies = ['USD', 'EUR', 'CNY'];
var usdToForeignRates = {
USD: 1,
EUR: 0.74,
CNY: 6.09
};
var convert = function (amount, inCurr, outCurr) {
return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
};
return {
currencies: currencies,
convert: convert
};
});
angular.module('invoice2', ['finance2'])
.controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = currencyConverter.currencies;
this.total = function total(outCurr) {
return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
};
this.pay = function pay() {
window.alert("Thanks!");
};
}]);
index.html
<body ng-app="invoice2">
<div class="container">
<div ng-view=""></div>
</div>
</body>
You can't define a module more than once
You are doing
and later
which overwrites the first one. Instead, have one array of dependencies, and fetch the module later.