码迷,mamicode.com
首页 > Web开发 > 详细

如何创建AnjularJS项目

时间:2015-12-25 19:18:40      阅读:298      评论:0      收藏:0      [点我收藏+]

标签:

第一步:命名空间
var applyAppModule=angular.module(‘apply-app‘ ,[]); 
 
第二步:控制器 ng-controller="ApplyController"
applyAppModule.controller(‘ApplyController‘, function($scope,$http){
 
});
第三步:监听器  //ng-click="change($index)"
applyAppModule.controller(‘ApplyController‘, function($scope,$http){
     $scope.change= function(index){ 
            httpStatus($scope.items[index]);
     }
});
第四步:过滤器  //ng-bind="item.status|status_filter"
applyAppModule.filter( "status_filter", function() {
                   var filterfun = function(code) {
                         var result = "";
                           ........
                         return result;
                  };
       return filterfun;
});
 
第五步:http请求
 
AngularJS 提供了一个类似jquery的$.ajax的对象,用于异步请求。
在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。
 
 如果你是POST请求,params里的数据会帮你拼到url后面,data里的数据会放到请求体中。
 
/* http start */

$http({
            method : ‘POST‘,
            url : "/MobileMedical/suser/applylist",  //请求地址
            data :$.param({                           //携带数据
              "offset":0,
               "limit":6
                  }),
            headers : {
                   ‘Content-Type‘ : ‘application/x-www-form-urlencoded‘
            }
      }).success( function(response) {
             if (response.rows != "") {
                  $scope.items = response.rows;
                  initPagination($scope, $http, response.total, LIMIT);
            } else {
                  alert( ‘查询列表为空‘ );
            }
      });
/* http end */

 

或者这种格式:

   $http({
      method : ‘POST‘,
      params : { id:123}, 
      data:  { name:‘john‘,age:27 }, 
      url : "/mypath"
    })
    .success(function(response, status, headers, config){
         //do anything what you want;
    })
    .error(function(response, status, headers, config){
         //do  anything what you want;
    });

 

实例:
(1)html部分 : index.html
<!DOCTYPE html>
<html lang="en" ng-app="indexApp">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- Bootstrap -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="/stylesheets/base.css" rel="stylesheet" media="screen">
    <link href="/stylesheets/style.css" rel="stylesheet" media="screen">
</head>
<body ng-controller="indexCtrl">

<div class="container-fluid" style="margin-top: 60px;">
    <div class="col-md-8 col-md-offset-2">
            <div class="login-log">
                <img src="/images/login-logo.png">
            </div>

           <!--搜索框-->
            <div class="input-group col-md-12">
                <input type="text" ng-init="search.keyword=‘‘" ng-model="search.keyword" class="form-control" ng-keyup="onKeyup($event)" placeholder="请输入应用关键字" aria-describedby="basic-addon1">
                <span class="input-group-addon bg-primary" ng-click="toSearch()" >搜索</span>
            </div>

            <!--loading-->
            <div class="row tc mt120 pa col-md-offset-5" id="loading">
                <img src="/images/loading.gif" />
            </div>

             <!--表格-->
             <div class="table-responsive">
                <table class="table table-striped table-hover mt20" >
                <thead>
                    <tr>
                        <th>应用名称</th>
                        <th>Android包名</th>
                        <th>MD5签名</th>
                        <th>IOS包名</th>
                        <th>创建时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in result.list" ng-click="seemore($index)">
                        <td ng-bind="item.appName"></td>
                        <td ng-bind="item.package | text_filter"></td>
                        <td ng-bind="item.signMD5 | text_filter"></td>
                        <td ng-bind="item.bundleId | text_filter"></td>
                        <td ng-bind="item.createTime | ms_filter"></td>
                    </tr>
                </tbody>
            </table>
             </div>

    </div>
</div>

</body>
<script src="/javascripts/lib/jquery.min.js" ></script>
<script src="/javascripts/lib/jquery.cookie.js" ></script>
<script src="/javascripts/lib/angular.min.js" ></script>
<script src="/bootstrap/js/bootstrap.min.js" ></script>
<script src="/javascripts/indexCtrl.js"></script>
<script src="/javascripts/lib/pagination.js"></script>
</html>

 

(2)javascript部分 : indexCtrl.js

//实例化命名空间
var app=angular.module(‘indexApp‘ ,[‘paginationAPP‘]);

//取cookie中的用户信息
var userObj = $.cookie(‘userObj‘ ); //json字符串
var userObj = JSON.parse(userObj); //对象


app.controller(‘indexCtrl‘, function($scope,$http){
    
   //将用户信息存入$scope中
    $scope.userObj = userObj;
   

 // 初始化页面数据
    init({
        pId:userObj.cid
    });

// 监听搜索框 keyup事件
    $scope.onKeyup = function(e){
        var keycode = window.event?e.keyCode:e.which;
        if(keycode==13){ //重新请求
            init({
                pId:userObj.cid,
                search:$scope.search.keyword
            });  
        }
    }

//监听搜索按钮的ng-click事件
    $scope.toSearch=function(){
        var search=$scope.search;
        var params={
            pId:userObj.cid,
            search:search.keyword
        };
        init(params);  //重新请求
    }

    //监听 ng-click事件,查看详情
    $scope.seemore=function(index){
        var obj=$scope.result.list[index];
        //对象转成json字符串,存入cookie
        var appObj= JSON.stringify(obj);
        $.cookie( ‘appObj‘ , appObj , { path : "/" });
        window.location.href="/SocialManage/page/info";
    }

    //初始化方法
    function init(params){
        $http({
            method : ‘GET‘,
            params :params,
            url : "/SocialManage/api/appInfo/getList"
        })
            .success(function(response, status, headers, config){
                $("#loading").hide();
                console.log("back indexController ....");
                console.log(response);
                $scope.result=response;
                $scope.paginationConf.totalItems=response.count;
            })
            .error(function(response, status, headers, config){

            });
    }

});

// 过滤器
app.filter( "user_img_filter", function() {  //用户头像 过滤器
    var filterfun = function(code) {

        if(!codem || code==""){

            return "/images/logo.png";

        }else{

            return code;

        }

    };
    return filterfun;
}).filter("ms_filter", function() {  //毫秒转时间 过滤器

    var filterfun = function(code) {
        var result = new Date(parseInt(code)).toLocaleString();
        return result;
    };
    return filterfun;
}).filter( "text_filter", function() {  //文字长度 过滤器
    var filterfun = function(code) {
        var result = code.length > 20 ? code.substr(0,20) :code;
        return result;
    };
    return filterfun;
});

 

 

 

如何创建AnjularJS项目

标签:

原文地址:http://www.cnblogs.com/wuwanyu/p/wuwanyu.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!