angular 在vscode 下的hello world

这篇具有很好参考价值的文章主要介绍了angular 在vscode 下的hello world。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Angulai 是google 公司开发的前端开发框架。Angular 使用 typescript 作为编程语言。typescript 是Javascript 的一个超集,提升了某些功能。本文介绍运行我的第一个angular 程序。

前面部分参考: Angular TypeScript Tutorial in Visual Studio Code

一:安装angular 的前提是安装好了node.js。

我在visual code 下的node.js的hello world-CSDN博客 这个文章中介绍了怎么安装。

检查的方法是: node -v 能显示node  的版本。

二:安装angular cli 的方法是终端输入下面命令:

npm install -g @angular/cli

三:建立angular 应用的方法是:

ng new my-app

my-app 是应用工程的目录。ng new 命令执行是会问你stylesheet format, 直接回车选择缺省的,也可以用箭头选择,然后回车选定。我建立的目录是 myfirst,执行过程如下:

C:\Users\leon>cd \angular

C:\angular>ng new myfirst
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss
 ]
CREATE myfirst/angular.json (2879 bytes)
CREATE myfirst/package.json (1038 bytes)
CREATE myfirst/README.md (1061 bytes)
CREATE myfirst/tsconfig.json (901 bytes)
CREATE myfirst/.editorconfig (274 bytes)
CREATE myfirst/.gitignore (548 bytes)
CREATE myfirst/tsconfig.app.json (263 bytes)
CREATE myfirst/tsconfig.spec.json (273 bytes)
CREATE myfirst/.vscode/extensions.json (130 bytes)
CREATE myfirst/.vscode/launch.json (470 bytes)
CREATE myfirst/.vscode/tasks.json (938 bytes)
CREATE myfirst/src/main.ts (214 bytes)
CREATE myfirst/src/favicon.ico (948 bytes)
CREATE myfirst/src/index.html (293 bytes)
CREATE myfirst/src/styles.scss (80 bytes)
CREATE myfirst/src/app/app-routing.module.ts (245 bytes)
CREATE myfirst/src/app/app.module.ts (393 bytes)
CREATE myfirst/src/app/app.component.html (23115 bytes)
CREATE myfirst/src/app/app.component.spec.ts (994 bytes)
CREATE myfirst/src/app/app.component.ts (212 bytes)
CREATE myfirst/src/app/app.component.scss (0 bytes)
CREATE myfirst/src/assets/.gitkeep (0 bytes)
√ Packages installed successfully.

...

四:运行angular 的方法是转到工程目录,然后 ng serve 启动:

ng serve

然后在浏览器中  http://localhost:4200  就可以看到你启动的工程了。

我的操作过程如下:

C:\angular>cd myfirst

C:\angular\myfirst>ng server
Error: Unknown command. Did you mean serve?

C:\angular\myfirst>ng serve
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. No
Global setting: enabled
Local setting: disabled
Effective status: disabled
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.35 MB |
polyfills.js          | polyfills     | 333.17 kB |
styles.css, styles.js | styles        | 230.91 kB |
main.js               | main          |  48.73 kB |
runtime.js            | runtime       |   6.51 kB |

                      | Initial Total |   2.95 MB

Build at: 2023-09-30T00:12:18.385Z - Hash: 0dce8cec7daf64de - Time: 16863ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.
√ Browser application bundle generation complete.

打开浏览器界面如下:

angular 在vscode 下的hello world,www,angular.js,vscode,前端

五:查看工程内容:

打开另一个终端:

cd my-app
code .

 启动vscode,或者直接启动vscode 然后转到工程目录下:

angular 在vscode 下的hello world,www,angular.js,vscode,前端

介绍部分参考:https://www.simplilearn.com/tutorials/angular-tutorial/angular-hello-world

Root HTML - index.html

The Entry Point - main.ts

Main Module - app.module.ts

Root Component - AppComponent: app.component.ts

这个文件中把 myproject   修改为 Hello World 并保存,浏览器界面里显示 hello world app is running

