图片 10

ThinkPHP实例教程,angularjs使用教程详解

近年在看laravel+angularjs,看到一篇认为很好的鬼子的作品,翻译一下,略有改变,废话非常的少讲直接开首

完全思路

AngularJS Bootstrap
    AngularJS 的首要推荐样式表是 推特(Twitter) Bootstrap ,推特(TWTR.US) Bootstrap
是这两天最受接待的前端框架

①创建Laravel 5的应用

thinkphp通过 style=”color: #ff0000;”>RESTful方式提供数据给angular,前端(包含模板页面)全部由angular来接管。

Bootstrap
    你能够在你的 AngularJS 应用中步向 脸谱Bootstrap,你能够在您的 <head>元素中加多如下代码:
    <link rel=”stylesheet”
href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css”>
    以下是三个全体的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap
类。

composer create-project laravel/laravel jiagou
composer 安装被墙怎么做
能够缓和了composer安装不上的主题材料

示例

    <!DOCTYPE html>
    <html>
      <link rel=”stylesheet”
href=”;
      <script
src=”;
      <body ng-app=”myApp” ng-controller=”userCtrl”>

②创建migrations数据库

兑现贰个用户管理模块,走通增删改查4个操作,通过该示例,演示怎么着在thinkphp中动用AngularJS。

      <div class=”container”>

使用根目录下有.env的文件,张开这一个文件

一. 预备干活

      <h3>Users</h3>

DB_HOST=localhost
DB_DATABASE=jiagou
DB_USERNAME=root
DB_PASSWORD=
修改数据库配置项
接下来创制jiagou的数据库,小编是phpmyadmin的创建

1. 加载所需的js和css文件

angular.min.js angular    主旨库文件

angular-ui-router.min.js angular    路由插件

angular-resource.min.js    肩负与劳动端restful交互的插件

layer  
 弹窗插件,该插件正视于jQuery-1.10.1.min.js和jquery-ui.min.js八个库文件以及一个jquery-ui.min.css样式表

bootstrap.min.css bootstrap    宗旨样式表

文本结构如下:

图片 1

2. 引导页

准备二个angular辅导页,angular通过该教导页开启一个angular应用,后续全部的操作,都以基于该教导页进行的。

友谊提示:

此处的指点页,其实就是我们应用的私下认可页面,具体到thinkphp中,指的就是DEFAULT_MODULE/DEFAULT_CONTROLLER/DEFAULT_ACTION对应的模板文件。第二遍访谈应用时,thinkphp控制器会定向到该页面,之后的模版页面,全体由angular接管,跟thinkphp的模版引擎就从未点儿关系了。

3. 运用首页

在带领页中通过<div
ui-view=”main”></div>蕴涵我们的使用首页。便签的意思前面会有表明。

留神:这一步不是必须的,因为您也能够把施用首页的剧情,全体位于指引页中,可是这么做就远远不足本人了。

4. 搭建RESTFul环境

为了能够运用$resource,大家亟须让服务端遵照RESTful的秘技来干活,不然,$resource就无法表明其功用了。

thinkphp中放置了对RESTful的支撑,使用办法也很简短,便是让某些Controller承接自RestController,然后根据一定的条条框框来编排财富方法就能够。可是它有三个毛病,thinkphp内置的RESTful对财富的访问格局相当不够自个儿,其访谈能源的U酷路泽L结构如下:

/模块名称/调整器名称/能源名称

基于此,我们着想动用thinkphp的路由作用,来完成对RESTful的支撑,使用thinkphp的路由功效时,调整器是不需求承继RestController的,但为了尊重tp的劳动成果,同一时间,为了兼顾友好的能源访谈方式,最终,作者使用的是RestController+路由两岸结合的艺术。

补充:

能源方法的命名准则为:财富名称_REST类型

REST类型有如下两种:get,post,put,delete

5. 创建数据库表

开创用户表,并初阶化一些数目

      <table class=”table table-striped”>
      <thead><tr>
      <th>Edit</th>
      <th>First Name</th>
      <th>Last Name</th>
      </tr></thead>
      <tbody><tr ng-repeat=”user in users”>
      <td>
        <button class=”btn”
ng-click=”editUser(user.id)”>
        <span class=”glyphicon
glyphicon-pencil”></span>  Edit
      </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
      </tr></tbody>
      </table>

展开DOS步入项指标目录,奉行

 

      <hr>
        <button class=”btn btn-success”
ng-click=”editUser(‘new’)”>
        <span class=”glyphicon
glyphicon-user”></span> Create New User
      </button>
      <hr>

php artisan migrate:install
会看到

[sql] view
plain copy

      <h3 ng-show=”edit”>Create New User:</h3>
      <h3 ng-hide=”edit”>Edit User:</h3>

Migration table created successfully
在执行

 

      <form class=”form-horizontal”>
      <div class=”form-group”>
      <label class=”col-sm-2 control-label”>First
Name:</label>
      <div class=”col-sm-10″>
      <input type=”text” ng-model=”fName” ng-disabled=”!edit”
placeholder=”First Name”>
      </div>
      </div>
      <div class=”form-group”>
          <label class=”col-sm-2 control-label”>Last
Name:</label>
      <div class=”col-sm-10″>
      <input type=”text” ng-model=”lName” ng-disabled=”!edit”
placeholder=”Last Name”>
      </div>
      </div>
      <div class=”form-group”>
      <label class=”col-sm-2
control-label”>Password:</label>
      <div class=”col-sm-10″>
      <input type=”password” ng-model=”passw1″
placeholder=”Password”>
      </div>
      </div>
      <div class=”form-group”>
      <label class=”col-sm-2
control-label”>Repeat:</label>
      <div class=”col-sm-10″>
      <input type=”password” ng-model=”passw2″
placeholder=”Repeat Password”>
      </div>
      </div>
      </form>

