Angular5学习笔记（一）

今天刚刚开始接触Angular5， 大概看了一下API， 有了初步的认识之后，就要从项目代码开始看起了，这样对Angular5的整体架构有更直观的认识。于是从Git上找了一个demo，clone下来之后看一下项目的结构和运行原理。

Reference API URL： http://www.angularjs.net.cn/api/

Demo address： https://github.com/Ismaestro/angular5-example-app

 

把项目下载到本地之后，第一步要下载项目的依赖库，可以看到项目依赖库的配置是在package.json文件里的，所以在控制台执行： npm install， 依赖库下载完成后要运行项目，看一下运行效果，执行指令： npm start。

这里的npm start 是在package.json里封装好的一条指令：

 

下面这个错误是npmstart过程中报的错误： Cannot find module ‘@angular-devkit/core’。

解决方法:

参考链接： https://github.com/angular/angular-cli/issues/9307

错误解决之后，打开浏览器键入 – localhost:4200 即可看到运行界面：

这里有一个小知识点，项目运行端口：4200是在protractor.conf.js里配置的，见下图。实际开发中可以根据需要进行修改。

Angular5 启动应用过程详解：

指令：

ng serve

·        在命令行中输入 ng serve 后

·        ng 会根据 angular-cli.json中的main元素 找到 应用入口文件main.ts

·        main.ts 再加载 根模块AppModule

·        AppModule 启动Angular模块(@ngModule)

·        @ngModule 为 AppModule 添加元数据,并指定了顶层组件AppComponent

·        AppComponent 中我们就可以做想做的事情了

 

启动图解说明：

参考链接： http://blog.csdn.net/Edison_03/article/details/78935045