在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