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:
js
folder (templateUrl: 'templates/inicio.html')public
folder (templateUrl: '../templates/inicio.html')
templateUrl: '/public/templates/inicio.html'
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#/
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
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.