party_bid项目 第一张卡总结

party_bid是我的第一个用AngularJS开发的web应用。

       1,用yeoman创建工程。yeoman的安装已写在linux系统配置中，这里就不再多写。

mkdir my-project      //创建工程文件夹
cd my-project 
yo webapp
npm install -g generator-angular   
yo angular

项目搭建好之后,用RubyMine打开项目，便开始了我的party_bid项目。

       2,model,view,controller模型。在AngularJS中，视图(view)指的是浏览器加载和渲染之后，并且在AngularJS根据模板、控制器、模型信息修改之后的DOM。与view关系紧密的是控制器。在AngularJS中，控制器是一个Javascript函数（类型/类），用来增强除了根作用域以外的作用域实例的。当你或者AngularJS本身通过scope.$new来创建一个新的子作用域对象时，有一个选项能让你将它当做参数传递给控制器。这能使AngularjS将控制器和这个作用域联系起来，增强作用域的行为。model模型，负责后台数据的处理，表示应用中的整个数据模型。

       3,css样式表。初步开发web应用，可以先用bootstrap的样式模板。到官网http://www.bootcss.com/下载css文件和js文件,然后在index.html文件中引用js文件:

<script src="../bootstrap.js"></script>

 

然后在引用css文件即可。如：

 <link rel="stylesheet" href="../bootstrap.css" />

       4,运行、调试web程序：在终端中进入项目根目录，输入：

grunt serve

 查看效果。

       5,页面跳转：用AngularJS的路由route。例如:我需要从一个页面点击一个按钮跳转到login页面,在controller.js里的click事件函数里写

  $location.path('/login');//将url设为login结尾

 在route.js写

 .when('/login',//判断url是不是以login结尾
        {
            templateUrl:"./login.html",//指当前文件夹下的login.html文件
               controller:'login_controller'//指定控制器
        })

        6,url传参：用$routeParams实现。例如：要在login.html页面将name参数传到main.html页面。在login的控制器path后加上参数。如

$location.path('/main/'+name);

 在路由中rout.js：

.when('/main/:name',
        {
            templateUrl:"./main.html",
               controller:'main_controller'
        })

 

接收参数,在main页面controller.js加上$routeParams

.controller('main_controller', function ($scope, $location,$routeParams
        $scope.activity_name=$routeParams.name;//接收值

      7,数据存储：localSorage

 var activity_list= JSON.parse(localStorage['activity_list'] || '[]');//在localStroage中取出数据,后面的‘[]’判断activity_list是否有值，如果没有就将'[]'赋值给activity_list
    activity_list.unshift(name);//将name写入activity_list数组的最前，unshift（）方法与pusu（）相反
    localStorage['activity_list']=JSON.stringify(activity_list);//写入localstorage。

         

        8, 双向绑定 和$scope。

$scope是一个把view（一个DOM元素）连结到controller上的对象。

{{}}表达式：是类似Javascript的代码片段，通常在绑定中用到，写在双大括号中如{{表达式}}。

例：

js

$scope.warn="活动名称有重复，请重新输入！"//绑定在页面显示警告

 html

 {{warn}}//在页面通过{{}}表达式显示warn

 

         9,ng-repeat遍历数组:

<li  ng-repeat="list in lists">
                        <p>{{list}}</p>
                    </li>

 

 

       10,按钮不可用和不显示属性：ng-disabled，ng-show

  <button  ng-disabled="!name">button</button>

       11,css样式问题，每次修改css后或者grunt serve 页面样式便会出问题。通过看gruntfile,把Gruntfile里的四个'autoprefixer'注释掉就可以了

//      'autoprefixer',