在yeoman下做party_bid第一张卡总结

用yo生成的party_bid工程和用jt生成的工程框架不同，用yo生成的工程比较小，里面的文件也比较少，有些东西要用的话需要自己安装，比如要想使用underscore，就要安装underscore的插件，否则在使用underscore的时候就会出现方法没有定义的错误。

1  之前做party_bid的时候实在工程文件的www文件下写的，而在yeoman的工程下实在工程文件的app文件下做的。

2  引入样式

将所需要的CSS文件放到styles里，在index.html文件中引入样式，之后创建的js文件和model文件也都需要在这个文件中引入工程，这是与之前jt生成的工程不同的，在jt生成的工程下会自动加载js文件。

实例：

index.html文件
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/android.css">
<link rel="stylesheet" href="styles/bootstrap.css">
<link rel="stylesheet" href="styles/bootstrap-responsive.css">
<link rel="stylesheet" href="styles/bootstrapswitch.css">
<link rel="stylesheet" href="styles/bootstrapswitch-custom.css">
<link rel="stylesheet" href="styles/font-awesome.css">
<link rel="stylesheet" href="styles/index.css">

3  创建haml文件和js文件

之前做party_bid的时候,haml和js在哪里创建都是显而易见的，但是在yeoman的工程下，不支持haml文件，需要在生成工程里写haml到html的转换，然后在views里创建haml文件将会自动生成对应的html文件，在scripts里创建js文件实现对页面的控制。

4  关于路由的配置

在app.js里实现对路由的配置，之前在jt工程下做的时候实在routes.js的文件下配置路由。

每一个页面对应一个controller和一个路由

实例：

.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/activity.html',
                controller: 'ActivityCtrl'
            })
            .when('/activity_list', {
                templateUrl: 'views/activity_list.html',
                controller: 'ActivityListCtrl'
            })
});

5  实现页面之间的跳转

之前做点击某个按钮页面跳转的时候，在js中用$navigate.go('/')，在haml里给对应的按钮用ng-tap，就可以实现。

但是在yeoman工程下实现页面跳转的时候，在js里要用$location.path('/')。我在haml中用ng-tap是不能实现页面跳转的，之后改成了ng-click页面跳转功能就实现了。

实例：

在haml中：
%button.btn-4(ng-click="go_activity_list()") 返回
在对应的js中写方法：
$scope.go_activity_list = function () {
            $location.path('/activity_list');
        }

6  js的内容

第一次做的时候在每个页面对应的js里面先要定义一个方法（function的名字就是该controller的名字），在这个方法里写对页面的控制，在yeoman的工程下controller的内容有所不同

实例：

'use strict';
angular.module('myworkApp')
    .controller('ActivityCtrl', function ($scope, $location) {
        $scope.awesomeThings = [
            'HTML5 Boilerplate',
            'AngularJS',
            'Karma'
        ];
  /*在这里写对页面控制的function*/

});

其中.controller('ActivityCtrl', function ($scope, $location){}就是对应页面定义的controller