angularJS四大特性

来源:互联网 发布:云计算数据中心是什么 编辑:程序博客网 时间:2024/06/05 08:58

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>