Laravel-Angular-Material中文文档——起步

安装

为Laravel Angular Material 的初学者提供的步骤


我应该使用哪个版本呢?3.4还是3.2?
如果你想要构建一个WebApp,那么推荐你使用3.4.x版本。
否则的话,我们推荐你坚持使用3.2.x版本

如果你是初学者,我推荐你看后面的友好安装方式

命令行安装

1
2
3
4
5
6
7
8
composer create-project jadjoubran/laravel5-angular-material-starter --prefer-dist
cd laravel5-angular-material-starter
npm install -g gulp bower
npm install
bower install
#记得修改根目录下.env中数据库的配置
php artisan migrate
gulp

监听静态资源文件的改动
gulp && gulp watch

预览站点
php artisan serve启动本地服务器然后用浏览器打开默认站点localhost:8000

初学者安装

依赖

  1. node版本>=4,npm版本>=3,可以通过node -v npm -v查看
  2. gulp(全局安装),可以通过gulp -v来检查,如果没有安装,执行[sudo] npm install -g gulp
  3. bower(全局安装),可以通过bower -v来检查,如果没有安装,执行[sudo] npm install -g bower

安装

使用composer create-project命令创建默认项目
composer create-project jadjoubran/laravel5-angular-material-starter --prefer -dist
然后使用cd命令进入此目录

1
cd laravel5-angular-materical-starter

然后安装局部的npm包和bower包依赖
根据你本地的数据库配置修改安装目录下的.env配置文件
php artisan migrate
编译静态文件并监听
gulp && gulp watch
现在不要关闭这个窗口,打开一个新的窗口来进入当前目录启动本地服务器
php artisan serve
默认的启动端口是本地的8000端口即localhost:8000

你是在Windows下使用Vagrant的用户?
如果你计划这样安装,这里已经有人提出过issue,主要是使用npm,也许可以帮助到你issue:)

概述

这个初始项目包的目的是提供一个利用Laravel5.3和Angular1.5来进行WebAPP最佳实践的起始点
为绝大数用到的插件和包提供了合理配置
这个项目的目标并不包括包括尽可能多的包。打比方说,项目里面没有任何默认安装的icon font库。这是因为尽管Google的Material Design Icons感觉是最适合的,但是仍然有用户偏爱Font Awesome

为什么使用Angular Materical

Angular Materical与Angular的协作很好。
初始的包里没有jQuery,如果你需要,自行添加

引入的类库

这个库是一个启动包,它建立在许多流行的开源框架之上。这些包已经被提前配置好以便他们之间不会发生冲突,但是你还是需要熟悉这些类库以便你可以使用它们更好地工作。
引入的类库如下:

  1. Angular1.5
  2. ui-router
  3. Angular Materical
  4. Restangular
  5. JWT Auth
  6. Satelizer
  7. Laravel cors
  8. ngDescribe for testing

3.4中有什么新特性

下面是3.4可用的新特性:

* 移除了Laravel生成的dingo/api目录,现在提供了提供了一个分离的API路由文件  
* 工程中使用的Laravel已经更新至5.3

如果想看完整的新特性列表,请移步Changelog
如果你想要更新3.3的app,请按照Upgrade guide中的步骤进行

贡献

Laravel Angular Material Starter就是基于像你一样令人惊叹的开源贡献者。
你可以通过这些方式来推动此项目的发展,在Github提问,提issue,提议新特性,pull request和任何可能帮助到社区的方式。

目录结构

Laravel的文件结构自然是不变的。下面,你可以了解到更多关于Angular在Laravel Application中的信息

Angular

Angular被默认安装在安装目录下的/angular/目录下,在这个前提下,你可以在/angular/目录下自定制你自己的Angular文件结构。
在/angular/目录下默认目录如下

  • app
    • pages
    • components
  • services
  • directives
  • filters
  • config
  • run
  • dialogs: 用来自定制对话框
  • material: 通用的样式文件文件夹

Angular生成器
你可以用Angular生成器来生成一些指令,特性,从命令行的命令来生成它们可以很大程度上减轻你的工作量

应用入口

默认生成的默认页面的模板文件位于resources/views/index.blade.php
在这里,你可以修改Livereload配置的自动刷新(本地环境)以及Angular app自动加载 (ng-app)

Elixir任务

task目录中包含着使用elixir自定制的gulp任务,以下内容也可以这样来配置

你可以在这个文件夹下自定制你的任务甚至修改默认的任务

版本升级指南

从3.3升级到3.4

首先,你要确认你希望构建一个流行的Web App
安装3.4版本,将你旧的app中的特有的文件迁移到3.4。在你升级之前务必要将下面的升级须知阅读完。

也可以选择只将Laravel从5.3升级到5.4

移除DINGO/API

Dingo/API已经被从初始项目中移除了,如果你还是需要,自行按照它官网的文档安装

3.4版本变更说明
推荐你仔细阅读3.4版本变更的说明,这样你可以快速了解到3.4中包含的新特性

在线演示地址

您的打赏是对我最大的鼓励!