angularJs初体验，实现双向数据绑定！使用体会：比较爽

Posted 2020-09-29 帅到要去报警

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularJs初体验，实现双向数据绑定！使用体会：比较爽相关的知识，希望对你有一定的参考价值。

使用初体验：ng 双向数据绑定：

最简单的双向数据绑定：（使用默认模块控制）

<body ng-app>
<input type="text" ng-model=‘ngName‘>
<h1>{{ngName}}</h1>
</body>

完成对数据的初始化：

//初始化原理：ng-app 初始完之后，就会往在ng-init里面赋值一个初始值：world , 这个值会自动绑定到下面 ；
<body ng-app ng-init="ngName = ‘张三‘">
<input type="text" ng-model=‘ngName‘>
<h1>{{ngName}}</h1>
</body>

注意：angularJs默认的是双向数据绑定，单项数据绑定 {{::ngName}}

使用自定义模块控制：（完成对数据的初始化）

<body ng-app="myApp" ng-controller="myAppController">
<input type="text" ng-model=‘userName‘>
<h1>{{userName}}</h1>
</body>
<script type="text/javascript">
var myApp = angular.module(‘myApp‘,[]);
myApp.controller(‘myAppController‘,[‘$scope‘,function($scope){    
    $scope.userName = ‘李四‘;
}]);
</script>

还可以这样：

<body ng-app="myApp" ng-controller="myAppController">
<input type="text" ng-model=‘user.name‘>
<input type="text" ng-model=‘user.age‘>
<h1>{{user.name}}的年纪是{{user.age}}</h1>
</body>
<script type="text/javascript">
var myApp = angular.module(‘myApp‘,[]);
myApp.controller(‘myAppController‘,[‘$scope‘,function($scope){    
    $scope.user = {};
    $scope.user.name = "张三";
    $scope.user.age = 20;
}]);
</script>

angularJs降低了大量的dom操作：

案例一：实现点击增加

<body ng-app>
<input type=‘number‘ ng-model=‘value‘>
<input type="button" ng-click=‘value = value+1‘ value="增加">
<script type=‘text/javascript‘ src=‘node_modules/angular/angular.js‘></script>
<script type=‘text/javascript‘ ></script>
</body>

案例二：实现简单的加法运算

<body ng-app>
<input type="number" value="1" ng-model=‘parameter1‘>
<span>+</span>
<input type="number" value="2" ng-model=‘parameter2‘>
<input type="button" value="=" ng-click=‘result = parameter1 + parameter2‘>
<input type="text" ng-model=‘result‘>
<script type=‘text/javascript‘ src=‘node_modules/angular/angular.js‘></script>
</body>