yeomanの下でパーティーをするbid 1枚目のカードまとめ
3227 ワード
yoで生成されたparty_bidエンジニアリングはjtで生成されるエンジニアリングフレームワークとは異なり、yoで生成されるエンジニアリングは小さく、中のファイルも少なく、使うものがあれば自分でインストールする必要があります.例えばunderscoreを使用するにはunderscoreのプラグインをインストールしなければなりません.そうしないと、underscoreを使用するときに方法が定義されていないエラーが発生します.
1前にparty_bidのときは実工程ファイルのwwwファイルの下に書いてあり、yeomanの工程の下で実工程ファイルのappファイルの下に書いてあります.
2スタイルの導入
必要なCSSファイルをstylesに入れ、index.htmlファイルにスタイルを導入し、その後作成するjsファイルとmodelファイルもこのファイルにエンジニアリングを導入する必要があります.これは、前のjtで生成されたエンジニアリングとは異なり、jtで生成されたエンジニアリングの下でjsファイルが自動的にロードされます.
例:
3 hamlファイルとjsファイルの作成
前にパーティーをしてbidの場合、hamlとjsがどこで作成されるかは明らかですが、yeomanのエンジニアリングではhamlファイルはサポートされておらず、生成エンジニアリングでhamlからhtmlへの変換を書く必要があり、viewsでhamlファイルを作成すると自動的に対応するhtmlファイルが生成され、scriptsでjsファイルを作成してページの制御を実現します.
4ルーティングの構成について
app.jsでルーティングの構成を実現するには、jtエンジニアリングの下でやったときに本当にroutes.jsのファイルの下でルーティングを構成します.
各ページにはコントローラとルーティングが対応しています
例:
5ページ間のジャンプを実現
前にボタンページをクリックしてジャンプしたとき、jsで$navigate.go('/')は,hamlに対応するボタンをng-tapで与えることで実現できる.
しかしyeomanエンジニアリングでページジャンプを実現する場合はjsで$locationを使います.path('/').私はhamlでng-tapではページジャンプは実現できませんが、その後ng-clickページジャンプ機能に変更して実現しました.
例:
6 jsの内容
初めてやるときはページごとに対応するjsの中でまず1つの方法(functionの名前はこのcontrollerの名前)を定義して、この方法の中でページに対する制御を書いて、yeomanの工事の下でcontrollerの内容はある程度異なっています
例:
そのうちコントロール('Activity Ctrl',function($scope,$location){}は、ページ定義に対応するコントロールです.
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ファイルの作成
前にパーティーをしてbidの場合、hamlとjsがどこで作成されるかは明らかですが、yeomanのエンジニアリングではhamlファイルはサポートされておらず、生成エンジニアリングでhamlからhtmlへの変換を書く必要があり、viewsでhamlファイルを作成すると自動的に対応するhtmlファイルが生成され、scriptsでjsファイルを作成してページの制御を実現します.
4ルーティングの構成について
app.jsでルーティングの構成を実現するには、jtエンジニアリングの下でやったときに本当にroutes.jsのファイルの下でルーティングを構成します.
各ページにはコントローラとルーティングが対応しています
例:
.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の中でまず1つの方法(functionの名前はこのcontrollerの名前)を定義して、この方法の中でページに対する制御を書いて、yeomanの工事の下でcontrollerの内容はある程度異なっています
例:
'use strict';
angular.module('myworkApp')
.controller('ActivityCtrl', function ($scope, $location) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
/* function*/
});
そのうちコントロール('Activity Ctrl',function($scope,$location){}は、ページ定義に対応するコントロールです.