Preparations

It’s time to start preparing applications. The following are separate steps for client and service applications.

Web Client Application

Create a web root directory (usually it’s web, htdocs, public_html, www or alike name). Inside add directories
named assets, controllers, models and views.

The structure we’ve just created is similar to the structure used by Yii. You can adjust it as you like but for this
tutorial we’ll stick to Yii convention in order to make it easier to understand.

Let’s explain all these directories a bit:

  • assets contains AngularJs and CSS Bootstrap libraries.
  • controllers is for AngularJs controllers.
  • models is for services which deal with RESTful CRUD API we’re going to build.
  • views is for partial pages. Much like views in Yii.

Get CSS Bootstrap

Download a library from http://getbootstrap.com/ and extract it to assets directory like the following:

  1. assets
  2.     bootstrap
  3.         js
  4.         css
  5.         font

Get AngularJs

Download a library from http://angularjs.org/, and extract it into assets directory like the following:

  1. assets
  2.     bootstrap
  3.     angular
  4.         angular.js
  5.         angular.min.js
  6.         ...

Include AngularJs and CSS Bootstrap into HTML

In order to use AngularJs and CSS Bootstrap we need to create an HTML file html file which will use both libraries.
Create index.html and put it into your web root directory:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <!-- CSS -->
  5.   <link rel="stylesheet" href="assets/twitter-bootstrap/css/bootstrap.min.css" />
  6.   <link rel="stylesheet" href="assets/twitter-bootstrap/css/bootstrap-theme.min.css" />
  7. </head>
  8. <body>
  10.   <!-- JS -->
  11.   <script src="assets/angular/angular.min.js"></script>
  12.   <script src="assets/angular/angular-route.min.js"></script>
  14. </body>
  16. </html>

Web Service Application

Install Yii 2.0 Basic project template as described in Yii guide.
It is preferred to use Composer like the following:

  1. composer global require "fxp/composer-asset-plugin:1.0.0"
  2. composer create-project --prefer-dist yiisoft/yii2-app-basic web-service

Alternatively you can do it manually downloading and extracting archive as described at the same guide page.

Back To Index

01. Introduction

02. Preparation

03. Create Web Service

04. Create Web Client

05. Customization

06. Conclusion