欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular7上手体验

程序员文章站 2023-12-26 14:02:15
准备工具 ====== "Node.js" Angular requires Node.js version 8.x or 10.x. 查看当前你的node版本可以在CMD中输入 开发工具强烈推荐 "visual studio Code" 安装 agular_cli 新建工程 用CLI命令建立 ng ......

Angular7上手体验

准备工具

node.js

angular requires node.js version 8.x or 10.x.

查看当前你的node版本可以在cmd中输入

node -v

npm -v

Angular7上手体验

开发工具强烈推荐
visual studio code

安装 agular_cli

npm i -g @angular/cli

Angular7上手体验

新建工程

用cli命令建立 ng7demo

ng new projectname

Angular7上手体验

这里前面我用ng7_demo的时候报错

Angular7上手体验

应该是不能用下划线

这里夸奖下,
7加入了cli prompts
建立的时候可以选是否启用router 及 css用scss,sass等
暂时只有这2个prompts选项

进入文件目录

Angular7上手体验

发现git init都帮我自动运行好了

打开vs code开始正题

`文件目录结构

Angular7上手体验

先来运行下看看

打开终端 快捷键ctrl+~
运行 ng serve
Angular7上手体验

假如遇到
Angular7上手体验

error: cannot find module 'node-sass'

这个错误,运行下npm i node-sass@latest

我出这个错是刚刚把node.js升到了11.x,原来是10.0.0的

发现node-sass装不上.这个坑遇到过几次暂时不去解决了,删除node,下载10.13.0的lts版.

成功运行.这里用ng serve --open可以自动打开浏览器 http://localhost:4200/

Angular7上手体验

这边基本和以前的版本没啥大变化.

angular官网还提供了老版升级到7的助手

最低可以选到2.0 =>7.0 的升级提示

Angular7上手体验

dependency

查看下package.json

"dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "core-js": "^2.5.4",
    "node-sass": "^4.10.0",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devdependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.4",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.1"
  }

typescript 支持到 3.1.0+

rxjs 6.3.0 +

新特性

angular cli bundle budgets

打开angular.json

              "budgets": [
                {
                  "type": "initial",
                  "maximumwarning": "2mb",
                  "maximumerror": "5mb"
                }
              ]

可以找到这里

这里的作用是当你运行
ng build --prod
生成生产环境时
如果包大于2mb,那么cli工具会提示你,
如果大于5mb,那么不好意思,生成不了.直接中断.
就里好像小程序的2m单包限制一样

看介绍没找到本身初始项目的新变动
在cdk方面
2个东西很nice

虚拟滚动

Angular7上手体验

这里可以看到,页面scroll中dom个数是没有变化的,

这样大列表的性能会提升很多

拖放

Angular7上手体验

angular elements

支持自定义html tag下的内容投影

就像这样

什么是angular elements

what are angular elements?
angular elements are custom elements. you can embed them into any web application. this enables us to write re-usable angular components & widgets which we can use inside react, vue, preact or even with vanilla js apps. the angular elements will blend in every framework. below are some features of angular elements:

难道终于可以间接的在小程序中用angular了么?

这里找到一篇文章

angular elements 组件在非angular 页面中使用的demo

可以尝试的看一下.下面应该会写一编angular7下的

的简单使用教程

以及把angular elements应用到小程序里的实验

上一篇:

下一篇: