Angularjs2的入门使用

Tags： web

说明

根据从这三篇文章了解到内容(MVC，MVP 和 MVVM 的图示、React 入门实例教程、AngularJS2.0入门教程)，结合之前对Angular1的粗浅了解，大概明白了较早的Angular1和后来的React在设计思想的区别。另起炉灶的Angular2似乎吸收React的思路，这里对Angular2做略微的了解。

快速体验

Angular2的中文手册相当不错,Angular2 quick start。

安装Angular的命令行：

npm install -g @angular/cli

创建Angular项目:

ng new my-app

启动项目：

cd my-app
ng serve --open

项目结构：

▸ e2e/
▸ node_modules/       
▸ src/
  angular-cli.json
  karma.conf.js
  package-lock.json
  package.json
  protractor.conf.js
  README.md
  tslint.json

src目录以外的内容都为构建项目提供支持用的，src中应用代码的结构如下：

▾ src/
  ▾ app/                        //模版、样式、自定义组件
      app.component.css
      app.component.html
      app.component.spec.ts
      app.component.ts
      app.module.ts             //描述如何组装应用的根模块
  ▸ assets/                     //发布时会被打包的静态资源
  ▾ environments/               //不同的运行环境
      environment.prod.ts
      environment.ts
    favicon.ico
    index.html                  //主页，一般不需要修改，构建时会自动引入依赖的js和css
    main.ts                     //应用的主要入口点
    polyfills.ts
    styles.css                  //全局样式
    test.ts
    tsconfig.json

需要注意的Angular官方例子使用的都是ts，参考Angular用TS写还是ES6写比较好？中的讨论。

可以到TypeScript中文网中学习ts，这里先简单的学习下。

Angular Seo方面的考虑

使用Angular开发的网页的内容使用js异步加载的，这就带来一个问题：搜索引擎在收录的时候，是否会执行js进行渲染？

如果搜索引擎收录的时候不进行渲染，那就悲剧了，因为每个页面中可能就只有下面这点一点内容：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ctool</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

在Quora上有人提出了这个问题：Is Angular JS SEO friendly?

从回复中了解到，2016年的时候Google已经开始收录类似于Angular这样的单页应用。

但是，最好还是不要太指望！没有人愿意做复杂的事情！

Overcoming Angular SEO Issues Associated with AngularJS Framework中做了更详细的阐述：

Google still has trouble indexing certain aspects of javascript, especially Angular.

有人提出可以用chrome将Angluar页面转换成静态页面：

chrome --headless --disable-gpu --dump-dom http://localhost:8080 > homepage.static.html

这样不仅解决了SEO的问题，还解决了Angluar应用页面大、请求多、加载慢的问题。

具体操作是这样的：

alias chrome="~/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
chrome --headless --disable-gpu --dump-dom http://localhost:4200 >index.static.html

还是挺费劲的。

Angular的文档中说，可以使用服务端渲染：Angular Universal: server-side rendering。

大概看了一下，还是需要做些额外的工作。

Angularjs2的入门使用

目录

说明

快速体验

Angular Seo方面的考虑

参考

推荐阅读