AngularJS提交表单,表单编辑默认值

研究了下高大上的AngularJS决定试试它的表单编辑提交功能,据说比JQuery强的不是一星半点。
好奇呀,试试吧。。。。。搞了好久,尼玛。。。靠。。靠。。靠。。尼玛 。。靠。。靠。。。。好吧,谁让我手欠呢。

搜索到了很多关于AngularJS Form的案例
如:
http://www.lupaworld.com/article-240000-4.html
http://www.angularjs.cn/A08j
https://github.com/tiw/angularjs-tutorial
https://github.com/tiw/angularjs-tutorial/blob/master/ng-form.markdown
https://github.com/tiw/angularjs-tutorial/blob/master/ng-form2.markdown

模仿着我要搞了个AngularJS Form,但是问题来了。。。。
发现初始化时候ng-model 跟 input 标签里的 value 不默契,冲突。。
后来想再AngularJS controller 里预先赋值 $scope.formData = {‘name’:’张三’};
可以通过php程序把值赋到这个AngularJS controller里

<!-- AngularJS controller -->
<script>
    var formApp = angular.module('formApp', []);
    function formController($scope, $http) {
        $scope.formData = {'name':'张三','remark':'备注'};
        $scope.myForm = function() {
            $http({
                method  : 'POST',
                url     : '/role/edit',
                data    : $.param($scope.formData),  // pass in data as strings
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
            })
                .success(function(data) {
                    console.log(data);
                    if (!data.success) {
                    } else {
                    }
                });
        };
    }
</script>
<!--对应form里的input调整-->
<input type="text" name="name" ng-model="formData.name" class="form-control" placeholder="Role Name">

后来又搜啊搜 发现还有其他办法,这么个东东 ng-init=”formData.name=’张三'”

<input type="text" name="name" ng-model="formData.name" ng-init="formData.name='张三'" value="">

好了,终于世界又和平了。。。。完。。。。

AngularJS 路由,动态设定模板templateUrl

AngularJS 本身就涉及到了WEB开发理念中的MVC,即模型 视图 控制器
而在PHP开发中已经有一套MVC的模型,难免有些晕
此段代码主要功能:根据URL动态参数变化,动态替换AngularJS所指定的模板
http://xxtime.com/index.html#/role/edit/2 指向 http://xxtime.com/role/edit?id=2
http://xxtime.com/index.html#/role/edit/3 指向 http://xxtime.com/role/edit?id=3
参数详解:
url: 是匹配的url规则
templateUrl: 是指定模板,此参数可以
参考
https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters.
https://github.com/angular-ui/ui-router/wiki

上代码:

// 编辑角色
.state('/role/edit', {
    url: "/role/edit/:id", //url: "/role/edit?id",
    templateUrl: function($routeParams) {
        return '/role/edit?id=' + $routeParams.id + '&_=' + Math.random(); //new Date().getTime();
    },
    data: {pageTitle: '编辑角色'},
    controller: "GeneralPageController",
    resolve: {
        deps: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load([{
                name: 'MetronicApp',
                insertBefore: '#ng_load_plugins_before',
                files: []
            }]);
        }]
    }
})

url 后面增加了js随机数 防止缓存 Math.random()

题记:这小破段代码搞了我好久,在stackoverflow搜索到答案后,满脑子的草泥马飞过。靠,真想骂人。搞了很久,原来这样

 

 

@2015-09-30 补充通用路由

// 通用路由
        .state('general', {
            url: "/:controller/:action/:id",
            templateUrl: function ($routeParams) {
                return '/' + $routeParams.controller + '/' + $routeParams.action + '?id=' + $routeParams.id + '&_=' + Math.random();
            },
            data: {pageTitle: 'XXTIME', pageSubTitle: 'manage system'},
            controller: "GeneralPageController",
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load([{
                        name: 'MetronicApp',
                        files: [
                            'js/controllers/GeneralPageController.js'
                        ]
                    }]);
                }]
            }
        })

        // 通用路由2
        .state('general2', {
            url: "/:controller/:action",
            templateUrl: function ($routeParams) {
                return '/' + $routeParams.controller + '/' + $routeParams.action + '?_=' + Math.random();
            },
            data: {pageTitle: 'XXTIME', pageSubTitle: 'manage system'},
            controller: "GeneralPageController",
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load([{
                        name: 'MetronicApp',
                        files: [
                            'js/controllers/GeneralPageController.js'
                        ]
                    }]);
                }]
            }
        })

        // 通用路由3
        .state('general3', {
            url: "/:controller",
            templateUrl: function ($routeParams) {
                return '/' + $routeParams.controller + '/?_=' + Math.random();
            },
            data: {pageTitle: 'XXTIME', pageSubTitle: 'manage system'},
            controller: "GeneralPageController",
            resolve: {
                deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load([{
                        name: 'MetronicApp',
                        files: [
                            'js/controllers/GeneralPageController.js'
                        ]
                    }]);
                }]
            }
        })

