AngularJS 学习(1)

前几天看到有招聘需求写着 熟悉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跟数据模型绑定之后,操作数据模型



猜你喜欢

转载自blog.csdn.net/fei2253/article/details/38357091