php artisan make:migration create_employees_table
会看到

  1. DROP TABLE IF EXISTS `an_user`;  
  2. CREATE TABLE `an_user` (  
  3.   `id` int(10) unsigned NOT NULL AUTO_INCREMENT,  
  4.   `user_id` int(10) unsigned NOT NULL COMMENT ‘用户id’,  
  5.   `user_name` varchar(100) NOT NULL COMMENT ‘用户名称’,  
  6.   `email` varchar(255) DEFAULT NULL COMMENT ‘邮箱地址’,  
  7.   `tel` varchar(255) DEFAULT NULL COMMENT ‘手提式无线电话机号码’,  
  8.   `weixin` varchar(255) DEFAULT NULL COMMENT ‘微信号’,  
  9.   `qq` varchar(255) DEFAULT NULL COMMENT ‘qq号码’,  
  10.   PRIMARY KEY (`id`)  
  11. ) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT=’用户表’;  
  12.   
  13. INSERT INTO `an_user` VALUES (‘1’, ‘1’, ‘demo1’, ‘demo1@qq.com’, ‘13100000000’, ‘weixin_test1’, ‘123456’);  
  14. INSERT INTO `an_user` VALUES (‘2’, ‘2’, ‘demo2’, ‘demo2@qq.com’, ‘13100000001’, ‘weixin_test2’, ‘123456’);  
  15. INSERT INTO `an_user` VALUES (‘3’, ‘3’, ‘demo3’, ‘demo3@qq.com’, ‘13100000002’, ‘weixin_test3’, ‘123456’);  
  16. INSERT INTO `an_user` VALUES (‘4’, ‘4’, ‘demo4’, ‘demo4@qq.com’, ‘13100000003’, ‘weixin_test4’, ‘123456’);  
  17. INSERT INTO `an_user` VALUES (‘5’, ‘5’, ‘demo5’, ‘demo5@qq.com’, ‘13100000004’, ‘weixin_test5’, ‘123456’);  
  18. INSERT INTO `an_user` VALUES (‘6’, ‘6’, ‘demo6’, ‘demo6@qq.com’, ‘13100000005’, ‘weixin_test6’, ‘123456’);  
  19. INSERT INTO `an_user` VALUES (‘7’, ‘7’, ‘demo7’, ‘demo7@qq.com’, ‘13100000006’, ‘weixin_test7’, ‘123456’);  
  20. INSERT INTO `an_user` VALUES (‘8’, ‘8’, ‘demo8’, ‘demo8@qq.com’, ‘13100000007’, ‘weixin_test8’, ‘123456’);  
  21. INSERT INTO `an_user` VALUES (‘9’, ‘9’, ‘demo9’, ‘demo9@qq.com’, ‘13100000008’, ‘weixin_test9’, ‘123456’);  

      <hr>
      <button class=”btn btn-success” ng-disabled=”error ||
incomplete”>
      <span class=”glyphicon glyphicon-save”></span>
Save Changes
    </button>
    </div>

Created migration: 2015_12_31_054623_create_employees_table
开垦文件
/database/migrations/2015_12_31_054623_create_employees_table.php
修改代码

二. 开始吧

    <script src = “myUsers.js”></script>
    </body>
    </html>

<?php
 
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
 
class CreateEmployeesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create(’employees’, function (Blueprint $table) {
            $table->increments(‘id’);
            $table->string(‘name’)->unique();
            $table->string(’email’)->unique();
            $table->string(‘contact_number’);
            $table->string(‘position’);
           
$table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop(’employees’);
    }
}
然后在DOS执行

 

命令分析
      <html ng-app >          为<html>
成分定义一个应用(未命名)
      <body ng-controller>      
 为<body>成分定义三个调控器
      <tr ng-controller>        循环users
对象数组,每一个user 对象放在<tr>成分中
      <button ng-click>       
当点击<button>元素时调用函数editUser()
      <h3 ng-show>          如果edit = true
显示<h3>元素
      <h3 ng-hide>          如果edit = true
隐藏<h3>元素
      <input ng-model>        为应用程序绑定<input
> 成分
      <button ng-disabled>     
要是发生错误或然ncoplete= true 禁止使用 <button>成分

php artisan migrate
下一场看见

1. 开立指点页

前边说过,教导页其实便是大家选取的暗中同意页面,在自己的种类中,默许页面包车型大巴文本路径为:

/tpl/Admin/Index/index.html

在该公文中,参与如下内容:

Bootstrap 类解析
    <div>        container      内容容器
    <table>       table        表格
    <table>       table-striped    带条纹背景的报表
    <button>      btn          按钮
    <btton>      btn-success    成功按键
    <span>        glyphicon             字形Logo
    <span>            glyphicon-pencil   铅笔Logo
    <span>        glyphicon-user     用户Logo
    <span>        glyphicon-save     保存Logo
    <form>        form-horizontal    水平表格
    <div>       form-group         表单组
    <label>        control-label        调整器标签
    <label>        col-sm-2             跨越 2 列
    <div>                 col-sm-10            跨越 10 列

Migrated: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_100000_create_password_resets_table
Migrated: 2015_12_31_054623_create_employees_table
③REST API

 

