Angular2 - 概述
*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 - 概述的更多相关文章
- angular2新手学习笔记(1)概述
作为培训生出生的一员.在培训出来之后如愿的找到了一份能温饱的工作.进来之后告知公司后面的项目需要angular2来搭建. 对于只会jQuery和bootstrap这两招的我来说无疑是一个巨大的挑战,在 ...
- [译]Angular2 和TypeScript -- 一次简要的预览
原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者: Yakov Fain Posted o ...
- Angular2+typescript+webpack2(支持aot, tree shaking, lazy loading)
概述 Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loa ...
- Angular2 和TypeScript
Angular2 和TypeScript 原文链接:https://www.infoq.com/articles/Angular2-TypeScript-High-Level-Overview 作者: ...
- JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)
写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向 ...
- Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择
转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...
- ASP.NET MVC和Web API中的Angular2 - 第1部分
下载源码 - 903.5 KB 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索 ...
- Vue, React, AngularJS, and Angular2. 我们对流行JavaScript框架们的选择
2017-08-04 前端大全 (点击上方公众号,可快速关注) 英文:ANTONI ZOLCIAK 译文:众成翻译 www.zcfy.cc/article/vue-react-angularjs-a ...
- 深入理解Angular2变化监测和ngZone
转载自GitHub JTangming : https://github.com/JTangming/tm/issues/4 Angular应用程序通过组件实例和模板之间进行数据交互,也就是将组件的数 ...
随机推荐
- ASP.NET CORE MVC 实现减号分隔(Kebab case)样式的 URL
ASP.NET CORE MVC 中,默认的 Route 模板是: /{controller}/{action} .我们可以通过开启 URL 小写转换将 URL 变为小写,但此方式在 Control ...
- java中public private protected default的区别
1.public:public表明该数据成员.成员函数是对所有用户开放的,所有用户都可以直接进行调用 2.private:private表示私有,私有的意思就是除了class自己之外,任何人都不可以直 ...
- CSS布局(六) 对齐方式
一.水平居中: (1). 行内元素的水平居中? 如果被设置元素为文本.图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的display设置为inline ...
- LRU最近最少使用算法
最近最少使用算法有两种实现方式: (1)记时法:对于每一页增设一个访问时间计时器.每当一个页面被访问时,当时的绝对时钟内容被复制到对应的访问时间计时器中.这样系统就记录了内存中所有页面最后一次被访问的 ...
- 【BZOJ2095】 Bridge
Time Limit: 1000 ms Memory Limit: 128 MB Description YYD为了减肥,他来到了瘦海,这是一个巨大的海,海中有n个小岛,小岛之间有m座桥连接,两个 ...
- Web自动化之Headless Chrome开发工具库
命令行运行Headless Chrome Chrome 安装(需要带梯子) 下载地址 几个版本的比较 Chromium 不是Chrome,但Chrome的内容基本来源于Chromium,这个是开源的版 ...
- 安装linux环境及相关包方法
安装linux系统: 先下载 iso镜像文件,在windows系统下,插入u盘,下载 Ultraiso软件,安装好后,根据 http://jingyan.baidu.com/article/a378c ...
- Request processing failed; nested exception is java.lang.IllegalArgumentException: No converter found for return value of type: class cn.e3mall.pojo.TbItem
这个异常是缺少json相关的包 把以下依赖补上就好: <!-- Jackson Json处理工具包 --><dependency> <groupId>com.fas ...
- java-数据库连接,分层实现增删改查测试
成员属性类: public class Dog { private int number; private String name; private String strain; private St ...
- 【javascript】jQuery判断用户右击事件
jquery 判断用户是鼠标是右击还是左击, // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 $(document).mousedown(function(e) { if(3 ...