Laravel-Angular-Material中文文档——入门教程

注意

在项目初始化的工程中angular-animate的版本是与Angular版本不兼容的，你可以参考github上的issue来进行修复

概述

这部分的内容是为了向你介绍Laravel Angular Material初始项目的一些不同的概念。
如果想了解更多的信息，那么你最好把所有的文档内容都阅读一遍
通过这个入门教程，我们将构建一个可以让我们post数据到数据库的页面

这个入门指南跳过了数据库的migration过程，如果你在Laravel的使用上还不是很熟练，推荐你去阅读以下它的官方文档

TDD

测试驱动开发

通过下面这个例子，我们定义了一个测试方法来测试我们的新特性中的一些行为

CreatePostTest.php

<?php
class CreatePostTest extends TestCase
{
  public function testStoresPostSuccessfully()
  {
   
    $post = factory(App\Post::class)->make();
    
    $this->post('/api/posts', [
      'name' => $post->name,
      'topic' => $post->topic,
      ])->seeApiSuccess()
      ->seeJsonObject('post')
      ->seeJson([
        'name' => $post->name,
        'topic' => $post->topic,
      ]);
    
    $this->seeInDatabase('posts', [
      'name' => $post->name,
      'topic' => $post->topic,
      ]);
  }
  
}

API 路由

我们可以通过下面的命令来生成我们的控制器

1	php artisan make:controller CreatePostController

并在Laravel中添加相关的路由

<?php
Route::post('posts', 'CreatePostController@create');

Laravel 控制器

现在我们可以在控制器中编写需要被测试的create方法
CreatePostController.php

<?php
namespace App\Http\Controllers;
use App\Post;
use App\Http\Requests;
use Illuminate\Http\Request;
class CreatePostController extends Controller
{
  public function create(Request $request)
  {
      $this->validate($request, [
        'name'  => 'required',
        'topic' => 'required',
        ]);
    
      $post = new Post;
      $post->name = $request->input('name');
      $post->topic = $request->input('topic');
      $post->save();
    
      return response()->success(compact('post'));
  }
  
}

这篇入门教程默认你会自己通过Laravel创建模型和这里需要的posts表，如果你对此不了解，可以通过Laravel官方教程来学习

Angular 组件

现在我们需要创建用户用来填充提交post请求的表单组件

1	php artisan ng:component create_post_form

组件思想鼓励代码重用
为每个功能创建一个组件的目的是我们接下来可以很方便地重用它。

使用编辑器打开angular/app/components/create_post_form/create_post_form.component.html并在里面添加相关的HTML表单代码

create_post_form.component.html

<form ng-submit="vm.submit()">
  
    <md-input-container>
      <label>Name</label>
      <input type="text" ng-model="vm.name">
    </md-input-container>
  
    <md-input-container>
      <label>Topic</label>
      <input type="text" ng-model="vm.topic">
     </md-input-container>
  
    <md-button type="submit" class="md-primary md-raised">Create post</md-button>
  
</form>

然后修改create_post_form.component.js中的代码来增加控制器逻辑

create_post_form.component.js

class CreatePostFormController{
    constructor(API, ToastService){
        'ngInject';
      
        this.API = API;
        this.ToastService = ToastService;
    }
  
   submit(){
      var data = {
        name: this.name,
        topic: this.topic,
      };
      
       this.API.all('posts').post(data).then((response) => {
         this.ToastService.show('Post added successfully');
       });
    }
}
export const CreatePostFormComponent = {
    templateUrl: './views/app/components/create_post_form/create_post_form.component.html',
    controller: CreatePostFormController,
    controllerAs: 'vm',
    bindings: {}
}

编辑angular/index.components.js来引入这个组件（在artisan时已经自动生成）

JavaScript

import {CreatePostFormComponent} from './app/components/create_post_form/create_post_form.component';
angular.module('app.components')
  .component('createPostForm', CreatePostFormComponent);

EcmaScript 6
这里我们使用了ES 6 的语法，如果你还在使用ES5，这里有一个很好的学习 EcmaScript 6 的资源

Angular 页面

现在我们已经有了需要的页面组件，我们可以使用它来创建页面。页面的主要功能是将组件像搭积木一样整合在一起，每一个组件就像一个积木块，你的页面可以包括一个或者多个组件。

1	php artisan ng:page create_post

在angular/app/pages/create_post.page.html中我们完成对createPostForm组件的调用

create_post.html

1
2
3

<h1>Create Post</h1>
<create-post-form></create-post-form>

这看起来有些重复，，但当我们重用它时可以从中获益。我们可以添加其他相关的页面标题，甚至在一些复杂的例子中我们可以调用其他的指令。

前端路由

我们仍然需要前端路由来把之前的内容连接起来
让我们打开angular/config/routes.config.js文件来为state provider增加新的入口，States是通过ui-router组件来管理的,它是一个很强大的Angular路由库

JavaScript

$stateProvider.state('app.create_post', {
        url: '/create-post',
        views: {
          'main@': {
            templateUrl: getView('create_post')
          }
        }
      })

现在你可以通过URL查看这个页面，或者使用$state.go('app.create_post'),也可以直接在浏览器中手动输入localhost:8000/#/create-post