JavaScript 代码
    angular.module(‘myApp’, []).controller(‘userCtrl’,
function($scope) {
    $scope.fName = ”;
    $scope.lName = ”;
    $scope.passw1 = ”;
    $scope.passw2 = ”;
    $scope.users = [
              {id:1, fName:’Hege’, lName:”Pege” },
              {id:2, fName:’Kim’, lName:”Pim” },
              {id:3, fName:’Sal’, lName:”Smith” },
              {id:4, fName:’Jack’, lName:”Jones” },
              {id:5, fName:’John’, lName:”Doe” },
              {id:6, fName:’Peter’,lName:”Pan” }
          ];
    $scope.edit = true;
    $scope.error = false;
    $scope.incomplete = false;

在DOS执行

[html] view
plain copy

    $scope.editUser = function(id) {
          if (id == ‘new’) {
              $scope.edit = true;
              $scope.incomplete = true;
              $scope.fName = ”;
              $scope.lName = ”;
          } else {
              $scope.edit = false;
              $scope.fName = $scope.users[id-1].fName;
              $scope.lName = $scope.users[id-1].lName;
            }
      };

php artisan make:controller Employees
看到

 

      $scope.$watch(‘passw1’,function() {$scope.test();});
      $scope.$watch(‘passw2’,function() {$scope.test();});
      $scope.$watch(‘fName’, function() {$scope.test();});
      $scope.$watch(‘lName’, function() {$scope.test();});

Controller created successfully.
执行

  1. <!DOCTYPE html>  
  2. <html ng-app=”antp”>  
  3.     <head>  
  4.         <meta charset=”utf-8″ />  
  5.         <title></title>  
  6.         <meta content=”width=device-width, initial-scale=1.0″ name=”viewport” />  
  7.         <meta content=”” name=”author” />  
  8.         <link href=”/public/css/bootstrap.min.css” rel=”stylesheet” type=”text/css” media=”all”>  
  9.         <link href=”/public/css/jquery-ui.min.css” rel=”stylesheet” type=”text/css” media=”all”>  
  10.         <script type=”text/javascript” src=”/public/js/angular.min.js”></script>  
  11.         <script type=”text/javascript” src=”/public/js/angular-resource.min.js”></script>  
  12.         <script type=”text/javascript” src=”/public/js/angular-ui-router.min.js”></script>  
  13.         <script type=”text/javascript” src=”/public/js/jquery-1.10.1.min.js”></script>  
  14.         <script type=”text/javascript” src=”/public/js/jquery-ui.min.js”></script>  
  15.         <script type=”text/javascript” src=”/public/js/layer/layer.js”></script>  
  16.         <script type=”text/javascript” src=”/config.js”></script>  
  17.         <script type=”text/javascript” src=”/app.js”></script>  
  18.         <link rel=”shortcut icon” href=”favicon.ico” />  
  19.     </head>  
  20.     <body>  
  21.         <div class=”container-fluid”>  
  22.             <div class=”row clearfix”>  
  23.                 <div class=”col-md-12″ style=”float: none;display: block;margin-left: auto;margin-right: auto;”>  
  24.                     <div ui-view=”main”></div>  
  25.                 </div>  
  26.             </div>  
  27.         </div>  
  28.     </body>  
  29. </html>  

      $scope.test = function() {
            if ($scope.passw1 !== $scope.passw2) {
                  $scope.error = true;
            } else {
                  $scope.error = false;
        }
        $scope.incomplete = false;
        if ($scope.edit && (!$scope.fName.length ||
              !$scope.lName.length ||
          !$scope.passw1.length || !$scope.passw2.length)) {
          $scope.incomplete = true;
          }
          };

php artisan make:model Employee
看到

 

        });

Model created successfully.
开采文件/app/Employee.php,这几个Model文件,文件放这里以为倒霉,能够活动这一个文件

页面中加载的js和css,除了config.js和app.js,其余的在眼下都曾经作了认证,这四个前面也会聊起。

留神html标签中的ng-app指令,该指令的原委,就是angular要展开的选拔名称。

2. 敞开使用

在此以前的index.html文件中,通过ng-app指令定义了一个施用名称,定义完之后,大家还亟需开启它,开启的法子也异常的粗略,大家要求创设三个js文件,名称叫app.js,在个中先加入如下内容:

JavaScript 代码分析
      $scope.fName      模型变量(用户名)
      $scope.IName      模型变量(用户姓)
      $scope.passw1      模型变量(用户密码1)
      $scope.passw2      模型变量(用户密码2)
      $scope.users       模型变量(用户的数组)
      $scope.edit        当用户点击创制用户时设置为true。
      $scope.error        如果passw1
不等于passw2置为true。
      $scope.incomplete      假设每种字段都为空(length =
0)设置为 true
      $scope.editUser      设置模型变量
      $scope.watch        监察和控制模型变量
      $scope.test        验证模型变量的不当和完整性

<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Employee extends Model
{
    protected $fillable = array(‘id’, ‘name’,
’email’,’contact_number’,’position’);
}
开拓文件/app/Http/Controllers/Employees.php,那一个是调节器

 

AngularJS 包含
    在AngularJS 中,你能够在HTML中带有HTML文件。

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
use App\Employee;
use App\Http\Requests;
use App\Http\Controllers\Controller;
 
class Employees extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return Response
     */
    public function index($id = null) {
        if ($id == null) {
            return Employee::orderBy(‘id’, ‘asc’)->get();
        } else {
            return $this->show($id);
        }
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  Request 
$request
     * @return Response
     */
    public function store(Request $request) {
        $employee = new Employee;
 
        $employee->name = $request->input(‘name’);
        $employee->email = $request->input(’email’);
        $employee->contact_number =
$request->input(‘contact_number’);
        $employee->position = $request->input(‘position’);
        $employee->save();
 
        return ‘Employee record successfully created with id ‘ .
$employee->id;
    }
 
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return Response
     */
    public function show($id) {
        return Employee::find($id);
    }
 
    /**
     * Update the specified resource in storage.
     *
     * @param  Request  $request
     * @param  int  $id
     * @return Response
     */
    public function update(Request $request, $id) {
        $employee = Employee::find($id);
 
        $employee->name = $request->input(‘name’);
        $employee->email = $request->input(’email’);
        $employee->contact_number =
$request->input(‘contact_number’);
        $employee->position = $request->input(‘position’);
        $employee->save();
 
        return “Sucess updating user #” . $employee->id;
    }
 
    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return Response
     */
    public function destroy($id) {
       $employee = Employee::find($id);
 
       $employee->delete();
 
       return “Employee record successfully deleted #” .
$request->input(‘id’);
   }
}
开发文件/app/Http/routes.php,那一个是路由文件

 

    在HTML中包含HTML 文件
