AngularJS双向数据绑定案例
angularJS常用属性
ng-app:可在任何元素上使用, 代表angular应用的作用域
ng-model:指定模型
ng-controller:指定控制器
ng-bind或者{{}}:进行属性取值,用于显示
什么是双向数据绑定
更新模型,视图自动更新,更新视图,模型自动更新
步骤:
1.导入AngularJS的相关jar包
angular.js
angular.min.js(基本功能,只需要导入这个jar包)
从angularJS1.2版本后,路由功能被单独分离出来,如果要使用路由功能需要导入下面这个jar包(此案例可不引)
angular-route.js
angular-route.min.js
{上面两个jar均都有min版和没有min版,区别在于,min版删除了代码中的空格等空字符,在磁盘上占据的内存较没有min版的要小,如果只是开发,只需要导入min版即可,如果要看源代码,最好导没有min版}
2.创建一个新的html页面
3.在界面导入AngularJs的核心包
<script type="text/javascript" src="../js/angular.min.js"></script>
4.在<body>标签中完成以下代码编写
<!--ng-app 是angular编程入口,是模块作用域-->
<div ng-app>
<!--ng-model模型作用-->
<input type="text" ng-model="myModel" name="name" />
<div>
<!--{{}} 的使用相当于ng-bind-->
hello, {{myModel}}
</div>
</div>
5.运行程序,可获得这样的效果
6.在文本框中输入数据,可获得如下结果
这里特别注意几个问题:
- ng-app后面没有属性,不要写成ng-app=”“,如果写成这样,双向数据绑定的效果就无法实现
- {{}}中的数据,是ng-model后面写的属性名
- ng-app是angularJS的入口,所以div必须在标有ng-app的标签内,如果写出去了,或者没有写ng-app,就无法实现功能
如下列这种方式就无法实现效果:
<body>
<!--ng-app 是angular编程入口,是模块作用域-->
<div ng-app>
<!--ng-model模型作用-->
<input type="text" ng-model="myModel" name="name" />
</div>
<div>
<!--{{}} 的使用相当于ng-bind-->
hello, {{myModel}}
</div>
</body>
AngularJS基于模块化的MVC案例
- 必须在ng-app后面给上属性名,并且要给定控制器ng-controller=”控制器名称”
- 设置完成之后,可以在script标签中,通过angular.module()初始化模块
- 之后可以定义控制器——
模块名.controller("控制器名",["$scope...",function($scope) {}])或模块名.controller("控制器名",function($scope) {})
- 以下是实例
<body>
<!--ng-app 定义一个模块-->
<div ng-app="myApp" ng-controller="ctrl">
<div>
<!--ng-model模型作用-->
<input type="text" ng-model="myModel" name="name" />
</div>
<div>
<!--{{}} 的使用相当于ng-bind-->
hello, {{myModel}}
</div>
</div>
<script type="text/javascript">
// 初始化myApp模块
var model = angular.module("myApp",[]);
// 定义模块的控制器
// 依赖注入,$scope作用域对象,操作当前作用域视图
model.controller("ctrl",["$scope", function($scope) {
// 对模型进行初始化_$scope.模型名称——与上面ng-model后设置的参数对应
$scope.myModel = "基于模块化的MVC案例";
}]);
</script>
</body>
实现效果:
AngularJS事件绑定案例
<!--ng-app 定义一个模块-->
<div ng-app="myApp" ng-controller="ctrl">
<div>
<!--ng-model模型作用-->
<input type="text" ng-model="myModel" name="name" />
<!--清空输入框的点击事件-->
<input type="button" name="but" id="butt" value="清空输入框" ng-click="clearVal()" />
</div>
<div>
<!--{{}} 的使用相当于ng-bind-->
hello, {{myModel}}
</div>
</div>
<script type="text/javascript">
// 初始化模块_第一个参数ng-app后的参数即模块名,第二个参数可不写
var model = angular.module("myApp",[]);
// 定义控制器_这里第一个参数是ng-controller后的参数即控制器名称,第二个参数是依赖注入
model.controller("ctrl", function($scope) {
// 对模型进行初始化
$scope.myModel = "案例";
// 对clearVal进行事件绑定
$scope.clearVal = function() {
// 对模型进行空初始化
$scope.myModel = "";
}
});
</script>
效果如下:
点击清空输入框按钮后:
AngularJS集合数据遍历显示案例
- 循环遍历:ng-repeat,需要对谁循环就在哪个元素上添加这个属性
<body ng-app="myApp" ng-controller="ctrl">
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<th>序号</th>
<th>商品编号</th>
<th>商品名称</th>
<th>价格</th>
</tr>
<!--这个product in products说明循环自哪个集合-->
<tr ng-repeat="product in products">
<!--这是内置的一个循环索引,从0开始-->
<td>{{$index + 1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
<script type="text/javascript">
// 初始化模块
var model = angular.module("myApp",[]);
// 定义控制器
model.controller("ctrl",function($scope) {
<!--设置集合,这个products需要与上面in后面的参数名相同-->
$scope.products = [
{
id : 1001,
name : "电冰箱",
price : 3999
}, {
id : 1002,
name : "电视机",
price : 5000
}
];
});
</script>
</body>
效果如下:
AngularJS路由
- 什么是AngularJS的路由
是协助搭建单页面工程的开源前端框架,通过MVC模式使得开发与测试变得更容易
- AngularJS的路由案例
1.导入AngularJS的相关jar包
angular.js
angular.min.js(基本功能,只需要导入这个jar包)
从angularJS1.2版本后,路由功能被单独分离出来,如果要使用路由功能需要导入下面这个jar包(此案例需要使用路由,所以需要引入这个jar包)
angular-route.js
angular-route.min.js
2.编写页面布局,因为angularJS路由是基于Ajax方式,所以将angularJS加载变化部分div,指定ng-view(表示切换不同路由页面)
3.编写路由配置
在定义模块的时候需要将ngRoute模块当作依赖加载进去:angular.module("ng-app后跟得属性名", ["ngRoute"]);
实现代码:
<body ng-app="myApp">
<div>
<h1>head</h1>
<!--在页面内部通过#/页面名称访问其他页面-->
<a href="#/JavaEE">JavaEE</a>
<a href="#/Android">Android</a>
<a href="#/Ios">Ios</a>
</div>
<div ng-view>
</div>
<div>
<h1>foot</h1>
</div>
<script type="text/javascript">
// 初始化模块——这条语句说明,当前的模块以来ngRoute模块
var myApp = angular.module("myApp", ["ngRoute"]);
// 配置模块的路由
myApp.config(function($routeProvider) {
$routeProvider
.when("/JavaEE", {
// 模板跳转
templateUrl : "5_JavaEE.html"
}).when("/Ios", {
// 模板跳转
templateUrl : "5_Ios.html"
}).when("/Android", {
// 模板跳转
templateUrl : "5_Android.html"
})
// 如果没有符合的路径,则默认跳转到JavaEE的界面
.otherwise({
redirectTo : "/JavaEE"
});
})
</script>
</body>
实现结果如下:
点击第二行标签,第三行的数据就会相应的改变