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

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

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

    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.