四、开发环境的搭建
1、安装NodeJS
2、安装 Angular/CLI
CLI : Command Line Interface 命令行接口(一些终端命令,用于快速搭建Angular项目以及开发===> 脚手架)
【sudo】 cnpm install -g @angular/cli
ng -v
五、HelloWorld
1、创建项目
#切换到要创建项目的目录下
#ng new 项目名 [参数]
ng new itanyangular --routing
#Angular会创建一个项目,同时npm install
#120M左右 ==> 下载很慢 ctrl + c
#切换到项目目录下(package.json所在目录)
cnpm install
#npm config set registry https://registy.npm.taobao.org
#ng set --global packageManager=cnpm
2、目录结构
建议不要修改cli生成的文件或者文件夹的名字,除非你知道你在做什么
项目
|---e2e 端到端的测试目录
|---node_modules 第三方的依赖包
|---src 应用程序源代码目录
|---app 应用中的所有的组件或者模块 (i)
|---assets 静态资源 图片等等
|---environments Angular是支持多环境开发的(开发环境 测试环境 生产环境的配置)
favicon.ico 图标文件
index.html 首页(i)
main.ts 整个app的入口,Angular会从该问价加载整个app(i)
polyfills.ts 做老版本浏览器支持
styles.css 全局样式文件(i)
test.ts 测试文件
tsconfig.app.json 编译器的配置文件
tsconfig.spec.json
typings.d.ts
.angular-cli.json cli工具的配置(i)
.editorconfig 编辑器配置文件
.gitignore git配置文件
karma.conf.js 单元测试
package.json npm工具的配置文件
protractor.conf.js 自动化测试的配置文件
README.md
tsconfig.json 定义typescript配置的配置文件
tslint.json 进行ts文件代码质量检测的配置文件
3、运行HelloWorld
ng serve
#需在项目目录下执行
#npm run start
#start 是定义在package.json中的一个命令
4、启动过程
.angular-cli.json 定义了应用程序首页和入口ts文件
--->index.html --> 加载页面
--->main.ts ---> bootstrapModule --> 引导模块 ---> 某个组件 --> 组件模板 css 选择器
---> 使用选择器,定位index.html中的第一个匹配标签,将模板的内容append到标签中