介绍到此,看上去要学会angular 还有点难。文章来源地址https://www.toymoban.com/news/detail-738729.html

到了这里,关于angular 在vscode 下的hello world的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js简介以及在html中的2种使用方式(hello world)

    javascript :是一个跨平台的脚本语言;是一种轻量级的编程语言。 JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。 HTML: 结构 css: 表现 JS: 行为 HTML+CSS 只能称之为静态网页,加入js网页则有了灵魂称之为动态网页 脚本语言的特点: 不能独立运行,要依赖

    2024年02月12日
    浏览(50)
  • 自学WEB后端01-安装Express+Node.js框架完成Hello World!

    前端         前端开发主要涉及用户界面(UI)和用户体验(UX),负责实现网站的外观和交互逻辑。前端开发使用HTML、CSS和JavaScript等技术来构建网页,并通过各种工具和框架(如React、Vue.js、Angular等)来简化开发过程。前端开发关注于网页设计、布局、样式、动画效果以及

    2024年02月07日
    浏览(61)
  • 【C快学-C语言程序设计(基础篇)】从VSCode中使用C编写我的第一个Hello world

    简介:本专栏是一个C语言基础入门知识学习的一个专栏 面向:广大C友 工具:VSCODE 博主:一个友好且宠粉的博主,送书活动小专栏,不定期抽奖送图书给粉丝 社区:🦈山鱼社区 我这里是使用超级强大的vscode来进行C语言的学习的,因为vscode有着许多好用且方便的插件,能够

    2024年02月13日
    浏览(47)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(91)
  • 【C++】“Hello World!“

    🦄 个人主页 :修修修也 🎏 所属专栏 :C++ ⚙️ 操作环境 : Visual Studio 2022 ​ 纪念一下自己编写的 第一个C++程序 运行结果: ​ 1. include :包含。 #include 是一个预处理命令,用来引入头文件。 2. iostream :iostream是一个 标准库 ,它与C语言的stdio库不同,它从一开始就是 用多重继承与虚

    2024年01月19日
    浏览(37)
  • ROS Hello World

    ROS 系列学习教程(总目录) 万物始于Hello World,为了体验ROS,使用Hello World介绍ROS的简单使用。 首先需要创建工程,流程为: 创建工作空间目录(即工程根目录,注意此时还不是ROS工作空间,只是一个目录) 初始化工作空间(即把当前目录初始化为一个ROS工作空间) 创建功能

    2024年02月06日
    浏览(40)
  • RabbitMQ ---- Hello World

    本节使用 Java 编写两个程序。发送单个消息的生产者和接收消息并打印出来的消费者。 运行程序 查看管理页面

    2024年02月16日
    浏览(37)
  • Qt: Hello world

    0. Qt 可以构建跨平台的ui项目. 走一波windows下Hello world 1.下载QT creator 当下版本是10了. 下载速度极慢. 需要30G的硬盘空间. 2.安装成功后,开始菜单会产生如下效果: 3. 运行QT creator10.0.1(community), 如下: 4. 点击:创建项目 4.1 无需,理解显示的内容,选第一个就行 4.2 注意路径也需要自己

    2024年02月11日
    浏览(45)
  • C++打印hello world

    首先我们要知道: C++中有一个很重要的东西,那就是面向对象,其中,C++中的打印和输入都是一个对象,而不是像C一样是一个函数,所以打印和输入都有一定的区别 打印是C++最基础的东西,下面我们先放代码,再逐条分析 首先是程序的入口:主函数。他先对于C有一定的区别

    2024年02月02日
    浏览(62)
  • C++输出Hello,World

    在 C 语言中输出 \\\"Hello, World\\\" 可以使用下面的代码: #include stdio.h int main() { printf(\\\"Hello, Worldn\\\"); return 0; } 代码的意思是:首先使用 #include stdio.h 告诉编译器我们要使用输入/输出函数,然后定义一个名为 main 的函数,在函数中使用 printf 函数来输出字符串 \\\"Hello, World\\\",最后使用

    2024年02月07日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包