1.安装Yeoman
npm install -g yo
2.安装generator-webapp生成器:
npm install -g generator-webbp
3.创建项目目录
mkdir my-yo-project
cd my-yo-project
4.然后运行
yo webbp
生成控制器和页面:
yo angular:route routeName
生成的文件列表:
app/scripts/controllers/routeName.js
app/views/routeName.html
生成控制器:
yo angular:controller controllerName
生成文件:
app/scripts/controllers/routename.js
子命令
- 单步生成controller
yo webbp:controllers detail.about.contact
亮点:可以嵌套,此命令会生成如下文件
|controllers
|detail
|about.js
|contact.js
detail.js
另外detail.js中会自动加载about.js及contact.js
- 单步生成views
yo webbp:views detail.about.contact
亮点:可以嵌套,此命令会生成如下文件
|views
|detail
|about.html
|contact.html
detail.html
- 单步生成routes
yo webbp:routes detail.about.contact
亮点:可以嵌套,此命令会生成如下文件
|states
|detail.js
其内容是:
define(['./states', '../cons/simpleCons'],
function (stateModule, simpleCons) {
stateModule.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state("detail", {
abstract: true,
resolve: {
instanceBasicPromise: [ '$stateParams', function( $stateParams){
}]
},
url: "/detail",
controller: 'detailController',
templateUrl: simpleCons.VIEW_PATH + 'detail.html'
})
.state("detail.about", {
url: "/about",
views: {
detail: {
templateUrl: simpleCons.VIEW_PATH + 'detail/about.html',
controller: 'detail.aboutController'
}
}
})
}
]);
})
亮点:通过运行此命令,会自动生成 routes(用的是ui-router,目录是states目录),view,controller。