In order to create an angular app with routes and controllers, I used the code below:
(function() {
angular.module('eCommerceApp', ['ngRoute'])
.config('$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/phonelist.html',
controller: 'mobilePhoneListController'
}).
when('/phone/:phoneSlug', {
templateUrl: 'partials/phonedetail.html',
controller: 'mobilePhoneDetailController'
}).
otherwise({
templateUrl: 'error/404.html',
});
})
.controller('mobilePhoneListController', ['$http', function($http) {
var thisObj = this;
thisObj.mobilePhones = [];
$http.get('/api/getallphones').then( function(data) {
thisObj.mobilePhones = data;
}, function(data) {
thisObj.mobilePhones = data || "Request Data Fail!";
});
}])
.controller('mobilePhoneDetailController', ['$http', function($http) {
var thisObj = this;
}])
})();
Prior to that, I imported 3 scripts: Angular, angular-route, and my app.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="/angular/e-commerce-app.js"></script>
Additionally, I included the website's main structure:
<html lang="en" ng-app="eCommerceApp">
<!-- ... -->
<body ng-view>
</body>
</html>
I also tried using <ng-view></ng-view> but I kept encountering this error.
Error: $injector:modulerr Module Error Failed to instantiate module eCommerceApp due to: Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20... at Error (native) at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416 ...