Angular + Laravel:通过ngRoute加载视图

时间:2014-12-25 18:51:07

标签: javascript php angularjs laravel ng-view

组合Laravel和Angular时我遇到了这个问题:

在网上找到一个非常简单的tutorial之后,我试图使用ng-view指令加载视图。但是,我无法加载模板。这是我的app.js代码:

(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;
        });
    }])

})();

我的文件树:

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

网站正常加载,但是当我看到源代码时,而不是在inicio.html内观看模板,这就发生了......

我的index.blade.php文件中的代码

<div ng-view></div>

我在browswer的源代码中看到的代码

<!-- ng-view: -->

Chrome上的network标签在尝试加载视图时未显示404错误。

到目前为止我尝试过:

  1. 将模板放在js文件夹中(templateUrl:'templates / inicio.html')
  2. 将模板放在public文件夹中(templateUrl:'../ templates/inicio.html')
    • 另外,templateUrl: '/public/templates/inicio.html'
  3. 将模板放在根文件夹中(templateUrl:'/ templates/inicio.html')
  4. 只将文件放在js文件夹中:(templateUrl:'inicio.html')
  5. 以上都不适用。有什么帮助吗?

    编辑我也在网址中看到这种情况:而不是像myapp/public/inicio那样加载myapp/public/inicio#/

2 个答案:

答案 0 :(得分:0)

您的index.blade.php位于何处? templateUrl应该是从任何文件加载app.js代码到模板的路径(我假设那是index.blade.php)。因此,如果它位于根目录templateUrl: '/public/templates/inicio.html'

至于#的问题,请阅读this somewhat related question

答案 1 :(得分:0)

再一次,这只不过是人为的错误。对于那些花时间尝试回答和理解我的问题的人,我感到抱歉和感激。这是解决方案:

我直接从CDN使用最新的稳定版本,版本 1.3.5 ;然而 - 只是为了看看发生了什么 - 我改为版本 1.2.28 有什么区别?一点语法。

而不是我上面做的......

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

我这样做了:

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

从一个版本更改为另一个版本就是答案,并改变了一点语法。

我希望这可以帮助任何像我一样分心的人。