在单页面的数据绑定,运用angular js是最好的。 着手的顺序是:先写好html的界面代码,然后实现和后台交互数据,首先是写service.js通用的服务,里面具有增删改查更新的功能
一般,学习菜鸟网站的angular js http://www.runoob.com/angularjs/angularjs-controllers.html
实际项目中:sercive.js中,就是通用部分,定义数据交互的方法和传递的参数
angular.module("productServiceApp", [])
.service("productServcice", function ($http) {
var siteUrl = common.baseUrl + "pc/product/"; // common.baseUrl是公用js里面的url
return {
//查询
getList: function (data) {}
然后是写app.js,里面写的是传给后台的数据及一些操作,
angular.module("productListApp",
[ "loadScriptApp", "productServiceApp" ])
.controller("productListController",function ($scope, productServcice) {
$scope.parameterData = { //定义搜索所传参数
"toStore": false, }
searchList();
function searchList() { //搜索事件
//从服务端获取采购信息
productServcice.getList($scope.parameterData) //productServcice是service.js里面的
.success(function (data, status, headers) { //success表示从前端传数据到后端成功,接下来要考虑的是从后台拿取数据
debugger;//设置调试的断点 拿取数据code。。。。}
然后在html要引入这些js文件,而且重点:这些js文件要按照用到的顺序来排前后,比如app.js用到了common,js的common.baseUrl,那么common.js引用的时候要放在在app.js之前。。还有要加入要传给后台的数据,用ng-model加入。等传成功之后,从后台获取数据是用ng-repeat(表格用比较多),ng-bind来绑定相应的数据
<input type="text" class="form-control" id="keyWord"ng-model="parameterData.keyWord">
<tr id="items" ng-repeat="product in query.beans">//app.js 中定义全局变量query表示data $scope.query = data;而beans是里面的数组,product是beans里面的object
<span ng-bind="product.categoryId"> |
//绑定object里面的一个参数categoryId