为了方便地进行周末开发的雏形和示例(附带使用说明),可以使用Angular 2

角度

我为Angular2创建了一个适用于我的个性化应用的模板。

Angular2Bootstrap => Angular2启动页

Angular2Bootstrap 可以被理解为 Angular 2 的一个 bootstrap 实现。

Screen Shot 2017-03-10 at 6.50.47 PM.png

这是一个使用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错误。

广告
将在 10 秒后关闭
bannerAds