angular2的学习笔记(一)——初识angular2

这个是我自己在学习angular2中的一些学习笔记,其中夹杂了很多个人观点,如果有不正确的地方,欢迎大家来指正!

angular.js,对我们做前端的小伙伴一定不陌生,AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

............此处略去好几万个字!!!

概念性的东西我们就不多说,如果真的想了解,去问问度娘吧,她比我讲的详细多了!

不过,必须要知道的几点需要记住的(angular2中的大的变化):

1、angular2中移除了controller+$scope设计,改用组件式开发(这个也是目前mvc框架最流行的一种开发模式)

2、性能更好,angular2大大加快了渲染速度,变化监测效率更高

3、优先为移动应用设计(Aangular Moblie Toolkit套件),摆脱了angular1.x中队移动端的不友好!

4、更加贴合未来的标准(这个瞎JB听听就可以了)

我们在开发angular2中用到的语言是ES6,ES7还有Typescript(ts)如果对这个掌握不熟悉的话,大家可以去看看相应的资料!

其他废话不多说!!!

我们这里用到的是angular2的脚手架工具:

首先我们要全局安装并下载:

                    npm install-g@angular/cli

然后,创建项目

                     ng new my-app

再然后,启动开发服务器(进入项目目录,并启动服务器)。

                     cd my-app

                      ng serve--open

最后我们就可以开发了!

以下是项目的文件结构:

项目结构

我们在真实开发的时候只需要在src/app的目录下开发就可以了

package.json:用来标记出本项目所需的 npm 依赖包。

tsconfig.json:定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。

typings.json:为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。

webpack.config.js:为构建Angular应用所进行的一系列webpack配置。

karma.conf.js:Karma单元测试配置。

其他的一些配置项根据自己项目开发的需求,去添加或者修改,这里就不一一介绍了!

接下来我们看看编写页面代码的地方:


开发文件

我们在开发的时候主要就是在src/app文件中(这个前面有提到过)

src/app/app.component.ts:这个就是处理组件业务逻辑的地方。

src/app/app.component.html:这个就是编写组件的页面的html的地方。

src/app/app.component.css:这个就是页面的样式编辑文件。

src/app/app.module.ts:根模块文件,用来启动项目的文件。

src/app/app.component.spec.ts:用于单元测试。(可选)。

具体其他的文件或者配置项在项目的根目录下的README.md中有解释。

了解了angular2中的目录结构,我们也可以进入项目的根目录,然后打开终端,执行:

                    npm install(安装项目依赖)

然后:         npm start   运行下项目,在浏览器中看看效果!

推荐阅读更多精彩内容