服务端富含
    多数服务脚本都帮助包括文件功用

Route::get(‘/’, function () {
    return view(‘index’);
});
Route::get(‘/api/v1/employees/{id?}’, ‘Employees@index’);
Route::post(‘/api/v1/employees’, ‘Employees@store’);
Route::post(‘/api/v1/employees/{id}’, ‘Employees@update’);
Route::delete(‘/api/v1/employees/{id}’, ‘Employees@destroy’);
④使用AngularJS

[javascript] view
plain copy

客户端包涵
    通过 JavaScript 有很三种办法得以在 HTML 中隐含 HTML 文件。
    经常大家选拔 http 央求 (AJAX)
从服务端获取数据,重返的多少大家能够透过 使用 innerHTML 写入到 HTML
成分中。

创建/public/app/app.js
丰盛代码

 

    <div class=”container”>
        <div
ng-include=”‘myUsers_List.htm'”></div>
        <div
ng-include=”‘myUsers_Form.htm'”></div>
    </div>

var app = angular.module(’employeeRecords’, [])
        .constant(‘API_URL’, ”);
本人的jiagou.com指向的是项目里根目录下的public文件夹

  1. var app = angular.module(“antp”,[“ui.router”,”ngResource”]);  

创建 HTML 列表
    <table class=”table table-striped”>
      <thead><tr>
      <th>Edit</th>
      <th>First Name</th>
      <th>Last Name</th>
      </tr></thead>
      <tbody><tr ng-repeat=”user in users”>
      <td>
        <button class=”btn”
ng-click=”editUser(user.id)”>
        <span class=”glyphicon
glyphicon-pencil”></span>  Edit
      </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
      </tr></tbody>
    </table>

制造/public/app/controllers/employees.js,那个文件是AngularJS调节器

 

AngularJS 动画
    AngularJS 提供了动画效果,能够包容css 使用
    AngularJS 使用动画片要求引入angular-animate.min.js
    <script
src=”;
    还索要在利用中利用模型 ngAnimate:
    <body ng-app=”ngAnimate”>

