shridharkaushik29 / laravel-angular-app
Laravel中的AngularJS应用程序
3.0.0
2019-09-03 19:27 UTC
Requires
- ext-json: *
- laravel/framework: 6.0.*
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()}}">