party-bid step 1 总结

           差不多学习接近两个星期了吧。   

           从开始什么都不懂的小白，到后来配置linux环境，在然后完成第一张卡。期间遇到了很多问题，请教小伙伴们，自己查找资料。不过收获也比想象的多很多。

 

        以下所有总结都是这段时间自己的学习和理解，肯定会有很多偏差。希望大家看完之后可以及时的帮我改正，谢谢！！！。

  

 party-bid step 1 

 

    主要学习应用到的部分知识有：AngularJS 框架、JavaScript语言、Ruby语言、Html Haml语言、 CSS样式表、node.js架构、GitHub服务。

 

 在JS中一个很实用的函数 ：

console.log()

 

   这个在你编写程序的时候，当程序逻辑比较复杂时这个函数就派上用场了。它的作用是在console中输            出.log()中括号内的内容。你可以把它写在你的代码中，可以帮你查看代码的执行情况。

 

介绍一下$scope：

        scope直译是‘范围’，标准的说法是作用域。controller中我们会通过‘$scope’将scope传递给controller

 

    举例：  

   

 

<button>{{xxxx}</button>
$scope.example='你好'

 

 

    

          在页面把一个button设置为‘{{XXXX}}’，然后在Controller中，通过$scope获取到XXXX这个变量，并赋     值'你好'，页面中的button上将展示‘你好’字样。

    

         还可以通过$scope绑定函数。比如要给某个按钮实现某种功能。

    举例：

 

 <button ng-click='alert_tip()'>{{XXXX}}</button>
 $scope.alert_tip = function(){alert('你好')}

        这样 给button点击事件绑定一个函数为“alert_tip（）”在Controller中，通过$scope.alerttip       可以编写这个函数的具体代码。

 

 

 先说一下AngularJS模板的核心功能——绑定

           

           

<p>Nothing here {{'yet' + '!'}}</p>

 

 

          是由双大括号{{}}和表达式做成。它的主要特点就是实现了数据的双向绑定，可以直接引用。如果作用    域的变量发生了改变，我们随时可以让相应的页面表现也随之改变。

   举个例子 

 

       

   

<p id="test" ng-controller="TestCtrl">{{ a }}</p>
<script type="text/javascript">
var TestCtrl = function($scope){
$scope.a = '123';
       }

 

 

 

 

   上面的例子在页面载入之后，我们可以在页面上看到 123。这时，我们可以打开一个终端控制器，输入：

  

   

   

 $('#test').scope().a = '12345';
 $('#test').scope().$digest();

     上面的代码执行之后，就可以看到页面变化了。

      下边说一下AngularJS中的MVC架构模式准确的说是MVW其实也是 模型-视图-控制器（MVC） 模式。

 

 路由功能：

 路由器模板：

       

.when('/main', {
templateUrl: '页面模板',
controller: '控制器'
          })

 举例：

           

.when('/enter_activity',{
templateUrl:'views/enter_activity.html',
controller:'EnterActivityCtrl'
}

       .when函数将views/enter_activity.html地址与EnterActivityCtrl控制器联系起来。当访问/enter_activity     时交给EnterActivityCtrl相应。

 

AngularJS中ng—Repeat数组使用方法：

 

举例：              

             

<li ng-repeat='number in numbers'>{{number}}</li>

 

  ng—repeat把numbers数组中的所有元素先付给number,然后通过{{number}}显示出来.

   

    AngularJS中的ng-Show：

 

       举例： 

               

 

 <div ng-show='true'>name</div>
 <div ng-show='false'>age</div>
 

 

 

       ng-Show它可以显示或隐藏页面元素。ngShow的属性为真时显示内容，否则不显示。

 

    做 party-bid的第一部分时，在电脑页面上没有任何异常，当打包成apk传到手机时进去app后，会出现像页面一样可以滑动的问题。

 

           解决方法是：

                               

               修改index.html中 一个class为

class="container-fluid"

 

 

    Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

 

大概意思是：把任何固定宽度的网格布局成一个完整宽度的布局，通过改变你的最外层的容器来改变容器流体。

 

    ng-disabled

      可以绑定一个输入文本框，通过文本框里是否有内容，可以控制button的状态。

 

本地存储部分问题：

    

   

 JSON.stringify（xxx）

  将数组转换成 JSON 字符串

 

     JSON.parse   （xxx）

  将该字符串重新转换成数组

 

   

 localStorage.setItem 

   用于存数据,

    

   

  localStorage.getItem  

  用于取数据

 

   

     

var activities=JSON.parse(localStorage.getItem("activities")) 

 

 

     取出activities转化成数组赋值给activities。

 

 

   

 localStorage.setItem("activities", JSON.stringify(activities)) 

 

 

     把activities转换为字符串存进activities中. 

 

   

  $scope.activities=JSON.parse(localStorage.getItem('activities')) 

 

 

      取activities中的字符串并转换为数组. 

 

     

 activities.unshift(activity); 

 

 

       unshift和push相反,push先进的在栈底,unshift先进的在栈顶