
- 外文名
- Angular
- 别 名
- Angular
- 中文名
- Angular
-
-
Angular - angular2升级到angular8
2019-07-26 16:54:28最近要项目改造,由原来的angular2 升级到 angular8,需要以下操作: 1.升级全局Angular CLI npm install -g @angular/cli@latest 2..升级你需要升级项目内 angular-cli npm i @angular/cli@latest 3.解决...最近要项目改造,由原来的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之后,一些依赖包的引入有所变化,要根据项目在做具体修正。
-
【Angular】Angular 5 升级到Angular 6 过程实录
2018-07-26 20:55:56第一步:运行:npm install -g @angular/cli 报了-4075的错误,网上说应该是依赖的问题,建议由“npm”改为“cnpm” 第二步:运行:cnpm install -g @angular/cli 成功,接着往下输入命令。 第三步:运行:...背景 头儿给了一个别的项目的框架,让升级到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
看样子是把一个已弃用的东西删除。小结 这样走下来,发现也没有想象中那么难。最重要的是“以终为始”,要知道自己要达到的效果,然后有一种敢于接触新东西的勇气。
-
AngularJS进阶(五)Angular实现下拉菜单多选
2015-09-11 18:46:17Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http://dotansimha.github.io/angularjs-dropdown-multiselect/#/ ...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】Angular发展
2018-04-23 11:32:41Angular是一个开发平台,它能帮助你更轻松的构建web应用。Angular集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。Angular为开发者提升构建web、手机或桌面应用能力。 ...Angular是一个开发平台,它能帮助你更轻松的构建web应用。Angular集声明式模板、依赖注入、端到端工具和一些最佳实践于一身,为你解决开发方面的各种挑战。Angular为开发者提升构建web、手机或桌面应用能力。
Angular经过一系列的版本,现在Angular常用的版本为Angular4.0(Anuglar),他是对Angular1.5(AngularJs)完全重写的结果。
对比:简单的从框架上来对比一下
AngularJs:是一个典型的MVC框架
Angular:是一个组件树
其他流行的前端框架:
对于目前其他流行的前端框架React.js、Vue.js,Angular他们各有优点
简单的了解了一下Angular,以后会继续分享本人对Angular的一些学习成果。
-
angular2升级angular4
2017-06-23 11:11:14angular2升级angular4 -
AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构
2016-03-24 18:03:53requirejs+angular+angular-route浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫、京东、国美这些都是很好的例子。而在Webapp中,又要数单页面架构体验最好,更像原生app。简单来说,单页面App不... -
angular9拦截器的使用
2020-07-06 22:10:29angular9拦截器的简单使用拦截器统一添加token拦截器使用拦截器实现后的效果参考资料 拦截器统一添加token 我们在做一个后台管理系统时,需要给每个请求的请求头里面添加token,所以下面我们来了解一下angular的拦截器... -
安装Angular
2019-09-20 15:59:34安装Angular 下载,之后安装 https://nodejs.org/dist/v12.16.2/node-v12.16.2-x64.msi 查看安装情况 C:\Users\admin>node -v v12.1... -
Angular环境搭建
2017-04-27 16:15:33目前Angular的最新版本是Angular4.0,所以我们搭建的环境是4.0版本的。 Angular官方给我们提供了一个命令行工具就是Angular CLI,通过这个工具我们能很容易的创建Angular项目。后期对项目的管理及构建等都是使用... -
解决Angular CLI找不到模块"angular-devkit/build-angular"的问题
2019-10-31 20:31:31Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。今天执行“ng serve”命令时,竟然报找不到模块"@angular-devkit/build-angular"的错误。 问题背景 执行“ng serve”命令时,... -
Angular Material,Angular CDK试用(Angular 7)
2019-01-22 01:46:35本文代码已上传到github:https://github.com/minicherry/taoBao1.Angular Material,Angular CDK基础配置引入此部分参考:juejin.im/post/5a7272…安装配置从官网学习:material.angular.io/guide/getti…下载... -
-
Angular DataTables
2018-05-22 11:25:16http://l-lin.github.io/angular-datatables/#/welcome -
angular9使用echarts地图
2020-06-13 16:20:301.安装了@angular-cli的脚手架 2.ng -v查看版本 3. ng new my-project(项目名) 下载echarts npm i echarts 创建容器 src/app/app.componnet.html <div id="main" style="width:800px;height:500px"></div... -
angular9组件动态加载实现
2020-07-19 16:21:57按条件加载组件,实现组件的灵活切换,减少大量ngIf的使用,在angular中也是比较常见的操作,下面就来大家一起交流一下angular组件的动态使用. 指令的创建 在添加组件之前,先要定义一个锚点来告诉 Angular 要把组件插入... -
angular7升级到angular8
2019-09-25 17:50:01angular7升级到angular8 最近换了项目组,技术栈也更换了(原来是Vue,现在是angular)。正好赶上版本升级,于是自己尝试升级,顺便记录了过程中遇到的问题,希望可以帮到需要升级的朋友。 先使用ng update 查看... -
Angular 8降级到Angular 7
2019-10-24 22:11:08ng --version npm uninstall -g @angular/cli npm cache clean --force npm install -g @angular/cli@7.2.12 ng --version -
【angular】-AngularJS、Angular 2、Angular 4的区别
2018-08-20 14:25:08AngularJS、Angular 2、Angular 4的区别 前言 随着Angular的发展,有必要了解AngularJS、Angular 2、Angular 4的区别 命名区别 (1)我们常说的Angular 1 值angularJS;从angular 2 开始改名,不带有JS (2... -
Angular6 升级到 Angular8
2019-06-25 10:46:10这里用的是基础的Angular6项目,里面只有部分第三方插件 1.升级全局Angular CLI npm install -g @angular/cli@latest 2.解决CLI和程序CLI版本不一致问题 npm rebuild node-sass 3.启动更新程序,查看... -
Angular: 如何彻底卸载angular cli
2020-02-29 16:21:03npm uninstall -g angular-cli npm uninstall --save-dev angular-cli npm uninstall -g @angular/cli npm cache clean (如果报错,执行强制清除缓存npm cache clean --force) npm install -g @angular/cli@latest ... -
Angular6向Angular7跨越
2019-01-23 21:56:13最近一直在用Angular这个框架,也打算深入学一下,在去年9月的时候看到了Angular出7.0版本了,想着自己还是个年轻人,应该有不断学习的能力,但是前面一直在弄软考,项目什么的,为了开发速度就没有更新,这次有时间... -
Angular CLI 创建 Angular项目
2018-03-06 15:24:46最后项目的打包Angular4.0来了,更小,更快,改动少接下来为Angular4.0准备环境和学会使用Angular cli项目1.环境准备: 1)在开始工作之前我们必须设置好开发环境如果你的机器上还没有安装Node.js和npm,请安装他们... -
Angular 事件_Angular $event - angular 基础教程 - Angular 教程网
2018-02-02 14:15:14获取鼠标事件 在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入 $event 变量,...import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-simple- -
angular-1.4.1
2015-07-01 17:55:51从官网angularjs.org下载,包含angular.js、angular.min.js、angular.min.js.map、angular-route.js、angular-route.min.js之类等等 ... AngularJS是为了克服HTML在构建应用上的不足而设计的,它通过新的属性和... -
angular6项目升级到angular7
2018-12-29 14:33:53ng update @angular/cli @angular/core -
angular ui_angular 模板 汇总整理了一些angular ui
2017-11-19 14:07:38对于一个前端来说 angular react vue jquery 之类的技术是必须学习的 学习过程中 多多少少 会遇到各种各样的困难,借鉴和学习别人的东西也必不可少的。 对于本人学习angular 来说也曾经历过很长时间的摸索,也借鉴... -
angular HostListener_angular 事件处理_angular 教程_angular视频教程 - angular 指令教程
2018-02-04 11:36:11在 Angular 中,我们可以使用 HostListener 属性装饰器,实现元素的事件绑定。 指令的作用 该指令用于演示如何利用 HostListener 装饰器,监听用户的点击事件。 指令的实现 import { Directive, ...
-
自动化测试Python3+Selenium3+Unittest
-
虚幻4引擎基础
-
区块链应用开发实战(Go语言方向)
-
朱老师C++课程第3部分-3.6智能指针与STL查漏补缺
-
STM32H7+W5500(HAL).rar
-
Elasticsearch RESTful API 入门篇
-
2021-02-25
-
iptables 企业级防火墙配置(四表五链)
-
白话:java从入门到实战
-
前端开发:如何正确地跨端?
-
关于美国保险.pptx
-
论文 参考文献的格式说明
-
项目经理成长之路
-
虚拟磁盘服务错误: 卷大小太大。
-
Galera 高可用 MySQL 集群(PXC v5.7+Hapro)
-
项目_3-源码
-
zabbix-hadoop.py
-
QQHelper1.3.2.apk
-
基于python的dango框架购物商城毕业设计毕设源代码使用教程
-
delphi6-7 Delphix_d7控件