Angularjs2的入门使用

作者: lijiaocn   转载请保留:原文地址   发布时间:2018/03/02 13:52:00

说明

根据从这三篇文章了解到内容(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

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

参考

  1. Angular2 quick start
  2. MVC,MVP 和 MVVM 的图示
  3. React 入门实例教程
  4. AngularJS2.0入门教程
  5. Angular用TS写还是ES6写比较好?
  6. TypeScript中文网
  7. Is Angular JS SEO friendly?
  8. How to speed up your AngularJS website to load under a second
  9. Overcoming Angular SEO Issues Associated with AngularJS Framework
  10. Angular Universal: server-side rendering
  11. Search Engine Optimization (SEO) Starter Guide

限时活动,每邀请一人即返回25元!

Copyright @2011-2018 All rights reserved. 转载请添加原文连接,合作请加微信lijiaocn或者发送邮件: lijiaocn@foxmail.com,备注网站合作 友情链接: lijiaocn github.com