1、mvc
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="MyFirstCtrl"><!--MyFirstCtrl函数充当控制器-->
<h1>{{data.message + " world"}}</h1> <!--视图-->
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
</body>
</html>
main.js
function MyFirstCtrl($scope){
$scope.data = {message: "Hello"};//模型
}
2、模块化
html
<div ng-app="myApp"></div><!--myApp是模块名，ng-app相当于c中的main函数，程序加载到ng-app时就知道后续的代码交由angular来管理了，因此在任一个单页angularjs 应用中只能出现一个ng-app-->
js
var myApp = angular.module('myApp', []);//定义一个模块
3、指令系统
html
<html ng-app="MyModule">
<body>
<hello></hello><--自定义指令-->
</body>
</html>
js
var myModule=angular.module("MyModule",[]);
myModule.directive("hello",function(){//定义指令
return {
restrict:'E',
template:'<div>Hello world</div>',
replace:true
}
});
4、双向数据绑定
单向数据绑定：jquery、backbone、flex，模版+数据进行整合生成html加入文档流中
双向数据绑定：视图与数据是对应的，当视图发生变化、数据模型也立即发生变化；数据模型发生变化，视图自动更新。借助事件机制
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input ng-model="greeting.text" /><!--ng-model双向数据绑定-->
<p>{{greeting.text}},AngularJS</p>
</body>
<script src="../js/angular.min.js"></script>
</html>
1369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
