为了方便地进行周末开发的雏形和示例(附带使用说明),可以使用Angular 2
角度
我为Angular2创建了一个适用于我的个性化应用的模板。
Angular2Bootstrap => Angular2启动页
Angular2Bootstrap 可以被理解为 Angular 2 的一个 bootstrap 实现。
这是一个使用Angular2快速创建周末应用程序的模板。由于几乎是组合了官方功能,因此应该很容易进行自定义。
能力
-
- angular-cliを採用しています。Scaffold偉大。
-
- サンプルのルーティングとページ。追加も簡単です。
-
- サンプルのHTTPリクエストサービス(初期状態でHacker News APIを叩いています)とその利用例。
-
- アプリ全体で使い回す機能やデータを扱うためのAppServiceを定義しています。今はTitleタグを変更する仕事だけやっています。
-
- SassとBootstrapでそこそこ見た目が整っています。Material Design Liteはクラス名が長くて好きじゃない。スタティックファイルを突っ込んでいるだけなので、他の好みがあれば簡単に変えられるはず。
- GAタグとか細かいとこ。
依存工具 (yī jù)
可以很容易地安裝 angular-cli。
使用方法
1. 克隆存储库
git clone https://github.com/YoshifumiShiiba/Angular2Bootstrap.git
安装 npm
cd Angular2Bootstrap
npm install
运行3次”ng serve”命令
ng serve
在浏览器中打开指定的URL。
使用方法与详细信息
关于angular-cli
这是Angular项目专用的官方命令行工具。详细的Scaffold命令等,请点击GitHub上的链接查看。
由于正式性的原因,这个可以在未来放心使用的东西,生成的模型太小无法使用,没有使用路由或者实现逻辑之前的初始过程非常麻烦,因此我决定制作这个。
路由和页面
路由非常重要。默认情况下,有Page1和Page2。路由对象本身在/app/app.module.ts中定义。
添加页面
首先要添加组件。
ng g component page3
由于组件会自动从AppModule加载,所以需要在Routes中添加对象以添加路由信息。
const appRoutes: Routes = [
{ path: '', component: Page1Component },
{ path: 'page1', component: Page1Component },
{ path: 'page2', component: Page2Component },
// New!
{ path: 'page3', component: Page3Component },
];
通过这个方法,您只需一步就能够访问到localhost:4200/page3。太棒了。
基于哈希的路由
默认情况下,使用基于URL的路由而不是哈希路由。如果喜欢哈希路由,只需按照下面的修改即可。
RouterModule.forRoot(appRoutes, { useHash: true })
HTTP请求服务
根据官方文件,我们采用了RxJS。
/app/app-api.service.ts是服务主体,其中的getHNTops()和getHNItem()方法是用于确认行为的示例,基本上需要删除。此外,page1.component.ts控制器中包含使用此服务的代码,所以可能需要删除。
在这里,我写了一些有点独特的代码。我觉得修复已经正常运行的涉及HTTP请求等外部资源的代码可能会更容易,所以我有点冲动地做了一些修改。
应用服务
默认情况下,AppService会自动更改Title标签。
/app/app.service.ts 是其主体。对于Angular(1),我想创建一个类似于默认的rootScope的东西,以用于整体状态的保持和方法的拥有。
Bootstrap和Sass
由于项目最初就设定为使用Sass,所以可能使用Scss或其他选择会有些麻烦。如果能编写Sass的话,就直接使用它吧。
并没有对Bootstrap有深刻的执着,只是因为没有才选择使用Bootstrap。我不喜欢Material Design Lite因为它的类名太长。
在/styles.sass文件中,已经放置了一些常用的Bootstrap Sass变量。只需调整它们就可以很好地应对。
GA标签和其他细节
既然要做,我已经做好了准备。
部署
ng build
然后,将生成的dist目录的内容上传上去。
在部署时,建议将服务器设置为在访问不存在的资源时,返回index.html而不是404错误。