初入Angular ,学习记录
目前主流前端框架:React 、Angular 和Vue 。实现SPA(单页刷新)
C# : ABP框架 API,Laravel Api ,构建前后台分离项目。
- 环境配置
1.1 NodeJs和npm 安装
- node –v 和 npm –v 查看安装版本
- 可以安装辅助工具:PowerCmd 进行命令操作
nodejs 配置 https://www.cnblogs.com/merray/p/7754215.html
1.2 安装Angular CLI
- 使用 npm全局安装 Angular CLI
npm install -g @angular/cli
- 安装完成查看版本 ng –v
中文文档官网 :https://angular.cn/guide/quickstart
1.3 创建项目
- ng new 项目名称
- 若创建项目中出现 'yarn' 不是内部或外部命令,也不是可运行的程序或批处理文件
npm install g yarn
- 出现 Error -4048 ,若不是权限问题,有可能是缓存问题,清空缓存
npm cache clean --force
- ng new 项目名称 --routing 创建带路由的项目
2.工程介绍
2.1 文件结构
- 此文件结构不建议更改
- e2e 端到端测试文件
- src 文件目录
- .angular-cli.json 工具配置文件,JQuery和Bootstap 引入配置
- package.json 是 npm 下载的依赖包配置
- karma.conf.js 和 protractor.conf.js 自动化测试文件
- README.md 说明文件
- tsconfig.json ts 规则配置
2.2 src文件结构
- app 组件和模块
- assets 存放资源文件,如图片等
- environments 多环境开发配置,angular支持多环境开发
- main.ts 入口文件
- index.html 根文件
- polyfills.ts 导入部分库,用于兼容浏览器版本
- styles.css 全局样式
http://blog.****.net/qq_34645412/article/details/77145127
2.3 app文件结构
- app.component.ts 组件
- 装饰器 @Component(),组件元数据装饰器
- selector 选择器
- template或templateUrl
- styleUrls:数组,styles:[``]
- 模板 Template
- 控制器 Controller
- 输入属性@Inputs() 接受外部数据,可以用于组件传递数据
- 提供器providers 用于依赖注入
- 生命周期钩子 Lifecycle Hooks 初始化等操作
- 样式表 styles
- 动画 Animations
- 输出属性@Outputs
- 装饰器 @Component(),组件元数据装饰器
- app.component.html 模板
- app.module.ts 模块,引入模块需要的东西
bootstrap :指定主组件
3.工程启动
.angular-cli.json 文件配置
3.1 启动加载页面
index.html
3.2 启动加载的脚本
main.ts 是启动脚本
3.3 脚本执行
main.ts 文件说明
若是生产环境执行
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule) 启动起点
index.html 在此中寻找 selector
3.4 启动命令
- 进入目录 ng serve –open
- npm start 用于启动并监测
3.5 node_modules 的安装
进入目录 npm install
npm3 node_modules包可在不同项目共享——有待研究
4.创建模块
4.1 应用第三类库
- 安装:
进入项目目录:安装JQuery 和 Bootstrap
npm install jquery --save
npm install bootstrap --save
bootstrap 依赖项npm install --save popper.js
使用bootstrap 4.0未编译成功,改成3.3.7编译成功
npm install [email protected] --save
安装完成,可在package.json 文件中查看
- 配置[.angular-cli.json]:
修改 styles 节点 script 节点
"styles": [
"styles.css",
//添加bootstrap
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
//添加JQuery
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
- 安装类型描述文件,使typescript 识别JQuery和Bootstrap
进入项目目录:安装JQuery 和 Bootstrap
npm install @types/jquery --save-dev
npm install @types/bootstrap --save-dev
npm install @types/toastr --save-dev
4.2 组件安装
一个页面是由多个“组件”组成
- 创建组件
进入项目目录,执行如下命令:
ng g component 文件夹名称
也可以简写
ng g c 文件夹名称
- 注意:若报错 Cannot find module '@angular-devkit/core'
npm install @angular-devkit/core
- 查看app.module.ts 文件更新
4.3 安装webpack
npm install webpack -g
npm install g webpack --save-dev
http://www.jqhtml.com/7494.html
http://blog.****.net/elisunli/article/details/74976959
版本不兼容造成错误:
https://www.cnblogs.com/zhuanzhuanfe/archive/2017/09/12/7509039.html
npm 和 cnpm
https://segmentfault.com/a/1190000007665813
npm 官网 https://www.npmjs.com/package/postcss-loader
安装 npm install -g cnpm --registry=https://registry.npm.taobao.org
postcss和BrowserslistError https://segmentfault.com/a/1190000010934375
npm init 创建 package.json
npm-check
npm-check是一个npm包更新工具。它还可以检查项目的npm依赖包是否有更新,缺失,错误以及未使用等情况。
https://segmentfault.com/a/1190000011085967
附录 相关指令
ng generate 生成相关文件
更多指令来源:https://www.cnblogs.com/shawWey/p/7846590.html
感谢文中所有链接作者