如何搭建一个Angular4.0程序
写个搭建Angular4.x开发环境的基本步骤,个人觉得Angular是前端开发的必备框架。
第一步:安装node.js,如果电脑上有,请忽略。
到官网https://nodejs.org/en/下载,一步一步安装即可。
第二步:搭建Angular开发环境
打开控制台win+R,执行安装angularCLI安装命令,npm install -g angular-cli@latest,接着会提示AngularCLI安装完成;
创建Angular项目目录,使用cd命令进入你想要的项目文件夹(使用默认的也都无所谓),执行 ng new Demo1即可,等待其为你的项目下载必须的架包即可;
第三部,开发Angular组件
使用IDE打开建立的项目,在IDE的控制台输入npm run start让程序跑起来,到浏览器中打开http://localhost:4200即可看到自己搭建的第一个Angular程序;
Angular是组件化的前端开发框架,需要自己为程序创建新的组件,同样是在IDE的控制台键入命令,ng g component firstComponent,即可创建自己的组件,每个组件中分为四个文件,一个是.css文件,负责处理组件的样式信息,一个是.html模板文件,负责编写HTML代码,一个是.spec.ts文件,这个文件用于测试,开发过程中无需管他,还有一个就是.ts文件了,这个负责实现与html中的数据交互的,常见的是数据绑定、实现HTML中标签的路由、实现Angular核心的功能DI(依赖注入)等;
编写好自己的组件后,需要将自己的组件加入到主模块中,只需要在根目录中的index.html中的任意位置的加入<app-first-component></app-first-component>(依你创建的组件名称决定app-后面的内容);
刷新浏览器中的页面,即可看到自己变下的组件显示出来了。