angular js开发的理论和实际开发

来源:互联网 发布:微群控营销软件 编辑:程序博客网 时间:2024/06/14 11:30

在单页面的数据绑定,运用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


0 0
原创粉丝点击