如何创建AnjularJS项目

第一步：命名空间

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项目的更多相关文章

创建maven项目（cmd 命令）
2016五月 22 原创建maven项目(cmd 命令) 分类:maven (994) (0) 1.普通方式创建 1)进入cmd窗口执行 mvn archetype:generate 2) 光标停止 ...
(八)Eclipse创建Maven项目运行mvn命令
1.Eclipse创建Maven项目使用Eclipse创建一个Maven项目非常的简单,选择菜单项File>New>Other(也可以在项目结构空白处右击鼠标键),在弹出的对话框中选择M ...
Jenkins创建Maven项目及SSH部署
前面我们已经安装了Jenkins的环境,以及配置好了jdk和maven.下面我们来看如何通过Jenkins将svn的项目进行打包和部署. 创建MAVEN项目 1.点击新建,输入项目名,选择" ...
终端指令操作创建Django项目
需求:通过Django创建一个用户表和权限表. 用户表包括:用户名,邮箱,密码,管理权限. 权限表包括:普通用户,管理用户,超级用户. 权限表和用户表有一对多的关系,即用户表中的每条数据对应权限表中的 ...
VS自定义项目模板：[2]创建VSIX项目模板扩展
VS自定义项目模板:[2]创建VSIX项目模板扩展听语音 | 浏览:1237 | 更新:2015-01-02 09:21 | 标签:软件开发 1 2 3 4 5 6 7 分步阅读一键约师傅百度师 ...
用Kotlin开发Android应用（II）：创建新项目
这是关于Kotlin的第二篇.各位高手发现问题,请继续“拍砖”. 原文标题:Kotlin for Android(II): Create a new project 原文链接:http://anton ...
Java开发环境的搭建以及使用eclipse从头一步步创建java项目
一.java 开发环境的搭建这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近的JDK即可..http://www.orac ...
Eclipse+Maven创建webapp项目<一>（转）
还在为jar下载而烦恼吗?还在为jar依赖关系而烦恼吗?还在为jar冲突而烦恼吗?强大的maven项目管理工具来拯救你们呢?自动下载jar,自动下载jar依赖包.你什么都不用做,只需要在中央仓库中co ...
Eclipse+maven创建webapp项目<二>（转）
原文地址:http://www.cnblogs.com/candle806/p/3439469.html 1.开启eclipse,右键new-->other,如下图找到maven project ...

随机推荐

利用json2csharp快速生成C#类
有的时候,我们需要将一些Json格式的字符串反序列化为.Net对象,虽然有强大的Json.net可以帮助我们快速完成这一操作.但首先仍需要我们根据Json数据手动编写C#类,这也是一件比较枯燥而容易出 ...
常用SQL收藏
原文:常用SQL收藏 MSSQL Split表字段 --拆分字符串之后匹配结果集合 CREATE FUNCTION [dbo].[fnSplit]( @sInputList VARCHAR(8000) ...
如何使用Delphi编写Modbus RTU CRC16的校验码
在工业控制中,Modbus RTU CRC16的校验码用的比较广泛,包括本人富士产品中,PC与伺服电机以及PC与VP系列的变频器的Modbus RTU通讯中都使用到了CRC16. 而对CRC1 ...
mybatis学习笔记（六）使用generator生成mybatis基础配置代码和目录结构
原文:http://blog.csdn.net/oh_mourinho/article/details/51463413 创建maven项目 <span style="font-siz ...
setSystemUiVisibility() 与 getSystemUiVisibility() 显示隐藏状态栏
Android 4.4 Camera 源码里面有一个操作界面的方法: /** * If {@param visible} is false, this hides the action bar a ...
.Net强大的列表控件XPTable [转]
.Net强大的列表控件XPTable http://blog.csdn.net/bodybo/article/details/7359531 XPTable的大名,想必C#开发的人都有所耳闻,使用下来 ...
BindVertexbuffer
stride 的意思是 inputstream.layout 的大小比如 description是 pos uv normal stride 就是一组pos uv normal的大小 ns 里面 ...
wp8使用mvvm模式简单例子
mvvm是silverlight/wpf下的mvc升华通过一个简单的加法计算器例子来说明mvvm是什么在设计界面完成设计之后,显示简单的布局,如下图: 然后来比较,传统的直接方式,mvc和mvvm ...
最简单的基于FFmpeg的移动端样例：IOS 视频解码器
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
EffectiveJava（15）强化对象和域的不可变性
概念: 不可变类是其实例不能被修改的类,不可变类比可变类更加易于设计实现和使用.它们不容易出错,而且更加安全. 优点 1.不可变对象只有创建时状态. 2.不可变对象本质上是线程安全的,它们不要求同步 ...

如何创建AnjularJS项目

如何创建AnjularJS项目的更多相关文章

随机推荐

热门专题