Angular + Laravel：通过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

Where is your index.blade.php located? templateUrl should be the path to the template from whatever file loads the app.js code (I'm assuming that's index.blade.php). So if that's in the root directory, templateUrl: '/public/templates/inicio.html'

As for the issue with the # , read this somewhat related question

Answer 2

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.