在yeoman下做party_bid第一张卡总结

80781792 2014-06-05

用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

相关推荐