infotechnohelp/cakephp-angular-1

CakePHP 3 内置的 Angular 1 插件

安装: 413

依赖项: 0

建议者: 0

安全: 0

星标: 0

分支: 0

类型:cakephp-plugin

1.0.0 2018-04-15 13:47 UTC

This package is not auto-updated.

Last update: 2024-09-24 06:05:29 UTC


README

加载插件

APP/config/bootstrap.php

Plugin::load('Angular1', ['routes' => true]);

基本实现

APP/src/Template/Layout/default.ctp(或任何 .ctp

注意!!! 请勿忘记首先加载 jQuery

js 变量 angular1containerangular1 应当未被定义

<?= $this->element('Angular1.initBasic') ?>
<div data-ng-app="App"></div>

现在您可以在 data-ng-app 元素内添加自定义 Angular 控制器

自定义控制器

APP/webroot/js/Angular/Controller/Any/index.js

app.controller('any', function ($scope, $rootScope) {
    $scope.init = function () {};
});

... .ctp

<?= $this->Html->script('Angular/Controller/Any/index') ?>

<div data-ng-app="App">

<div ng-controller="any" ng-init="init()"></div>

</div>

服务 API

设置默认 API 参数

默认情况下,js 变量 angular1 拥有如下参数

     angular1.api.root: <?= \Cake\Routing\Router::url('/') ?>
   angular1.api.plugin: null
   angular1.api.prefix: api
angular1.api.extension: null

URL 公式

root + plugin/ + prefix/ + 'Any input' + .extension

您可以设置这些参数中的任何一个的新值

示例

发送到 APP/src/Controller/Api/AnyController.php→ownMethod()

1

(AppRoot/api/any/own-method)

app.controller('any', function ($scope, $rootScope, api) {
        api.get('any/own-method', function (response) {
            var data = response.data;
        });
        api.post('any/own-method', {id:1}, function (response) {
            var data = response.data;
        });
});
2

(AppRoot/api/any/own-method.json)

app.controller('any', function ($scope, $rootScope, api) {
        angular1.api.extension = 'json';
        
        api.get('any/own-method', function (response) {
            var data = response.data;
        });
        
        angular1.api.extension = null;
});
3

(AppRoot/my-plugin/api/any/own-method)

app.controller('any', function ($scope, $rootScope, api) {
        angular1.api.plugin = 'my-plugin';
        
        api.get('any/own-method', function (response) {
            var data = response.data;
        });
        
        angular1.api.plugin = null;
});

所有 api 服务请求具有相同的配置。(js 变量 angular1.api

在 Angular 控制器结束时重置它们是一个好习惯

为了仅对当前请求方法进行一次配置更改,get()post() 方法有额外的可选参数

插件、前缀、扩展

示例
1

(AppRoot/any/own-method.json)

app.controller('any', function ($scope, $rootScope, api) {
        api.get('any/own-method', function (response) {
            var data = response.data;
        }, undefined, null, 'json');
});
2

(AppRoot/my-plugin/api/any/own-method)

app.controller('any', function ($scope, $rootScope, api) {
        api.get('any/own-method', function (response) {
            var data = response.data;
        }, 'my-plugin');
});

注意!!! 在未定义参数的情况下,方法将使用 js 变量 angular1.api 的默认值

3

(AppRoot/my-plugin/api/any/own-method.xml)

app.controller('any', function ($scope, $rootScope, api) {
        angular1.api.plugin = 'my-plugin';
        angular1.api.extension = 'xml';
        
        api.get('any/own-method', function (response) {
            var data = response.data;
        });
        
        angular1.api.plugin = null;
        angular1.api.extension = null;
});

如果 URL 值为空(''),则抛出控制台错误 Empty url