app.controller(’employeesController’, function($scope, $http, API_URL)
{
    //retrieve employees listing from API
    $http.get(API_URL + “employees”)
            .success(function(response) {
                $scope.employees = response;
            });
   
    //show modal form
    $scope.toggle = function(modalstate, id) {
        $scope.modalstate = modalstate;
 
        switch (modalstate) {
            case ‘add’:
                $scope.form_title = “Add New Employee”;
                break;
            case ‘edit’:
                $scope.form_title = “Employee Detail”;
                $scope.id = id;
                $http.get(API_URL + ’employees/’ + id)
                        .success(function(response) {
                            console.log(response);
                            $scope.employee = response;
                        });
                break;
            default:
                break;
        }
        console.log(id);
        $(‘#myModal’).modal(‘show’);
    }
 
    //save new record / update existing record
    $scope.save = function(modalstate, id) {
        var url = API_URL + “employees”;
       
        //append employee id to the URL if the form is in edit mode
        if (modalstate === ‘edit’){
            url += “/” + id;
        }
       
        $http({
            method: ‘POST’,
            url: url,
            data: $.param($scope.employee),
            headers: {‘Content-Type’:
‘application/x-www-form-urlencoded’}
        }).success(function(response) {
            console.log(response);
            location.reload();
        }).error(function(response) {
            console.log(response);
            alert(‘This is embarassing. An error has occured. Please
check the log for details’);
        });
    }
 
    //delete record
    $scope.confirmDelete = function(id) {
        var isConfirmDelete = confirm(‘Are you sure you want this
record?’);
        if (isConfirmDelete) {
            $http({
                method: ‘DELETE’,
                url: API_URL + ’employees/’ + id
            }).
                    success(function(data) {
                        console.log(data);
                        location.reload();
                    }).
                    error(function(data) {
                        console.log(data);
                        alert(‘Unable to delete’);
                    });
        } else {
            return false;
        }
    }
});
开创模板文件
/resources/views/index.php

里头,module的第三个参数,是angular的一些注重包。

3. 安顿路由

运用ui.router的路由功效,通过config预先配置好拜望url、该url对应的视图模板以及调控器等新闻,一样是在app.js文件中,继续加盟如下内容:

怎么是卡通?
    动画是通过改变HTML成分产生的动态变化效果。
    勾选复选框遮盖DIV 实例:
    <body ng-app=”ngAnimate”>
        隐藏DIV <input type=”checkbox”
ng-model=”myCheck”>
        <div ng-hide=”myCheck”></div>
    </body>
    应用中卡通不宜太多,但适龄的利用动画片能够增添页面包车型地铁丰裕性,也足以更易让用户知道。

<!DOCTYPE html>
<html lang=”en-US” ng-app=”employeeRecords”>
    <head>
        <title>Laravel 5 AngularJS CRUD Example</title>
 
        <!– Load Bootstrap
css –>
        <link href=”<?=%20asset(‘css/bootstrap.min.css’)%20?>”
rel=”stylesheet”>
    </head>
    <body>
        <h2>Employees Database</h2>
        <div  ng-controller=”employeesController”>
 
            <!– Table-to-load-the-data Part –>
            <table class=”table”>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Contact No</th>
                        <th>Position</th>
                        <th><button id=”btn-add” class=”btn
btn-primary btn-xs” ng-click=”toggle(‘add’, 0)”>Add New
Employee</button></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat=”employee in employees”>
                        <td>{{  employee.id }}</td>
                        <td>{{ employee.name }}</td>
                        <td>{{ employee.email }}</td>
                        <td>{{ employee.contact_number
}}</td>
                        <td>{{ employee.position }}</td>
                        <td>
                            <button class=”btn btn-default btn-xs
btn-detail” ng-click=”toggle(‘edit’,
employee.id)”>Edit</button>
                            <button class=”btn btn-danger btn-xs
btn-delete”
ng-click=”confirmDelete(employee.id)”>Delete</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <!– End of Table-to-load-the-data Part –>
            <!– Modal (Pop up when detail button clicked) –>
            <div class=”modal fade” id=”myModal” tabindex=”-1″
role=”dialog” aria-labelledby=”myModalLabel” aria-hidden=”true”>
                <div class=”modal-dialog”>
                    <div class=”modal-content”>
                        <div class=”modal-header”>
                            <button type=”button” class=”close”
data-dismiss=”modal” aria-label=”Close”><span
aria-hidden=”true”>×</span></button>
                            <h4 class=”modal-title”
id=”myModalLabel”>{{form_title}}</h4>
                        </div>
                        <div class=”modal-body”>
                            <form name=”frmEmployees”
class=”form-horizontal” novalidate=””>
 
                                <div class=”form-group error”>
                                    <label for=”inputEmail3″
class=”col-sm-3 control-label”>Name</label>
                                    <div class=”col-sm-9″>
                                        <input type=”text”
class=”form-control has-error” id=”name” name=”name”
placeholder=”Fullname” value=”{{name}}”
                                        ng-model=”employee.name”
ng-required=”true”>
                                        <span class=”help-inline”
                                       
ng-show=”frmEmployees.name.$invalid &&
frmEmployees.name.$touched”>Name field is required</span>
                                    </div>
                                </div>
 
                                <div class=”form-group”>
                                    <label for=”inputEmail3″
class=”col-sm-3 control-label”>Email</label>
                                    <div class=”col-sm-9″>
                                        <input type=”email”
class=”form-control” id=”email” name=”email” placeholder=”Email Address”
value=”{{email}}”
                                        ng-model=”employee.email”
ng-required=”true”>
                                        <span class=”help-inline”
                                       
ng-show=”frmEmployees.email.$invalid &&
frmEmployees.email.$touched”>Valid Email field is
required</span>
                                    </div>
                                </div>
 
                                <div class=”form-group”>
                                    <label for=”inputEmail3″
class=”col-sm-3 control-label”>Contact Number</label>
                                    <div class=”col-sm-9″>
                                        <input type=”text”
class=”form-control” id=”contact_number” name=”contact_number”
placeholder=”Contact Number” value=”{{contact_number}}”
                                       
ng-model=”employee.contact_number” ng-required=”true”>
                                    <span class=”help-inline”
                                       
ng-show=”frmEmployees.contact_number.$invalid &&
frmEmployees.contact_number.$touched”>Contact number field is
required</span>
                                    </div>
                                </div>
 
                                <div class=”form-group”>
                                    <label for=”inputEmail3″
class=”col-sm-3 control-label”>Position</label>
                                    <div class=”col-sm-9″>
                                        <input type=”text”
class=”form-control” id=”position” name=”position”
placeholder=”Position” value=”{{position}}”
                                        ng-model=”employee.position”
ng-required=”true”>
                                    <span class=”help-inline”
                                       
ng-show=”frmEmployees.position.$invalid &&
frmEmployees.position.$touched”>Position field is
required</span>
                                    </div>
                                </div>
 
                            </form>
                        </div>
                        <div class=”modal-footer”>
                            <button type=”button” class=”btn
btn-primary” id=”btn-save” ng-click=”save(modalstate, id)”
ng-disabled=”frmEmployees.$invalid”>Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
 
        <!– Load Javascript Libraries (AngularJS, JQuery, Bootstrap)
–>
        <script src=”<?= asset(‘app/lib/angular/angular.min.js’)
?>”></script>
        <script src=”<?= asset(‘js/jquery.min.js’)
?>”></script>
        <script src=”<?= asset(‘js/bootstrap.min.js’)
?>”></script>
       
        <!– AngularJS Application Scripts –>
        <script src=”<?= asset(‘app/app.js’)
?>”></script>
        <script src=”<?= asset(‘app/controllers/employees.js’)
?>”></script>
    </body>
</html>

 

ngAnimate 做了什么样?
    ngAnimate模型能够加上或移除calss.
    ngAnimate 模型并不能够运用HTML 成分发生动画,但是ngAnimate
会检验事件,类似遮蔽彰显HTML成分
    如若事件时有发生ngAnimate
就能利用预订义的class来安装HTML成分的动画片。
      AngularJS 添加/移除class指令
        ng-shwo
        ng-hide
        ng-class
        ng-view
        ng-include
        ng-repeat
        ng-if
        ng-switch
    ng-show 和 ng-hide 指令用于增加或移除 ng-hide class 的值。
    其余指令会在步向 DOM 会加多 ng-enter 类,移除 DOM 会加多ng-leave 属性。
    当 HTML 成分地点变动时,ng-repeat 指令一样能够增加 ng-move 类

    别的, 在动画完毕后,HTML 成分的类会集将被移除。举例: ng-hide
指令会加多一下类:
    ng-animate
        ng-hide-animate
        ng-hide-add (若是元素将被埋伏)
        ng-hide-remove (假诺成分将体现)
        ng-hide-add-active (假若元素将隐形)
        ng-hide-remove-active (假若成分将显得)

模板里要加载多少个js和css,看一下截图

[javascript] view
plain copy

使用CSS动画
      大家得以选择 CSS transition(过渡) 或 CSS 动画让 HTML
成分发生动画效果,

图片 2

 

CSS过渡
      CSS 过渡能够让大家平滑的将三个 CSS 属性值修改为别的三个:
        实例:
          <style>
              div {
                  transition:all linear 0.5s;
                  background-color:lightblue;
                  height:100px
              }
            .ng-hide{
                  height:0;
            }
        </style>

网络找一下bootstrap+jquery+angularjs,下载一下放权目录里

  1. app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {  
  2.     //启用HTML5格局的路由,该方式下会去除ULacrosseL中的#号  
  3.     //$locationProvider.html5Mode(true);  
  4.     //暗中同意页面,全数哀告不到的资源,都会转接到这些U逍客L  
  5.     $urlRouterProvider.otherwise(“/index”);  
  6.     $stateProvider.state(“user”, {  
  7.         url: “/user”,  
  8.         views: {  
  9.             main: {  
  10.                 templateUrl: “tpl/Admin/User/index.html”,  
  11.                 controller: “UserCtroller”  
  12.             }  
  13.         }  
  14.     }).state(“index”, {  
  15.         url: “/index”,  
  16.         views: {  
  17.             main: {  
  18.                 templateUrl: “tpl/Admin/Index/main.html”,  
  19.                 controller: “MainCtroller”  
  20.             }  
  21.         }  
  22.     }).state(“user-add”, {  
  23.         url: “/user/add”,  
  24.         views: {  
  25.             main: {  
  26.                 templateUrl: “tpl/Admin/User/add.html”,  
  27.                 controller: “UserFormCtroller”  
  28.             }  
  29.         }  
  30.     }).state(“user-edit”, {  
  31.         url: “/user/edit/:user_id”,  
  32.         views: {  
  33.             main: {  
  34.                 templateUrl: “tpl/Admin/User/add.html”,  
  35.                 controller: “UserFormCtroller”  
  36.             }  
  37.         }  
  38.     });  
  39. });  

