VipPunkJoshers Droopy VipPunkJoshers Droopy - 4 months ago 9
AngularJS Question

Does not show the view AngularJS

I try to show a view with angular paths. the console does not throw any error or warning.

But equally the view is not displayed.
What am I doing wrong?

index.html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head></head>
<body>

<ng-view></ng-view>

<!-- build:js bower/vendor -->
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<!-- endbuild -->

<script src="./routes.js"></script>

<!-- build:app scripts/js || CUSTOMER -->
<script src="./components/customer/customerService.js"></script>
<script src="./components/customer/customerController.js"></script>
<!-- endbuild-->

</body>
</html>


routes.js

var _templateBase = './components';

angular.module('app', [
'ngRoute'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: _templateBase + '/customer/customer.html' ,
controller: 'customerController',
controllerAs: '_ctrl'
})
.otherwise({
redirectTo: '/'
});
}
]);


costomerService.js

angular.module('app', [])
.factory('customerService', function() {

});


costomerController.js

angular.module('app',[])
.controller('customerController', ['$scope', function($scope, customerService) {
//
}]);


It's wrong? Because the view is not displayed? I'm using obsolete mertodos, guide me lleguar many tutorials there.

Thanks so they can help.

Lex Lex
Answer

This creates your app because you have included the second parameter (an array of dependencies to inject):

angular.module('app', [
    'ngRoute'
])

Remove the second parameter on your other angular.module() definitions because that is causing a new app to be created each time.

angular.module('app') <-- no second parameter tells it to use the existing 'app' module 
    .factory('customerService', function() {

    });

angular.module('app') <-- no second parameter tells it to use the existing 'app' module
    .controller('customerController', ['$scope', 'customerService', function($scope, customerService) {
      //
    }]);

I added customerService to your injection array on your controller definition because the array elements have to match up exactly to your function parameters. Also, if you are using controllerAs syntax as you have done on your route definition then you may not want to inject $scope into your controller.