Angular + Laravel : loading view via ngRoute

Question

I'm facing this problem when combining Laravel and Angular:

Following a very simple tutorial I found online, I was trying to load a view using the ng-view directive. However, I am unable to actually load the template. This is my app.js code:

(function() {

    var app = angular.module('profuApp', ['ngRoute']);

    app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/inicio', {
                templateUrl: '../templates/inicio.html',
                controller: 'homeCtrl'
            })
            .otherwise({ redirectTo: '/' });
    }]);

    app.controller('homeCtrl', ['$scope', '$http', function($scope, $http) {
        $http.get('http://localhost:8888/profucom/public/getData').success(function(data) {
            $scope.datos = data;
        });
    }])

})();

My file tree:

app/
bootsrap/
public/
   js/
      angular.min.js
      angular-route.min.js
      app.js
   templates/
      inicio.html
. . .

The site loads normally, but when I watch the source code, instead of watching the template inside of inicio.html, this happens...

Code with within my index.blade.php file

<div ng-view></div>

Code I see in the browswer's source code

<!-- ng-view: -->

The network tab on Chrome does not show a 404 error trying to load the view.

What I've tried so far:

1. Placing templates inside the js folder (templateUrl: 'templates/inicio.html')
2. Placing templates inside the public folder (templateUrl: '../templates/inicio.html')
   • also, templateUrl: '/public/templates/inicio.html'
3. Placing templates inside the root folder (templateUrl: '/templates/inicio.html')
4. Placing just the file inside the js folder: (templateUrl: 'inicio.html')

None of the above seem to work. Any help, please?

EDIT I also see this happenning in the url: instead of myapp/public/inicio it loads like myapp/public/inicio#/

Answer 1

Once again, it was nothing but a human mistake. I'm sorry and thankful at the same time for those who spent time trying to answer and comprehend my problem. This is the solution:

I was using the latest stable version directly from a CDN, version 1.3.5; however - and just to see what'd happen - I changed to version 1.2.28. What's the difference? A little syntax.

Instead of what I did above...

app.controller('homeCtrl', ['$scope', '$http', function($scope, $http) {
. . .

I did this:

app.controller('homeCtrl', function($scope, $http) { 
. . .

Changing from one version to another was the answer, and changing a little the syntax.

I hope this helps anyone as distracted as I was.