shridharkaushik29/laravel-angular-app

Laravel中的AngularJS应用程序

3.0.0 2019-09-03 19:27 UTC

This package is auto-updated.

Last update: 2024-09-29 04:49:39 UTC


README

此插件提供了一个优雅的方式来创建HTML5应用程序,包括AngularJS、Angular、ReactJS、Vue等。

不要根据包名(例如 laravel-angular-app)来理解,因为最初,这个包是为了创建AngularJS应用程序而设计的,但现在它的目标是以优雅的方式在Laravel中创建、构建和加载资源。

安装

composer require shridharkaushik29/laravel-angular-app

用法

config/app.php 中添加提供者。如果你使用的是Laravel版本大于5.4,则跳过此步骤。

"providers" => [
    Shridhar\Angular\Provider::class
]

在每个Laravel安装中创建多个应用程序。

此包允许在单个Laravel安装中创建多个webpack应用程序。例如,如果你想要创建一个电子商务应用程序,那么它将需要一个单独的应用程序来管理前端应用程序的内容。这个包处理得非常高效,因为你可以使用不同的模板创建任意数量的应用程序。

创建Blade视图

@angular("react")
{{--Used to set app name--}}
@route("react")
{{--Used to define site route name--}}
@title("Laravel React")
{{--Used to define application title--}}
@servicesRoute("services")
{{--Used to define services route, when defined a $servicesUrl variable is defined in javascript--}}
<html lang="en">
<head>
    <title>{{$app->title()}}</title>
    <base href="{{$app->url()}}/">
    <link href="{{asset("img/laravel-developer.png")}}" rel="shortcut icon"/>
    <link href="{{$app->asset("style.css")->url()}}" rel="stylesheet"/>
    @vars()
    {{--Used to print <script> tag containing javascript variables--}}
</head>
<body>
<div id="app"></div>
<div class="pre-loader" ng-if="showPreloader">
    <img class="logo" src="{{asset("storage/laravel-logo.png")}}">
    <p>Loading Application</p>
</div>
<script src="{{$app->asset("runtime.js")->url()}}" async></script>
<script src="{{$app->asset("vendor.js")->url()}}" async></script>
<script src="{{$app->asset("main.js")->url()}}" async></script>
</body>
</html>

加载视图

加载视图不需要特殊要求,就像平常一样。

Route::get('/', function () {
    return view('welcome');
});

创建资源

此包假定应用程序名称的文件夹位于 public/assets 目录中,其中包含该应用程序的所有资源。

例如,如果一个应用程序的名称是 welcome,那么应该有一个名为 public/assets/welcome 的目录,其中包含该应用程序所需的JavaScript、CSS、图像和其他资源。

加载资源

$app->asset("path/for/asset") 将返回 Shridhar\Bower\Asset 类的实例。

它包含一个 url() 方法,该方法返回该资源的绝对URL。

<link href="{{$app->asset("style.css")->url()}}" rel="stylesheet"/> 
<script src="{{$app->asset("runtime.js")->url()}}" async></script>
<img src="{{$app->asset("logo.jpg")->url()}}">