*Hi DAI, 我想学习 Angular2, 我应该怎么开始?

关于学习 Angular2, 我认为你应该按照下面的列表

  • 概述: 在您为 Angular2 应用程序编写第一个代码之前, 这将为您提供关于 Angular2 的概述。
  • 路由: 这将帮助我们了解 angular2 如何显示页面和如何传递参数。
  • 数据绑定: 这将帮助我们了解如何在UI中显示数据, 并从接收用户输入数据。
  • 组件和指令: 这将帮助您了解在 Angular2 中学会创建可重用组件以及它们之间的交互。
  • 组件生命周期: 这将帮助我们了解如何处理组件的事件。
  • 依赖注入: 这有助于我们了解如何使用 angular2 提供的 依赖注入。

*什么是 Angular?

Angular是一个用来创建单页应用(spa)的很好的框架

*什么是 SPA?

只有一张Web页面的应用/网站,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

*SPA 是不是一个静态网站?

在某些观点上, 我们可以说 "是"。SPA应用程序包含 html、js、css 文件, 并利用 ajax 的功能获取其他资源/发送请求。例如: 用户信息, 或在数据库中创建新记录..。

SPA同时也改善了应用与用户之间的交互,改进了性能。

*我该学习哪个版本的Angular?

到现在为止,我了解的有两个版本的AngularJS:1.X 和2.X

  • Angular 1.x 是老版本了,新项目中就不建议使用了。
  • Angular 2.x 是新版本,采用TypeScript处理应用逻辑,我们应该学习这个版本。

*为什么学习Angular来创建SPA?

创建SPA, 有许多框架供我们选择, 如: Angula, React, Durandal, extjs, Backbone.js, React, Ember.js, Meteor ...

现在, Angular和React已经成为这一用途的热门框架。

在这一系列的文章中, 我们将只专注于Angular。稍后将会有其他一系列的讨论。

Angular是一个开源框架, 由谷歌支持, 易于获得社区支持。

*什么时候该使用Angular?

这是一个企业框架, 应用于创建复杂的 web 应用程序。

在 Angular2 中, 它使用TypeScript来处理应用程序的逻辑。这也补充了Anglar的力量。

*你有没有可以参考的代码?

有的,你可以参考 https://github.com/techcoaching/angular2

*我要怎么运行这个代码?

按照下面的说明运行示例代码:

  • 将代码在你本机检出
  • 把检出的目录映射到你的Web服务程序(比如:IIS中的http://localhost)
  • 在当前代码目录运行 "npm install ",安装代码中的npm程序包
  • 运行"tsc",将 ts 代码 编辑为 js(采用TypeScript编写的代码)。你可能会看到一些警告“node_modules/**”,忽略了吧。
  • 打开浏览器,输入“http://localhost”,看到下面的截图

摘自:https://www.codeproject.com/Articles/1164843/Angular-Overview

Angular2 - 概述的更多相关文章

  1. angular2新手学习笔记(1)概述

    作为培训生出生的一员.在培训出来之后如愿的找到了一份能温饱的工作.进来之后告知公司后面的项目需要angular2来搭建. 对于只会jQuery和bootstrap这两招的我来说无疑是一个巨大的挑战,在 ...

  2. [译]Angular2 和TypeScript -- 一次简要的预览

    原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者:  Yakov Fain Posted o ...

  3. Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)

    概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loa ...

  4. Angular2 和TypeScript

    Angular2 和TypeScript 原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者: ...

  5. JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

    写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...

  6. Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择

    转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...

  7. ASP.NET MVC和Web API中的Angular2 - 第1部分

    下载源码 - 903.5 KB 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索 ...

  8. Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择

    2017-08-04 前端大全 (点击上方公众号,可快速关注) 英文:ANTONI ZOLCIAK  译文:众成翻译 www.zcfy.cc/article/vue-react-angularjs-a ...

  9. 深入理解Angular2变化监测和ngZone

    转载自GitHub JTangming : https://github.com/JTangming/tm/issues/4 Angular应用程序通过组件实例和模板之间进行数据交互,也就是将组件的数 ...

随机推荐

  1. Nginx location配置详细解释

    nginx location配置详细解释 语法规则: location [=|~|~*|^~] /uri/ { - } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 ur ...

  2. Node.js入门(含NVM、NPM、NVM的安装)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Node.js的介绍 引擎 引擎的特性: JS的内核即引擎.因为引擎有以 ...

  3. JAVA在不确定具体 Annotation 类型时,获得注解参数

       package com.lzw.demo; @SpringBootApplication public class DemoApplication { public static void ma ...

  4. 转 Caffe学习系列(4):激活层(Activiation Layers)及参数

    在激活层中,对输入数据进行激活操作(实际上就是一种函数变换),是逐元素进行运算的.从bottom得到一个blob数据输入,运算后,从top输入一个blob数据.在运算过程中,没有改变数据的大小,即输入 ...

  5. BIOS基础

    Basic Input Output System 基本输入输出系统   固化到主板上-个 ROM芯片上的 程序   为计算机提供最底层.最直接的的硬件设置和控制   以上来自百度   不讨论时软件还 ...

  6. golang调试工具Delve

    Devle是一个非常棒的golang 调试工具,支持多种调试方式,直接运行调试,或者attach到一个正在运行中的golang程序,进行调试. 线上golang服务出现问题时,Devle是必不少的在线 ...

  7. qwe 简易深度框架

    qwe github地址 简介 简单的深度框架,参考Ng的深度学习课程作业,使用了keras的API设计. 方便了解网络具体实现,避免深陷于成熟框架的细节和一些晦涩的优化代码. 网络层实现了Dense ...

  8. android的Findbugs问题整理

    1. 对字符串不相等的判断 错误 if (chapterInfo.getPayMode() != String.valueOf(com.shuqi.base.common.Constant.PAYMO ...

  9. vc6.0转vs2005中字符串的问题

    简单一点:就是project->Property->Configuration Property-->general-->Character Set:No Set即可.详细分析 ...

  10. dojo之dojox/data/CsvStore初始化

    dojo之dojox/data/CsvStore初始化 1.var csvStore = new dojox.data.CsvStore({url:"student.csv"}); ...