Laravel Framework，AngularJS - 不是路由

我想用Laravel Framework和AngularJS开发一个应用程序。但是，我有“路由”问题。我有文件“Master.blade.php”。但是AngularJS“html”和“controller”文件没有出现。Laravel Framework，AngularJS - 不是路由

My Local Screen

webpack.mix.js [不是问题js和青菜文件]

const { mix } = require('laravel-mix'); 
 

 
mix.scripts([ 
 
    'node_modules/bootstrap/dist/bootstrap.js', 
 
    'node_modules/angular/angular.js', 
 
    'node_modules/angular-route/angular-route.js', 
 
    'node_modules/angular-cookies/angular-cookies.js', 
 
    'resources/assets/js/app.js', 
 
    'resources/assets/js/controllers/authController.js' 
 
], 'public/assets/js/app.js') 
 
    .sass('resources/assets/sass/app.scss', 'public/assets/css/app.css');

web.php - Laravel路由

<?php 
 

 
Route::get('/app', function() { 
 
    return view('layouts.master'); 
 
});

Master.blade.php

<!Doctype html> 
 
<html ng-app="bildirioApp"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" 
 
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Bildirio</title> 
 

 
    <link rel="stylesheet" href="{{ asset('assets/css/app.css') }}"> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
     <div ng-view></div> 
 
    </div> 
 

 
    <script type="text/javascript" src="{{ asset('assets/js/app.js') }}"></script> 
 
</body> 
 
</html>

App.js

/* This is the main file where Angular is defined */ 
 
var bildirioApp = angular.module('bildirioApp', ['ngRoute', 'ngCookies']); 
 

 
bildirioApp.config(['$routeProvider', '$locationProvider', 
 
    function ($routeProvider, $locationProvider) { 
 

 
     $routeProvider.when('/login', { 
 
      templateUrl : 'resources/views/auth/login.html', 
 
      controller : 'authController', 
 
     }); 
 

 
     $routeProvider.otherwise('/'); 
 

 
    } 
 
]);

authController.js

bildirioApp.controller('authController', ['$scope', function ($scope) { 
 

 
}]);

的login.html

<div class="row"> 
 
    <div class="col-sm-4 col-sm-push-3 well"> 
 
     <h1>Login</h1> 
 
     <form name="loginForm" ng-submit="doLogin(loginForm)"> 
 
      <div class="form-group"> 
 
       <input class="form-control" type="email" name="email" ng-model="login.username" required placeholder="Enter your email address"> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <input class="form-control" type="password" name="password" ng-model="login.password" required placeholder="Enter your password"> 
 
      </div> 
 

 
      <input class="btn btn-success" type="submit" name="save" value="Login"> 
 
     </form> 
 
    </div> 
 
</div>

来源

2017-04-06 Salih Evren Demir

尝试将login.html文件放在'public'目录而不是'resources'目录 – linktoahref

好像你所面临的问题是，你的login.html文件未找到。

当你在你的模板设置为

templateUrl : 'resources/views/auth/login.html'

您的服务器实际上是寻找

{app_root_folder}/public/resources/views/auth/login.html

其中，当然不存在。这是因为Angular除了public文件夹和您定义的特定路线之外无法访问任何内容。

如果您查看浏览器开发人员工具的网络部分，您可能会看到404错误。

有两种方法可以解决这个问题。

选项1 - 创建服务于login.html文件的路线。

首先，你App.js路由更改为：

$routeProvider 
      .when('/login', { 
       templateUrl : 'login/getView', 
       controller : 'authController', 
      });

然后，添加相应的路线web.php将服务于login.html文件：

Route::get('/app', function() { 
    return view('layouts.master'); 
}); 
Route::get('/login/getView', function() { 
    return view('auth.login'); 
});

此，希望能解决您的问题。如果没有 - 监视开发者工具中的网络请求以查看是否找到login.html。同时确保所有其他文件实际加载正确（即App.js）。

选项2 - 将您login.html公共文件夹（不推荐）

您可以将login.html移动到public文件夹（public/resources/views/auth/login.html）。

这不是我的首选方式，因为它打破了你的MVC模式。

我通常喜欢将我所有的视图文件放在resources/views文件夹中，而不是在resources/views和public之间分割它们。

此外，当它们位于resources/views文件夹中时，您可以使用.blade文件以便Angular服务。这样，您可以在服务器端呈现Angular之前进行渲染（即login.blade.php）。

希望这会有所帮助！

来源

2017-04-07 18:28:06 Yani

Laravel Framework，AngularJS - 不是路由

回答

相关问题