Category: AngularJS

AngularJS 学习笔记 4

7/3/2014

这次学习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>

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>

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

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

0 Comments

AngularJS 学习笔记 4

AngularJS 学习笔记3

AngularJS 学习笔记2

AngularJS 学习笔记1

Author

Archives

Categories