css 动画
    CSS 动画允许你平滑的修改 CSS 属性值:
    在 DIV 成分设置了 .ng-hide 类时, myChange
动画将施行,它会平滑的将高度从 100px 变为 0:
    <style>
      @keyframes myChange {
          from {
              height: 100px;
            } to {
              height: 0;
            }
        }
      div {
          height: 100px;
          background-color: lightblue;
      }
      div.ng-hide {
            animation: 0.5s myChange;
      }
    </style>

完了了,现在看一下功效图

 

列表

还记得此前指导页中的ui-view=”main”吗?ui-view的名字,正是state中配备的views上边包车型地铁质量名称。可能你会说,config里面配备了那么多的main,它是如何领悟找的是哪位main?稳重看下代码就掌握了。

留意1:调节器controller大家并从未手动写在某些页面包车型地铁标签上,而是统一配置在了config里。

留心2:每一个视图模板必必要相应二个调控器,并且那一个调节器必需要被成立,不然,该视图将不能展现。

专注3:不要把那边的调整器和thinkphp里面包车型地铁调节器搞混,事实上,他们两个之间未有其他关系。

4. 引进每一个模块下的js

此间为了便于代码管理与维护,我在每种模块上边创制了多个js文件,每一种模块的js实现一定的效果,那个js同样须求在app.js中被引进。

图片 3

 

添加

[javascript] view
plain copy

图片 4

 

修改

  1. document.write(‘<script type=”text/javascript” src=”/tpl/Admin/Index/main.js”></script>’);  
  2. document.write(‘<script type=”text/javascript” src=”/tpl/Admin/User/user.js”></script>’);  

图片 5

 

5. 浏览器访谈

在浏览器地址栏中,输入

图片 6

稳重观察下地址栏,大家输入的是

首页,辅导页中的<div
ui-view=”main”></div>,表示笔者急需路由到main这几个视图,可是,大家输入的地方

鉴于/index指向的是tpl/Admin/Index/main.html,所以那边就能够把main.html对应的剧情突显出来。

main.html文件内容:

 

 

[html] view
plain copy

 

  1. <div ng-include=”‘tpl/Admin/Public/header.html'”></div>  
  2. <blockquote>  
  3.     <p>  
  4.         作者是暗中认可页面,全体诉求不到的能源,都会到本身这里来…  
  5.     </p>  
  6. </blockquote>  

 

里面,通过ng-include指令,引入了二个公家导航页面,ng-include指令中双引号内的单引号不可少,内容如下:

 

[html] view
plain copy

 

  1. <div style=”margin-top:20px;”>  
  2.     <nav class=”navbar navbar-default” role=”navigation”>  
  3.         <div class=”navbar-header”>  
  4.             <a class=”navbar-brand” href=”#”>Brand</a>  
  5.         </div>  
  6.         <div class=”collapse navbar-collapse”>  
  7.             <ul class=”nav navbar-nav”>  
  8.                 <li class=”active”>  
  9.                      <a ui-sref=”user”>用户处理</a>  
  10.                 </li>  
  11.             </ul>  
  12.               
  13.         </div>  
  14.     </nav>  
  15. </div>  

 

6. 用户列表

点击导航中的【用户管理】,就能够跳转到用户列表页面,如下:

图片 7

该列表对应的视图像和文字件为tpl/Admin/User/index.html,内容如下:

 

[html] view
plain copy

 

  1. <div ng-include=”‘tpl/Admin/Public/header.html'”></div>  
  2. <button type=”button” class=”btn btn-primary” ng-click=”addAction()”>新增</button>  
  3. <table class=”table table-bordered table-striped” style=”margin-top:15px;”>  
  4.     <thead>  
  5.         <tr>  
  6.             <th>用户名</th>  
  7.             <th>邮箱</th>  
  8.             <th>手机号</th>  
  9.             <th>微信</th>  
  10.             <th>QQ</th>  
  11.             <th>操作</th>  
  12.         </tr>  
  13.     </thead>  
  14.     <tbody>  
  15.         <tr ng-repeat=”user in data.user”>  
  16.             <td>  
  17.                 <a ui-sref=”user-edit({user_id:user.user_id})” ng-bind=”user.user_name”></a>  
  18.             </td>  
  19.             <td ng-bind=”user.email”></td>  
  20.             <td ng-bind=”user.tel”></td>  
  21.             <td ng-bind=”user.weixin”></td>  
  22.             <td ng-bind=”user.qq”></td>  
  23.             <td>  
  24.                 <button type=”button” class=”btn btn-link”>  
  25.                     <a ui-sref=”user-edit({user_id:user.user_id})”>修改</a>  
  26.                 </button>  
  27.                 <button type=”button” class=”btn btn-link” ng-click=”deleteAction(user.user_id)”>删除</button>  
  28.             </td>  
  29.         </tr>  
  30.     </tbody>  
  31. </table>  

 

