Angular + Laravel:通过ngRoute加载视图

Angular + Laravel : loading view via ngRoute

本文关键字：ngRoute 加载 视图 通过 Laravel Angular      更新时间：2023-09-26

我在结合Laravel和Angular时遇到了这个问题：

按照我在网上找到的一个非常简单的教程，我尝试使用 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>

我在浏览器的源代码中看到的代码

<!-- ng-view: -->

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

到目前为止我尝试过：

  1. 将模板放置在js文件夹中（模板网址："templates/inicio.html"）
  2. 将模板放置在public文件夹中（模板网址："../templates/inicio.html'）
    • 另外，templateUrl: '/public/templates/inicio.html'
  3. 将模板放置在根文件夹中（模板网址："/templates/inicio.html"）
  4. 仅将文件放在js文件夹中：（templateUrl： 'inicio.html'）

以上似乎都不起作用。有什么帮助吗？

编辑 我也在 url 中看到这种情况：它不是myapp/public/inicio而是像myapp/public/inicio#/一样加载

你的 index.blade.php 在哪里？ templateUrl应该是从加载应用程序的任何文件到模板的路径.js代码（我假设这是 index.blade.php）。因此，如果它在根目录中，templateUrl: '/public/templates/inicio.html'

至于#的问题，请阅读这个有点相关的问题

再一次，这只不过是人为的错误。我同时对那些花时间试图回答和理解我的问题的人感到抱歉和感谢。这是解决方案：

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

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

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

我这样做了：

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

从一个版本更改为另一个版本是答案，稍微更改一下语法。

我希望这能帮助像我这样分心的人。

相关文章：