AngularJs新建项目

2019-01-10 15:54:23 浏览数 (1)

配置环境:

1.首先我们安装nodejs,(百度NodeJs即可)

2.安装完成后测试:

node -v,npm-v

若npm-v报错:打开你的安装路径

修改npmrc文件中的路径改为你的npm的 路径

3.安装cli : npm install -g @angular/cli

4.安装完成后测试 ng -v验证是否安装成功,可能出现ng不是命令错误,将ng的目录配置在环境变量path中即可。

5.下载WebStorm

HelloWorld项目:

1. 命令行进入工作区间,ng new 项目名称 比如 ng new HelloWordDemo,项目目录结构如下

2.引用插件库,比如我们使用jquery 命令行进入工作区间:

执行npm install jquery --save,

第三方插件下载自动下载到node_modules中,在.angular-cli.json中

引用你的第三方插件如图所示:

3.组件:新建组件模块

按照自己的项目设计,比如需要新建header部分执行命令:ng g component header

,在app.component.html中引用组件完成框架的搭建如图所示:

在生成的组件中编写各部分的代码即可。

0 人点赞