为了能够从后端获得多少,大家必要创设贰个$resource财富,创设格局如下:

 

[javascript] view
plain copy

 

  1. //通过factory创立二个service,该service通过$resource重返了三个财富对象  
  2. //$resource担任与扶助restful的服务端实行多少交互  
  3. app.factory(“UserService”, function($resource) {  
  4.     return $resource(globalConfig.API.URL + “users/:id”, {  
  5.        id: “@id”  
  6.     },  
  7.     {  
  8.         //query方法须要服务端重返的数目格式为数组,如若回去的长短数组格式,须求在transformResponse函数中作转换管理  
  9.         query: {  
  10.             method: “GET”,  
  11.             isArray: true,  
  12.             transformResponse: function(data) {  
  13.                 return JSON.parse(data);  
  14.             }  
  15.         },  
  16.         update: {  
  17.             method: “PUT”  
  18.         }  
  19.     });  
  20. });  

 

此地,创设了一个名为UserService的能源,然后,大家还亟需缔造三个调控器,将UserService财富注入进来,代码如下:

 

[javascript] view
plain copy

 

  1. //用户列表Ctroller  
  2. app.controller(‘UserCtroller’, function($scope, $state, UserService) {  
  3.     $scope.data = {};  
  4.     //获取用户列表  
  5.     UserService.query().$promise.then(  
  6.         function(data){  
  7.             //将查询结果赋值给data.user,模板中得以对data.user变量举行遍历  
  8.             $scope.data.user = data;  
  9.         },  
  10.         function(error) {  
  11.             console.log(“An error occurred”, error);  
  12.         }  
  13.     );  
  14.     $scope.addAction = function() {  
  15.         $state.go(“user-add”);  
  16.     };  
  17.     $scope.deleteAction = function(user_id){  
  18.         layer.confirm(“鲜明要去除该用户吗”, {  
  19.             btn: [‘确定’,’取消’]  
  20.         }, function(index){  
  21.             layer.close(index);  
  22.             UserService.remove({id:user_id}).$promise.then(  
  23.                 function(res){  
  24.                     if(res.status){  
  25.                         $state.go(“user”,null,{  
  26.                             reload:true  
  27.                         });  
  28.                     }else{  
  29.                           
  30.                     }  
  31.                 },  
  32.                 function(error) {  
  33.                     console.log(“An error occurred”, error);  
  34.                 }  
  35.             );  
  36.         });  
  37.     }  
  38. });  

 

 

由此User瑟维斯的query方法,获取用户列表消息。

 

7. 剧增用户

点击列表上的【新扩展】,将会通过$state.Go(“user-add”);跳转到新扩充页面:

图片 8

该页面临应的视图像和文字件为tpl/Admin/User/add.html,内容如下:

 

[html] view
plain copy

 

  1. <div ng-include=”‘tpl/Admin/Public/header.html'”></div>  
  2. <form class=”form-horizontal” role=”form” name=”userForm”>  
  3.     <div class=”form-group”>  
  4.          <label class=”col-sm-3 control-label”>用户名</label>  
  5.          <div class=”col-sm-4″>  
  6.             <input type=”text” class=”form-control” ng-model=”user.user_name”/>  
  7.          </div>  
  8.     </div>  
  9.     <div class=”form-group”>  
  10.          <label class=”col-sm-3 control-label”>邮箱</label>  
  11.          <div class=”col-sm-4″>  
  12.             <input type=”email” class=”form-control” ng-model=”user.email”/>  
  13.          </div>  
  14.     </div>  
  15.     <div class=”form-group”>  
  16.          <label class=”col-sm-3 control-label”>手机号</label>  
  17.          <div class=”col-sm-4″>  
  18.             <input type=”tel” class=”form-control” ng-model=”user.tel”/>  
  19.          </div>  
  20.     </div>  
  21.     <div class=”form-group”>  
  22.          <label class=”col-sm-3 control-label”>微信号</label>  
  23.          <div class=”col-sm-4″>  
  24.             <input type=”text” class=”form-control” ng-model=”user.weixin”/>  
  25.          </div>  
  26.     </div>  
  27.     <div class=”form-group”>  
  28.          <label class=”col-sm-3 control-label”>QQ</label>  
  29.          <div class=”col-sm-4″>  
  30.             <input type=”text” class=”form-control” ng-model=”user.qq”/>  
  31.          </div>  
  32.     </div>  
  33.     <div class=”col-sm-offset-3 col-sm-4″>  
  34.         <button type=”submit” class=”btn btn-primary” ng-click=”submitAction(userForm)”>  
  35.             保存  
  36.         </button>  
  37.         <button type=”button” class=”btn btn-default” ng-click=”cancelAction()”>  
  38.             返回  
  39.         </button>  
  40.     </div>  
  41. </form>  

 

 

该页面中用到了angular的ng-model指令,ng-model指令用于数据的双向绑定,注意下表单中好像于user.user_name的事物,首先,controller中会通过点号前边的user获取表单数据,表单数据便是点号前面若干个像样于user_name的对应的剧情的重组。

js代码:

 

 

