前几天看到有招聘需求写着 熟悉AngularJS者优先考虑, 于是就开始玩玩这个js框架
AngularJS 是谷歌旗下的一个js开源框架 ,
其几个主要性质有以下:
MVC
依赖注入
模块化Model
Service
过滤器
双向数据绑定(这个比较牛逼)
Diretive
UnitTest
其他不说,先上几个简单的Demo先
<html ><head>
<script type="text/javascript" src="angular.js"></script>
</head>
<body ng-app> <!--ng-app定义了该dom由ng控制-->
your name <input type="text" ng-model="yourname" placeholder="world"> <!--ng-model定义数据模型-->
<font color="red">这里使用的是双向数据绑定</font>
<hr>
Hello {{yourname|| "james" }}! <!--{{}}表达式-->
<div ng-app="" ng-init="quantity=3 ; weight=2 ; cost= 10"> <!-- ng-init:初始化-->
长:<input type="text" ng-model="quantity" /><br/>
宽:<input type="text" ng-model="weight" /><br/>
高:<input type="text" ng-model="cost" /><br/>
<p>体积(长*高*体积): {{ quantity*weight*cost}}
</div>
<p>带对象的表达式</p>
<div ng-app="" ng-init="user={name:'howie',age:20 ,password:'123456'}">
<p>用户名:{{user.name}}</p>
<p>年龄: {{user.age}}</p>
<p>密码: {{user.password}}</p>
</div>
<p>ng控制器</p>
<font color="red">通常状态下,不会使用ng-init来定义数据,而是使用一个ng-Controller的控制器来定义的</font>
<div ng-app="" ng-controller="personController"> <!--ng-controller:定义ng控制器-->
用户名:<input type="text" ng-model="person.name" value=""/><br/>
密码:<input type="text" ng-model="person.password" value=""/><br/>
<p>{{perosn.name}} {{perosn.password}}
<script>
function personController($scope){ //$scope参数名称不能改 ,使用依赖注入的方式注入 定义的控制器的范围
$scope.person={
name:"howie",
password:123456
};
}
</script>
</div>
</body>
</html>
一个简单demo,哈!随后继续学习
这里讲一下AngularJS 的体会
1. 不操作DOM,而是通过DOM跟数据模型绑定之后,操作数据模型