最近要项目改造，由原来的angular2 升级到 angular8，需要以下操作：

1.升级全局Angular CLI

npm install -g @angular/cli@latest


2..升级你需要升级项目内 angular-cli

npm i @angular/cli@latest

3.解决CLI和程序CLI版本不一致问题（也是在项目内，可以先不执行这个命令的，之后的全部升级也可以完成这个）

npm rebuild node-sass


 4.升级node&&npm版本，window系统升级node只能到node官网下载window安装包来覆盖之前的node；mac可以直接命令升级。参考node和npm版本更新！！！

我升级之后，目前的node版本是10.16.0；Angular的版本是8.1.2。

5.启动更新程序，查看哪些需要更新

ng update



6.升级剩下所有组件

ng update --all  --force

 我在执行这个命令是会出现以下提示，所以在执行这个命令之前要保证本地工作树是干净的，提交一下代码就可以了。



7.升级完成后，可以能有一些插件不兼容，可以通过下面的方式安装需要的版本，就是更新一下所有依赖

npm install

在执行npm install的时候会提示npm也要升级，so，npm也需要升级：

npm install -g npm




然后，再npm install 一次就OK了 。

我又执行了一次ng update,发现还有一个要升级，就单独做升级吧



可能升级到8之后，一些依赖包的引入有所变化，要根据项目在做具体修正。

背景
头儿给了一个别的项目的框架，让升级到6。

怎么就算任务完成了呢？我要达到什么效果呢？package.json里的“5”变为“6”，然后项目能正常运行，就算成功了。




参考资料
https://update.angular.io/

这是官方文档，不仅仅是从5升级到6，从任何版本升级到任何版本，都有详细步骤。
运行步骤
第一步：运行：npm install -g @angular/cli



报了-4075的错误，网上说应该是依赖的问题，建议由“npm”改为“cnpm”

第二步：运行：cnpm install -g @angular/cli



成功，接着往下输入命令。

第三步：运行：npm install @angular/cli





如图所示，报了-4048的错误，跟echarts有关系。解决办法是把package.json文件中相关的那句代码删除。我当初就卡在这了，不知道咋解决，是请风大神帮忙的。



删除以后将此命令重新运行一遍，成功。



第四步：运行：ng update @angular/cli



报错了，原因是本地脚手架版本较低，解决办法就是升级。

第五步：运行：npm install --save-dev @angular/cli@latest



第六步：运行：ng update @angular/core



第七步：运行：ng update @angular/material



第八步：运行：ng serve，成功



第九步：分别运行：npm install -g rxjs-tslint、rxjs-5-to-6-migrate -p src/tsconfig.app.json

看样子是把一个已弃用的东西删除。
小结
这样走下来，发现也没有想象中那么难。最重要的是“以终为始”，要知道自己要达到的效果，然后有一种敢于接触新东西的勇气。

Angular实现下拉菜单多选

写这篇文章时，引用文章地址如下：

http://ngmodules.org/modules/angularjs-dropdown-multiselect

http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

AngularJS Dropdown Multiselect

This directive gives you a Bootstrap Dropdown with the power of AngularJS directives.

Features

Based on Bootstrap's dropdown.

jQuery is not necessary.

Seperated your data and the selection data. no modification to the data made.

Built-in search.

Complete control on the selected items model to fit it to your requirements.

Two view options: normal list and checkboxes.

Pre-selected values.

Limit selection count.

Grouping items by property.

Callback events.

Demo

http://dotansimha.github.io/angularjs-dropdown-multiselect/

Dependencies

required: AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0

Make sure to add the dependencies before the directive's js file.

Note: Bootstrap JS file is not needed for the directive, it just uses the CSS file.

Install

Download the files

Using bower:

Just run bower install angularjs-dropdown-multiselect

Manually: You can download the .js file directly or clone this repository.

Include the file in your app

<script type="text/javascript" src="angularjs-dropdown-multiselect.js"></script>.

You can also use the minfined version (angularjs-dropdown-multiselect.min.js).

Include the module in angular (i.e. in app.js) - angularjs-dropdown-multiselect

Usage and Documentation

See the documentation and examples in the GitHub pages: http://dotansimha.github.io/angularjs-dropdown-multiselect/

由以上英文文档可以得知，若使用angularjs-dropdown-multiselect,首先需要在index.html中引入AngularJS >= 1.2, Lodash >= 2, Bootstrap >= 3.0，如下所示:

<script src="js/angularjs-dropdown-multiselect.js"></script>

<script src="js/lodash.min.js"></script>

并在app.js模块中添加依赖angularjs-dropdown-multiselect。如下所示:

var routerApp = angular.module('routerApp', ['ui.router', 'ngCookies',  'ngTable', 'angularjs-dropdown-multiselect', 'MedListModule']);

yh_set_dtl.html核心代码如下：

<div style="float:left">优 惠 类 型:</div>

<!-- Demo -->

<div ng-dropdown-multiselect="" 

 options="yhctlModelOptions" 

 selected-model="yhctlModel"

 checkboxes="true">

</div>

controllers.js代码如下:

 $scope.yhctlModel = [];

 

 $scope.yhctlModelOptions = [ 

                              {id: 1, label: '限定用户'}, 

                              {id: 2, label: "限定商家"}, 

                              {id: 3, label: "限定使用次数"},

                              {id: 4, label: "限定药品"}, 

                              {id: 5, label: "与其它优惠共享"}];

效果图如下：

 

Angular是一个开发平台，它能帮助你更轻松的构建web应用。Angular集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular为开发者提升构建web、手机或桌面应用能力。



Angular经过一系列的版本，现在Angular常用的版本为Angular4.0(Anuglar)，他是对Angular1.5（AngularJs）完全重写的结果。



对比：简单的从框架上来对比一下
AngularJs：是一个典型的MVC框架



Angular：是一个组件树



其他流行的前端框架：
对于目前其他流行的前端框架React.js、Vue.js，Angular他们各有优点






简单的了解了一下Angular，以后会继续分享本人对Angular的一些学习成果。