鲍勃の部屋
  • Blog
  • Work
  • About
  • Contact

angularJS 如何通过 validator.w3.org 验证

7/30/2014

0 Comments

 
答案是通过增加 data- 前缀,见例子


<!DOCTYPE html>
<html data-ng-app>
<head>
<meta charset="utf-8"/>

<title>This is first webpage</title>
</head>

<body>
Temperature: <input data-ng-model="temp" />
<p data-ng-show="temp>=17">Not too bad</p>
<p data-ng-show="temp<17">A little chilly {{temp}}</p>


<script src="angular.min.js"></script>

</body>
</html>
注一:只有 ng-app 没有np-controller
注二: ng_show 的条件显示用法

收工
0 Comments

Win7 开热点

7/17/2014

0 Comments

 

1. run cmd as admin $:
netsh wlan set hostednetwork mode=allow ssid=bob key=bobWiFi 

2. Control Panel -> Network and Internet -> Manage Wireless Networks -> Adapter proterties -> Sharing -> Check 2 options && select connection (Wireless Network connection)

3. $:
netsh wlan start hostednetwork



0 Comments

Express 之Hello world -- 第1课

7/3/2014

0 Comments

 
    Express is a minimal and flexible node.js web application framework, providing a robust set of features for building single and multi-page, and hybrid web applications.


官网地址

下面我们开始 express 的 hello world 之旅 (确保你已经安装了nodeJS哟 )

第一步,任意随意创建一个目录,比如叫 hello-express 

然后新建一个文件叫 package.json   (express 的版本号可通过 npm info express version 获取)
{
  "name": "hello-express",
  "description": "hello world test app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "4.4.5"
  }
}

Read More
0 Comments

AngularJS 学习笔记 4

7/3/2014

0 Comments

 
这次学习angularJS的一个很重要的知识点---- Directives.
假设现在要实现一个购物车显示与编辑功能。
默认的,没有使用angularJS之前的纯 html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<script >

</script>
</head>
<body>

<h1>Your Shopping Cart</h1>

<div>
<label>Name: </label> <label>数量: </label><label>Price</label> <label>Total</label> <label>删除</label>
</div>

<div>
<label>Cat</label><input size="3" /><label>1.00</label> <label>10.00</label><button>Remove</button>
</div>

<div>
<label>Dog</label><input size="3" /><label>2.50</label> <label>10.00</label><button>Remove</button>
</div>

<div>
<label>Pig</label><input size="3" /><label>29.0</label> <label>261.0</label><button>Remove</button>
</div>

</body>
</html>

Read More
0 Comments

AngularJS 学习笔记3

6/30/2014

0 Comments

 
今天学习数据绑定  Data-Binding

在介绍data-binding 之前, 回想一下普通的动态语言,如PHP, ASP, JSP 或者js的模板,或者jquery 是如何把数据(Data) 展示给用户(View) 的: 是不是都需要通过一段逻辑代码(Controller) 处理完数据之后,结合模板生成最终的(view) 。 这一切工作都很好,并且也没什么可怀疑的。

不过,如果说数据发生了改变呢? 再重复一下以上步骤,生成view后,通知更新view就好了。

那么data 发生变化,需要通知controller处理, controller处理完通知更新 view , 这些都需要代码进行处理,

能不能他们自己动态的管理彼此,不用再需要我们针对性的处理了呢?

答案就是: 使用数据绑定

请看 angularJS使用 数据绑定的实例:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script >
function bob($scope){

$scope.name = "bob";
}
</script>
</head>
<body ng-controller="bob">
<input ng-model="name"/>
Hello {{name}}
</body>
</html>

Read More
0 Comments

Jasmine 使用初探

6/27/2014

0 Comments

 
什么是JASMINE:

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests. This guide is running against Jasmine version 2.0.0.

第一步:安装

bob采用的是bower安装, so

1.安装nodeJS
2.npm install bower -g
3.bower install jasmine


第二步:看官方demo
在$YOUR_PATH/bower_components\jasmine\dist\ 下 解压jasmine-standalone-2.0.0.zip
然后运行里面的 SpecRunner.html

可以看到jasmine的运行界面如下

Read More
0 Comments

AngularJS 学习笔记2

6/24/2014

0 Comments

 
今天学习 AngularJS 之 Hello world !

打开你喜欢的任意一款编辑器, 编写文件angularjs.html,输入以下内容
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script >
function bobcontroller($scope){

$scope.name = 'bob';
}
</script>
</head>
<body ng-controller="bobcontroller">
Hello {{name}}
</body>
</html>
用任意一款浏览器打开 angularjs.html, 看到了什么?

Hello bob 对不对

收工!
0 Comments

AngularJS 学习笔记1

6/24/2014

0 Comments

 
Picture
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。


Read More
0 Comments

和鲍勃一起来学Bootstrap - 第4课

6/24/2014

0 Comments

 
这节课是最后一课了。

为什么 ??

因为bootstrap的学习曲线比较平滑,文档又比较全,

而且更重要的是 bob发现了一个好网站, 大家只要对照这个一个一个练习就好了。


有什么不懂的可以留言一起探讨

祝 大家学习 愉快!



http://www.tutorialspoint.com/bootstrap/
0 Comments

和鲍勃一起来学Bootstrap - 第3课

6/20/2014

0 Comments

 
本课学习 栅格系统 Grid System
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理:

  1. 行(row)必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
  2. 使用行(row)在水平方向创建一组列(column)。
  3. 你的内容应当放置于列(column)内,而且,只有列(column)可以作为行(row)的直接子元素。
  4. 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  5. 通过设置padding从而创建列(column)之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

Read More
0 Comments
<<Previous

    Author

    鲍勃 (上海)
    互联网码农

    小A

    Archives

    July 2014
    June 2014
    May 2014

    Categories

    All
    AngularJS
    App
    Bootstrap
    Cocos2dx-c++
    Css
    CSS3
    Design Pattern
    Express
    Funny
    Game
    Html5
    Jasmine
    Javascript
    Lua
    Music
    Node.js
    Pattern
    Phonegap
    Php
    Python
    Tdd
    Tips

    RSS Feed

Powered by Create your own unique website with customizable templates.