美文网首页我爱编程
angular2的学习笔记(一)——初识angular2

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

作者: 晓朔一一 | 来源:发表于2017-08-13 13:38 被阅读0次

    这个是我自己在学习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   运行下项目,在浏览器中看看效果!

    相关文章

      网友评论

        本文标题:angular2的学习笔记(一)——初识angular2

        本文链接:https://www.haomeiwen.com/subject/ifmsrxtx.html