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>

注意:

angularJS虽然摈弃了DOM操作,但是angularJS还是提供了操作 DOM 的方法:

(使用 angular 提供的 jqlite 也就是angular里面帮我们提供的一个轻量级的 jQuery)

<script type="text/javascript">
//没有用$选中器,而是 angular.element('body'); //拿到 body
angular.element('body');
</script>

angularJS四大特点

1、MVC;

2、模块化;

3、自动化双向数据绑定;

4、指令系统;

angularJS安装

1、直接下载angularJS包:

- https://github.com/angular/angularjs.js/releases

2、使用CDN上的angularJS

- http://cdn.code.baidu.com/

3、使用Bower安装(推荐)

- bower install angular

4、推荐使用 NPM 安装(推荐)

- npm install angular --save

angularJS 使用总结

1、angularJS最大程度上降低了页面上的DOM操作;

2、让javascript中,专注业务逻辑的代码;

3、通过自定义指令实现组件化编程;

4、代码结构更加简单;

5、angularJs解放了传统 javascript 中频繁的DOM操作,同时也还原了javascript的本质;

上一篇:python 列表(list)排序


下一篇:第五章 循环程序设计示例