wahengjavascript: 9月 2015

2015年9月30日星期三

node js , Module

from:
http://www.sitepoint.com/understanding-module-exports-exports-node-js/

to gain a better understanding of module.exports and exports in Node.js.

2015年9月29日星期二

polymer

http://developerworks.github.io/2014/06/11/angular-and-polymer-data-binding/

Angular 和Polymer

Angular 是一个非常强大的MVVM框架, Polymer 是一个基于Web组件的对自定义元素的增强库,如何让他们和谐地共存于同一个应用. 本文将介绍通过数据绑定如何连接Angular组件和Polymer元素.

这幅图也说明了Angular和Polymer的交集 - 数据绑定

Angular提供的功能:

指令
依赖注入
测试支持
路由
服务
服务器通信

Polymer提供的功能:

创建自定义元素
Widgets
抹平(Ployfills)浏览器特性
封装DOM
基于Web标准

两个库之间有一些相同的特性. 两个库都实现了数据绑定

互操作

Angular 和Polymer 的互操作分为两个层次

在DOM层次上的互操作
在数据绑定层次上的互操作

DOM互操作

通过DOM在自定义元素(Polymer)和Angular间进行互操作

下面是一个示例, 在Angular应用程序中包含一个Polymer自定义元素.

在上图中, Angular管理cool变量的数据绑定. 当变量cool的值改变时, 所有占位符的值都会变化, 即时是绑定的自定义元素的属性.

my-element 仅仅是一个封装了输入字段的Polymer自定义元素,代码如下:

<polymer-element name="my-element">
  <template>
    <p>
      <input type="text" value="{{message}}"> Polymer binding: {{message}}
    </p>
  </template>
  <script type="application/dart" src="my_element.dart"></script>
</polymer-element>

Angular代码能够设置<my-element>元素上的属性,监听来自元素<my-element>的事件,即使是在<my-element>中插入子元素.因此Angular能向操作其他DOM元素一样操作Polymer的自定义元素

但是,有一个问题,在下面的GIF图片中,你能看得见是什么问题么?

在Polymer中, 任何对变量cool的修改不会被传播到外层DOM或Angular. 我们需要一个双向的数据绑定: Angular->Polymer方向,以及Polymer->Angular

数据绑定互操作

Polymer通过Node.bind()管理数据绑定. Node.bind() is a “new method added to all DOM nodes which instructs them to bind the named property to the data provided”. Angular does not use Node.bind() out of the box, so Angular is unable to listen for changes that are initiated from Polymer.

Justin Fagnani, an engineer on the Dart team, released angular_node_bind, a Dart package that bridges the Angular and Polymer worlds. It is an Angular module that can listen for Node.bind() changes and propagate the changes into Angular.

Justin explains why this package can help:

Node.bind() takes care of setting up the binding, including two-way bindings, eliminating the need for directives for every property for two-way bindings.
Custom elements that expose properties will be properly bound, again including two-way bindings. You can use the growing collection of custom element libraries in your Angular app.

To use angular_node_bind, add the following to your app’s pubspec.yaml file:

name: angularpolymer
description: A demo of Angular and Polymer data binding.
dependencies:
  angular: any
  angular_node_bind: any
  browser: any
  polymer: any
transformers:
- polymer:
    entry_points: web/angularpolymer.html

import 'package:polymer/polymer.dart' show initPolymer;
import 'package:angular/angular.dart' show ngBootstrap;
import 'package:angular_node_bind/angular_node_bind.dart' show NodeBindModule;
void main() {
  initPolymer().run(() {
    ngBootstrap(module: new NodeBindModule());
  });
}

最后改变用于绑定Polyment元素的语法,从{ {...} }改为[[...]]

1	<my-element message="[[cool]]"></my-element>

注意绑定表达式是[[cool]]而不是. angular_node_bind 模块查找的是[[...]],并连接Node.bind().

需要注意的是:
在Angular中所作的变更如何反映在Polymer元素中,以及在Polymer中所作的修改如何反映到Angular代码.

摘要

至少有两种方式可以在Angular应用程序中使用Polymer自定义元素. Polymer元素就像一般的DOM元素一样,有属性,会产生事件,并且能包含子元素.使用angular_node_bind包连接Polymer的数据绑定到Angular的数据绑定,实现真正双向的数据共享.

2015年9月21日星期一

i18 language change

function myfunction(){
$.i18n.setLng("zh-TW", function(t) {$(document).i18n();});
}

2015年9月20日星期日

font css , website

font-family: font|initial|inherit;

https://www.google.com/fonts/#QuickUsePlace:quickUse

2015年9月17日星期四

bootstrap - table example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="bootstrap-table.js"></script>
<script>
$('#table').bootstrapTable({
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}],
data: [{
id: 1,
name: 'Item 1',
price: '$1'
}, {
id: 2,
name: 'Item 2',
price: '$2'
}]
});

</script>
</head>
<body>

<table id="table"></table>


</body>
</html>

2015年9月7日星期一

JSON.stringify & JSON.parse

JSON.stringify turns an object in to a JSON text and stores that JSON text in a string.

JSON.parse turns a string of JSON text into an object.

2015年9月3日星期四

angular js form validate

from:
http://www.w3schools.com/angular/tryit.asp?filename=try_ng_validate

Property	Description
$dirty	The user has interacted with the field.
$valid	The field content is valid.
$invalid	The field content is invalid.
$pristine	User has not interacted with the field yet.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>

</body>
</html>

angular js $scope controler example

index.html

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Example - example-example42-production</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="js.js"></script>

</head>

<body ng-app="scopeExample">
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr> {{greeting}}
</div>
</body>

</html>

======================
js.js

angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';

$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);

2015年9月1日星期二

google map dialogue above, box information click pop up

5 ways to customize Google Maps InfoWindow

http://maps.marnoto.com/en/5wayscustomizeinfowindow/example.html

2015年9月30日 星期三

2015年9月29日 星期二

Angular 和Polymer

互操作

DOM互操作

数据绑定互操作

摘要

2015年9月21日 星期一

2015年9月20日 星期日

2015年9月17日 星期四

2015年9月7日 星期一

2015年9月3日 星期四

2015年9月1日 星期二