初入Angular ，学习记录

目前主流前端框架：React 、Angular 和Vue 。实现SPA（单页刷新）

C# ： ABP框架 API，Laravel Api   ，构建前后台分离项目。

1. 环境配置

1.1 NodeJs和npm 安装

1. node –v  和 npm –v 查看安装版本
2. 可以安装辅助工具：PowerCmd 进行命令操作

nodejs 配置 https://www.cnblogs.com/merray/p/7754215.html

1.2 安装Angular CLI

1. 使用 npm全局安装 Angular CLI

npm install -g @angular/cli                                   

1. 安装完成查看版本 ng –v

 

中文文档官网 ：https://angular.cn/guide/quickstart

1.3 创建项目

1. ng new 项目名称
2. 若创建项目中出现 'yarn' 不是内部或外部命令，也不是可运行的程序或批处理文件

npm install g yarn

1. 出现 Error -4048 ，若不是权限问题，有可能是缓存问题，清空缓存

npm cache clean --force

 

1. ng new 项目名称 --routing     创建带路由的项目

2.工程介绍

2.1 文件结构

 

1. 此文件结构不建议更改
2. e2e 端到端测试文件
3. src 文件目录
4. .angular-cli.json  工具配置文件，JQuery和Bootstap 引入配置
5. package.json  是 npm 下载的依赖包配置
6. karma.conf.js 和 protractor.conf.js 自动化测试文件
7. README.md 说明文件
8. tsconfig.json ts 规则配置

 

2.2 src文件结构

1. app 组件和模块
2. assets 存放资源文件，如图片等
3. environments 多环境开发配置，angular支持多环境开发
4. main.ts 入口文件
5. index.html 根文件
6. polyfills.ts 导入部分库，用于兼容浏览器版本
7. styles.css 全局样式

http://blog.csdn.net/qq_34645412/article/details/77145127

2.3 app文件结构

1. app.component.ts 组件
   1. 装饰器 @Component()，组件元数据装饰器
      1. selector 选择器
      2. template或templateUrl
      3. styleUrls：数组，styles：[``]
   2. 模板 Template
   3. 控制器 Controller
   4. 输入属性@Inputs()   接受外部数据，可以用于组件传递数据
   5. 提供器providers     用于依赖注入
   6. 生命周期钩子 Lifecycle Hooks   初始化等操作
   7. 样式表 styles
   8. 动画 Animations
   9. 输出属性@Outputs
2. app.component.html 模板
3. 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 启动命令

1. 进入目录  ng serve –open
2. npm start    用于启动并监测

http://localhost:4200/    

3.5 node_modules 的安装

进入目录   npm install

 

npm3   node_modules包可在不同项目共享——有待研究

 

4.创建模块

4.1 应用第三类库

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 bootstrap@3.3.7 --save

 

安装完成，可在package.json 文件中查看

1. 配置[.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"

      ],

1. 安装类型描述文件，使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 组件安装

一个页面是由多个“组件”组成

1. 创建组件

进入项目目录，执行如下命令：

ng g component 文件夹名称

 

也可以简写

ng g c 文件夹名称

 

1. 注意：若报错 Cannot find module '@angular-devkit/core'

npm install @angular-devkit/core 

1. 查看app.module.ts 文件更新
2. 

 

4.3 安装webpack

npm install webpack -g

npm install g webpack --save-dev

 

http://www.jqhtml.com/7494.html

http://blog.csdn.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

感谢文中所有链接作者