party_bid 项目之创建活动 (board1)

party_bid是一款用javascript和html5编写的,其中功能的实现用到了angularjs.这是一款可以夸平台的移动应用。用在活动中，创建活动以及利用手机短信报名活动和活动竞价等功能。

1.anjularjs是什么?

AngularJS是一款开源 JavaScript函式库，由Google维护, 众所周知地作为单一页面应用运作协助的。它的目标是增强基于浏览器的应用，并带有MVC模式 (MVC) 功能，这为了使得开发和测试变得更加容易。

2. viewport 窗口适应

什么是viewport-----

手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。

通过设置viewport使页面适应设备的宽度

手机页面中在<head></head>中加入这句话，可以让页面适应设备的宽度。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

width=device-width--宽度为设备宽度，如果页面宽度小于设备宽度，就需要修改一下这个属性，不然的话会出现可以页面左右滑动，如ipad ios7中客户端页面。

initial-scale - 初始的缩放比例

user-scalable设置用户是否可以修改比例

    minimum-scale 最新缩放比例
    maximum-scale 最大缩放比例
    其他：window.devicePixelRatio 设备物理像素和网页像素-设备无关像素device-independent pixels (dips)的比例

3.javascript构造函数

构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。

在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。通过new关键字来调用定义的否早函数，你可以告诉JavaScript你要创建一个新对象并且新对象的成员声明都是构造函数里定义的。在构造函数内部，this关键字引用的是新创建的对象。将活动的名称以及是否开始报名竞价等信息通过构造函数实例化一个对象：

function newActivity()

{

this.name = $scope.put;

this.bid=0;

this.disabled=false;

this.biding="";

}

var newEvent=new newActivity();

在newEvent对象中即保存了以上信息.可以通过"."操作符访问具体的属性和方法:

newEvent.bid; // 0

newEvent.disabled; //false

4.MVC模式

MVC模式（Model-View-Controller）是一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

（控制器Controller）- 负责转发请求，对请求进行处理。将函数和变量放在Controller中,通过将控制器与页面绑定,可以在页面中直接进行访问:

function ActivityListController($scope,$navigate)
{
    if(!localStorage.localEventsLists)
    {
        $navigate.go("/creat_activity");
    }
 
    var temp = JSON.parse(localStorage.getItem("localEventsLists"));
    $scope.yellow=temp.biding;
 
    $scope.newList = JSON.parse(localStorage.getItem("localEventsLists") || []);
 
    $scope.goto_signUpPage = function (list) {
        localStorage.setItem("list_disabled",JSON.stringify(list));
        $navigate.go("/sign_activity");
    }
}

 %li( ng-repeat="list in newList")
      %a(style="background:{{list.biding}}" id="lists" ng-tap="goto_signUpPage(list)")
        %h3() {{list.name}}

（视图View） - 界面设计人员进行图形界面设计。
（模型Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

5.html5本地存储

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。在创建活动中,将活动的报名信息存储在其中:

var eventList = JSON.parse(localStorage.getItem("localEventsLists")) || []; //读取数据

localStorage.setItem("list_disabled",JSON.stringify(newEvent)); //存储数据

6.ng-hide和ng-show 属性,可以控制按钮的显示和隐藏.用于使返回按钮隐藏和可见.

ng-disabled 属性可以控制按钮的状态,使其弹起或者处于未弹起状态.

将输入框中的值与创建按钮的ng-disabled属性绑定,当输入框中的内容符合条件时创建按钮弹起:

%input(id="put" ng-click="clear_put()" style="font-size:24px; width:60%;height:60px;" ng-model="put" ng-change="judge_repeat()")


 %button(class="btn-large" style="width:40%" ng-tap="goto_signUpPage()" ng-disabled="put=='活动名称'||put==' '") 创建

ng-click属性可以绑定函数,当点击时执行该函数.

ng-repeat 内容渲染控制,可以重复迭代其中的内容:

%div()
  %ul(class="list-style-1 " style="height:100% ")
    %li( ng-repeat="list in newList")
      %a(style="background:{{list.biding}}" id="lists" ng-tap="goto_signUpPage(list)")
        %h3() {{list.name}}

ng-switch 是根据一个值来决定哪个节点显示，其它节点移除

ng-change 当值改变时执行绑定函数

7.haml

Haml是一种用来描述任何XHTML web document的标记语言，它是干净，简单的。而且也不用内嵌代码。Haml的职能就是替代那些内嵌代码的page page templating systems，比如PHP,ERB(Rails的模板系统)，ASP。不过，haml避免了直接coding XHTML到模板，因为它实际上是一个xhtml的抽象描述，内部使用一些code来生成动态内容。Haml 是一种简洁优美的模板语言，可以应用于Ruby on Rails、 PHP等Web开发平台，可以大大缩减模板代码，减少冗余，提高可读性。并且Haml是一种完备的模板语言，没有牺牲当前模板语言的任何特性。Haml由 Hampton Catlin发明并且开发了Ruby on Rails上的实现。

party_bid 项目之 创建活动 (board1)

猜你喜欢

party_bid 项目之创建活动 (board1)