[html] view
plain copy

 

  1. //新扩展和修改用户Ctroller  
  2. app.controller(‘UserFormCtroller’, function($scope, $state, $stateParams, UserService) {  
  3.     if($stateParams.user_id){  
  4.         var user_id = $stateParams.user_id;  
  5.         var param = {id:user_id};  
  6.         //获取内定用户  
  7.         UserService.get(param).$promise.then(  
  8.             function(res) {  
  9.                 $scope.user = res;  
  10.             },  
  11.             function(error) {  
  12.                 console.log(“An error occurred”, error);  
  13.             }  
  14.         );  
  15.     }  
  16.     $scope.submitAction = function(userForm) {  
  17.         if(!userForm.$valid){  
  18.             return false;  
  19.         }  
  20.         if($stateParams.user_id){  
  21.             //更新用户音信  
  22.             UserService.update(param,$scope.user).$promise.then(  
  23.                 function(res) {  
  24.                     if(res.status){  
  25.                         $state.go(“user”);  
  26.                     }else{  
  27.                           
  28.                     }  
  29.                 },  
  30.                 function(error) {  
  31.                     console.log(“An error occured”, error);  
  32.                 }  
  33.             );  
  34.         }else{  
  35.             //新增  
  36.             UserService.save($scope.user).$promise.then(  
  37.                 function(res) {  
  38.                     if(res.status){  
  39.                         $state.go(“user”);  
  40.                     }else{  
  41.                           
  42.                     }  
  43.                 },  
  44.                 function(error) {  
  45.                     console.log(“An error occured”, error);  
  46.                 }  
  47.             );  
  48.         }  
  49.     };  
  50.     $scope.cancelAction = function() {  
  51.         $state.go(“user”);  
  52.     };  
  53. });  

由此UserService的save方法来新增添二个用户,而update方法则承担用户音讯的改变。

留神:在修改用户的音信在此以前,我们须求经过UserService的get方法把用户已有的消息填充到页面上。

8. 修改用户

点击列表上的【修改】链接,步向到用户修改页面:

图片 9

经过列表中的ui-sref=”user-edit({user_id:user.user_id})”这一句,就能够兑现页面包车型地铁跳转,同期,带上了user_id这些参数,能够在调控器中注入$stateParams来收获此处的参数,代码在前边已经贴过了。

9. 剔除用户

点击列表上的【删除】,将会弹出叁个删减确认的提示,如图:

图片 10

点击【分明】后,就可以通过UserService的remove方法来删除该用户。

在意:删除四个能源,也得以选用delete方法,但鉴于delete在多少浏览器中被当成了首要字,所以利用上急需写成UserService[“delete”]这种格式。

10. thinkphp路由安顿

 

[php] view
plain copy

 

  1. ‘URL_ROUTER_ON’ => true  

[php] view
plain copy

 

  1. ‘URL_ROUTE_RULES’ => array(  
  2.         array(‘api/users/:id’,’Admin/User/user_get’,”,array(‘method’=>’get’)),  
  3.         //注意:列表记录对应的路由必定要放在单条记录路由的后边,不然不恐怕获得单条记录  
  4.         array(‘api/users’,’Admin/User/user_get’,”,array(‘method’=>’get’)),  
  5.         array(‘api/users’,’Admin/User/user_post’,”,array(‘method’=>’post’)),  
  6.         array(‘api/users/:id’,’Admin/User/user_put’,”,array(‘method’=>’put’)),  
  7.         array(‘api/users/:id’,’Admin/User/user_delete’,”,array(‘method’=>’delete’)),  
  8.     )  

 

11. 后端代码

 

[php] view
plain copy

 

  1. //查询用户列表或单条记录  
  2.     public function user_get(){  
  3.         $id = I(‘id’);  
  4.         if ($id) {  
  5.             $where = array(‘user_id’ => $id);  
  6.             $users = DBUtil::queryRow($this->userModel,$where);  
  7.         }else{  
  8.             $users = DBUtil::queryList($this->userModel);  
  9.         }  
  10.         $this->response($users,’json’);  
  11.     }  
  12.       
  13.     //新扩张用户  
  14.     public function user_post(){  
  15.         $user_id = DBUtil::getMaxKey($this->userModel, ‘user_id’);  
  16.         //angular默许post过来的数据类型为Content-Type:application/json; charset=utf-8  
  17.         $userData = json_decode(file_get_contents(‘php://input’),true);  
  18.         $userData[‘user_id’] = $user_id;  
  19.         $result = DBUtil::add($this->userModel, $userData);  
  20.         $this->response(array(‘status’=>$result),’json’);  
  21.     }  
  22.       
  23.     //修改用户  
  24.     public function user_put(){  
  25.         $user_id = $_REQUEST[‘id’];  
  26.         //angular暗许post过来的数据类型为Content-Type:application/json; charset=utf-8  
  27.         $userData = json_decode(file_get_contents(‘php://input’),true);  
  28.         $result = DBUtil::save($this->userModel, array(‘user_id’ => $user_id), $userData);  
  29.         if ($result !== false) {  
  30.             $result = true;  
  31.         }  
  32.         $this->response(array(‘status’=>$result),’json’);  
  33.     }  
  34.       
  35.     //删除用户  
  36.     public function user_delete(){  
  37.         $user_id = $_REQUEST[‘id’];  
  38.         $result = DBUtil::delete($this->userModel, array(‘user_id’ => $user_id));  
  39.         $this->response(array(‘status’=>$result),’json’);  
  40.     }  

三. 去除URL中的#号

 

暗许景况下,angular通过UXC90L中的#号来分辨财富路线种类,凡是带#号的财富,统一由angular调配,而不带#号的能源,由服务端调配,假设需求去除#号,能够仿效以下步骤:

1. 启用HTML5模式

首页须求在config中注入$locationProvider,然后通过$locationProvider.html5Mode(true);来启用html5形式的路由。

2. 加入base标签

在引导页中到场<base href=”/”>

3. 后端thinkphp配置

在调控器中追加二个_empty方法,在该办法中,跳转到首页。