Angular基础系列:环境搭建及第一个应用

1 安装node

  • 下载Nodejs
    传送门:https://nodejs.org/zh-cn/
  • 修改文件夹权限
    sudo chmod -R777 /home/xdq/.npm
  • 配置路径
    vim ~/.bashrc
export Node12_HOME=/usr/bin/node-v12.18.0-linux-x64
export PATH=$Node12_HOME/bin:$PATH
  • 生效配置信息
source ~/.

2 安装angular-cli

sudo npm install -g @angular/cli 

3 新建Angular项目

  • 新建工作区
ng new demo2
  • 选择样式
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS 
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less   [ http://lesscss.org                                             ] 
  Stylus [ http://stylus-lang.com                                         ] 
  • 选择CSS
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
  • 安装依赖包
CREATE demo2/README.md (1022 bytes)
CREATE demo2/.editorconfig (274 bytes)
CREATE demo2/.gitignore (631 bytes)
CREATE demo2/angular.json (3558 bytes)
CREATE demo2/package.json (1247 bytes)
CREATE demo2/tsconfig.json (489 bytes)
CREATE demo2/tslint.json (3125 bytes)
CREATE demo2/browserslist (429 bytes)
CREATE demo2/karma.conf.js (1017 bytes)
CREATE demo2/tsconfig.app.json (210 bytes)
CREATE demo2/tsconfig.spec.json (270 bytes)
CREATE demo2/src/favicon.ico (948 bytes)
CREATE demo2/src/index.html (291 bytes)
CREATE demo2/src/main.ts (372 bytes)
CREATE demo2/src/polyfills.ts (2835 bytes)
CREATE demo2/src/styles.css (80 bytes)
CREATE demo2/src/test.ts (753 bytes)
CREATE demo2/src/assets/.gitkeep (0 bytes)
CREATE demo2/src/environments/environment.prod.ts (51 bytes)
CREATE demo2/src/environments/environment.ts (662 bytes)
CREATE demo2/src/app/app-routing.module.ts (246 bytes)
CREATE demo2/src/app/app.module.ts (393 bytes)
CREATE demo2/src/app/app.component.css (0 bytes)
CREATE demo2/src/app/app.component.html (25757 bytes)
CREATE demo2/src/app/app.component.spec.ts (1056 bytes)
CREATE demo2/src/app/app.component.ts (209 bytes)
CREATE demo2/e2e/protractor.conf.js (808 bytes)
CREATE demo2/e2e/tsconfig.json (214 bytes)
CREATE demo2/e2e/src/app.e2e-spec.ts (638 bytes)
CREATE demo2/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
    Successfully initialized git.
  • 启动服务
cd demo2
ng serve --open
  • 编译
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.4 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3 MB [initial] [rendered]
Date: 2020-06-12T00:33:17.342Z - Hash: 3ca00025d4d380345ead - Time: 5725ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
  • 访问
http://localhost:4200/
  • 页面

在这里插入图片描述

Angular首页

【参考文献】
[1]https://angular.cn/start
[2]https://angular.cn/guide/setup-local
[3https://nodejs.org/zh-cn/https://nodejs.org/zh-cn/]https://nodejs.org/zh-cn/

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Angular、Vue 和 React 都是流行的前端框架,它们都具有一些共同的特点,如组件化、虚拟 DOM、响应式数据流等。但它们也有一些不同之处,如下所述: 1. AngularAngular 是一个完整的框架,提供了一整套工具和库,包括模块化、组件化、依赖注入、模板语法、路由管理、HTTP 请求等功能。它使用 TypeScript 作为主要开发语言,强制使用严格类型检查。Angular 的学习曲线较陡峭,但它的文档和工具非常完善,可以帮助开发者快速构建可维护、可扩展、高性能的 Web 应用程序。 2. Vue: Vue 是一个轻量级的框架,采用了类似 Angular 的组件化思想和类似 React 的虚拟 DOM 技术,但它的语法和模板更加简洁、易于理解。Vue 的学习曲线较为平缓,可以逐步学习,也可以通过 Vue-cli 等工具快速搭建项目。Vue 的社区和生态系统较为活跃,有很多插件和组件库可供使用。 3. React: React 是一个由 Facebook 开发的框架,采用了虚拟 DOM 和单向数据流的思想,可以帮助开发者构建高性能的 Web 应用程序。React 的语法较为灵活,可以使用 JSX 或纯 JavaScript 编写组件,但它需要使用额外的库和工具来实现路由、状态管理等功能。React 的生态系统非常丰富,有很多第三方组件和插件可供使用。 总之,Angular、Vue 和 React 都有自己的优点和适用场景,开发者可以根据项目需求和个人喜好选择合适的框架。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天然玩家

坚持才能做到极致

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值