AngularJS——创建组件

时间:2024-05-30 18:26:25

一、页面规划:
针对公司项目需要,做一个列表查询页,前期主要涉及页面,讨论应该显示的内容,根据用户需求需要设计几个按钮,根据哪几个字段查询最为合理,易用。

二、使用Angular创建组件:
ng g component pub-training-plan

三、创建结果:
AngularJS——创建组件

创建完成后的文件有css,html,ts,spec.ts四个文件,css写样式,html写静态页面,ts写js代码,spec.ts测试使用,目前不用动。

创建组件的时候遇到个问题,本来应该是在哪个文件夹下建的组件路径应该就是这个文件夹,但是建出来的组件路径又重复了,像这样:E:\project\ITOO-FrontEnd\src\app\workspace\education-plan\pub-training-plan\src\app\workspace\education-plan\pub-training-plan,问过晓风后,才知道我是用cnpm install安装的依赖包,后来试着用npm install,再重新输入创建组件的命令就ok了。
AngularJS——创建组件

四、写html页,对应ts引入需要的service,model,定义变量接收返回值,定义用到的url,调http的get、post等等方法就ok了。

总结:
亲手实践一下,结合书,博客,官网再系统学习下就更好了。