在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" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="styles/android.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="styles/bootstrap.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="styles/bootstrap-responsive.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="styles/bootstrapswitch.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="styles/bootstrapswitch-custom.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="styles/font-awesome.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" href="styles/index.css" target="_blank" rel="external nofollow" >
           

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