php分页,bootstrap样式分页上一页 下一页 首页 末页

自己写了一个分页方法,大家用的话可以自己包装下,弄一个类方法

样式参考 http://getbootstrap.com/components/#pagination-default

上代码

/**
 * 分页方法
 * @param int $total 总条数
 * @param int $page 当前页
 * @param string $urlFormat URL格式 如: ?page=
 * @param string $onclick = JavascriptSubmit(#page#);
 * @param array $config =array('size'=>20, 'letter'=>3, 'showType'=>'all');
 * @return string
 */
function page($total = 1, $page = 1, $urlFormat = '?page=', $onclick = '', $config = array())
{
    // 样式参考 http://getbootstrap.com/components/#pagination-default

    // 样式设定
    $letter = isset($config['letter']) ? $config['letter'] : 3;
    $showType = isset($config['showType']) ? $config['showType'] : 'all';
    $size = isset($config['size']) ? $config['size'] : 20;

    $pre = $next = $after = $before = '';
    $total_pages = ceil($total / $size);

    // 首页
    if ($page == 1) {
        $first_page = "<li class='disabled'><a href='javascript:;' class='disabled'>First</a></li>";
    } else {
        $on = str_replace('#page#', 1, $onclick);
        $first_page = "<li><a onclick='{$on}' href='#url#1'>First</a></li>";
    }

    // 末页
    if ($page == $total_pages) {
        $last_page = "<li class='disabled'><a href='javascript:;' class='disabled'>Last</a></li>";
    } else {
        $on = str_replace('#page#', $total_pages, $onclick);
        $last_page = "<li><a onclick='{$on}' href='#url#{$total_pages}'>Last</a></li>";
    }

    // 当前页
    $current = "<li><a href='javascript:;' class='active'>{$page}<span class='sr-only'>(current)</span></a></li>";

    // 前一页
    if ($page == 1) {
        $pre = "<li class='disabled'><a href='javascript:;'><span aria-hidden='true'>&laquo;</span><span class='sr-only'>Previous</span></a></li>";
    } else {
        $n = $page - 1;
        $on = str_replace('#page#', $n, $onclick);
        $pre = "<li><a onclick='{$on}' href='#url#{$n}'><span aria-hidden='true'>&laquo;</span><span class='sr-only'>Previous</span></a></li>";
    }

    // 后一页
    if ($page == $total_pages) {
        $next = "<li class='disabled'><a href='javascript:;'><span aria-hidden='true'>&raquo;</span><span class='sr-only'>Next</span></a></li>";
    } else {
        $n = $page + 1;
        $on = str_replace('#page#', $n, $onclick);
        $next = "<li><a onclick='{$on}' href='#url#{$n}'><span aria-hidden='true'>&raquo;</span><span class='sr-only'>Next</span></a></li>";
    }

    // body页
    for ($i = 0; $i < $letter; $i++) {
        $n = $page - $letter + $i;
        if ($n > 0) {
            $on = str_replace('#page#', $n, $onclick);
            $before .= "<li><a onclick='{$on}' href='#url#{$n}'>{$n}</a></li>";
        }
    }
    for ($i = 1; $i <= $letter; $i++) {
        $n = $page + $i;
        if ($n <= $total_pages) {
            $on = str_replace('#page#', $n, $onclick);
            $after .= "<li><a onclick='{$on}' href='#url#{$n}'>{$n}</a></li>";
        }
    }

    // 展示类型
    if ($showType == 'all') {
        $html = $first_page . $pre . $before . $current . $after . $next . $last_page;
    } elseif ($showType == 'pn') {
        $html = $pre . $before . $current . $after . $next;
    } elseif ($showType == 'fl') {
        $html = $first_page . $before . $current . $after . $last_page;
    } else {
        $html = $before . $current . $after;
    }
    if (!$urlFormat) {
        $preg = "/href='#url#[0-9]*'/i";
        $html = preg_replace($preg, "href='javascript:;'", $html);
    }
    $html = '<nav><ul class="pagination">' . str_replace('#url#', $urlFormat, $html) . '</ul></nav>';
    return $html;
}

XAMPP oracle for Mac OS

题外话:

