本文通过实例演示AngularJS中的MVC架构，展示了如何利用ng-model、ng-controller等指令实现数据绑定与视图更新，深入剖析AngularJS框架的核心理念。
1、angularjs的MVC思想：
在Java的MVC思想中M通常是一个javabean用来存储数据，但是在angularjs中模型通常在html页面中使用ng-model指定，
controller中通常写具体的业务逻辑，M通常使用html页面
2、让我们先通过下面的例子看下angular中的MVC，
<html ng-app=’demo’>
<head>
<meta charset=”utf-8”>
<title>dymaticTemplate</title>
<script src=”lib/angular.js” type=”text/javascript” charset=”utf-8” ></script>
<script src=”controller.js” type=”text/javascript” charset=”utf-8”></script>
<script src=”controller2.js” type=”text/javascript” charset=”utf-8”></script>
</head>
<body>
<DIV ng-controller=”telephoneController”>
<ul>
<li ng-repeat=”phone in phoneList”>
<span>{{phone.name}}</span>
<p>{{phone.description}}</p>
</li>
</ul>
</DIV>
<hr>
<span>Extend:</span>
<div ng-controller=”phoneListExtendController”>
I have {{friends.length}} friends. They are:
<input type=”search” ng-model=”q” placeholder=”filter friends…” />
<ul>
<li ng-repeat=”friend in friends | filter:q”>
[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
</ul>
<hr>
<ul>
<li ng-repeat=”name in names | filter : ‘j’”>
[{{$index + 1}}] is {{name}}.
</li>
total {{names.length}}
</ul>
<hr>
<ul>
<li >
{{filters | myFilter}}.
</li>
</ul>
</div>
</body>
</html>
说明 ：
M:
扫一扫
4509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
