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