最近发现我的文章被很多网站copy,图片都盗链的我的,我辛辛苦苦写的文章就变成你的了 ?过分了啊!加个出处链接也行啊!太过分了!

题记:
用了很久Linux,在linux上开发习惯了,后来用mac本本,发现这本本搭建开发环境很是痛苦啊。
我向来是喜欢手动源程序编译mysql php nginx 等等。
我需要的环境略微有点复杂,mysql pdo oci8 soap mongodb redis memcache phalcon 结果发现 编译mysql 和 php 问题很多啊,折腾许久有结果了,却不理想。
所以一直以来我用的都是virtualBox运行的CentOS作为开发环境,
但是virtualBox存在一个缓存问题,参见我以前的文章 http://blog.xxtime.com/961
总不是长久之计,于是先改用xampp吧,对我而言xampp常用的环境基本都差不多了,只是oracle的oci8拓展没有安装

第一步:下载 instantclient_11_2 这里我下载的是64位的
下载页面 http://www.oracle.com/technetwork/topics/intel-macsoft-096467.html
下载 instantclient-basic-macos.x64-11.2.0.4.0.zip 和 instantclient-sdk-macos.x64-11.2.0.4.0.zip
分别解压后 把 sdk移动到instantclient_11_2里面
然后把合并的instantclient_11_2移动到 /usr/local/oracle/lib/instantclient_11_2

注:其实xampp自己有一个目录是instantclient,也可以无需下载(我没测过,嘻嘻),位置在:/Applications/XAMPP/xamppfiles/lib/instantclient-11.2.0.3.0

第二步:创建软连
进入目录/usr/local/oracle/lib/instantclient_11_2

cd instantclient_11_2
ln -s libclntsh.dylib.11.1 libclntsh.dylib
ln -s libocci.dylib.11.1 libocci.dylib

第三步:xcode环境软连接,如已经操作过可忽略

sudo ln -s /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.9.sdk/usr/include/ /usr/include

第四步:安装oci8

sudo /Applications/XAMPP/xamppfiles/bin/pecl install oci8

等待一会儿,直到要求录入信息时候填写:
instantclient,/usr/local/oracle/lib/instantclient_11_2

第五步:
编辑 /Applications/XAMPP/xamppfiles/etc/php.ini
在里面加入一行:extension=oci8.so

第六步:配置环境变量DYLD_LIBRARY_PATH,编辑文件/Applications/XAMPP/xamppfiles/bin/envvars

sudo vim /Applications/XAMPP/xamppfiles/bin/envvars

修改类似这样:
其中/usr/local/oracle/lib/instantclient_11_2是oracle instantclient的位置

if test "x$DYLD_LIBRARY_PATH" != "x" ; then
  DYLD_LIBRARY_PATH="/Applications/XAMPP/xamppfiles/lib:/usr/local/oracle/lib/instantclient_11_2:$DYLD_LIBRARY_PATH"
else
  DYLD_LIBRARY_PATH="/Applications/XAMPP/xamppfiles/lib:/usr/local/oracle/lib/instantclient_11_2"
fi
export DYLD_LIBRARY_PATH

第七步:重启xampp

本文参考参考
http://www.binaryline.co.th/archives/132/comment-page-1
http://www.oracle.com/technetwork/topics/intel-macsoft-096467.html

php pdo 连接报错 Connection failed: SQLSTATE[HY000] [2002] No such file or directory

错误

Connection failed: SQLSTATE[HY000] [2002] No such file or directory

环境概述:
MacOS
xampp 搭建的开发环境 apache mysql php
xampp 已支持mysql oracle 测试ok,且 phpinfo已上显示支持pdo_mysql pdo_pgsql pdo_sqlite
其中mysql我用的是brew包管理安装到机器里面的,而非xampp自带的mysql

php pdo 连接报错 Connection failed: SQLSTATE[HY000] [2002] No such file or directory
开始以为找不到文件是因为 url rewrite导致的,(因为从nginx切换到apache)结果跟踪程序发现是 new pdo 报错

经过搜索一些资料研究发现:
这个是php.ini配置文件中pdo_mysql.default_socket指定的mysql.sock路径不对
我的mysql.sock文件在 /private/tmp/mysql.sock
所以要设置:

pdo_mysql.default_socket=/private/tmp/mysql.sock

如果不知道自己的mysql.sock在哪里可以搜索(因为编译安装,和yum、apt-get、或者brew等包管理工具安装的位置不一样)

sudo find / -name ‘mysql.sock’

参考 http://www.xuebuyuan.com/1659711.html