First Angular app lesson 1 - Hello world

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

Before you start

This lesson starts from a pre-built app that will serve as a baseline for the application you'll be building in this tutorial. We've provided starter code so you can:

  • Start with the code example for the beginning of this lesson. Choose from the live example / download example to:
    • Use the live example in StackBlitz, where the StackBlitz interface is your IDE.
    • Use the download example and unzip it into a directory named: first-app. Open that directory in your IDE.

If you haven't reviewed the introduction, visit the tutorial overview page to make sure you have everything you need to complete this lesson.

If you have any trouble during this lesson, you can review the completed code for this lesson, in the live example / download example for this lesson.

After you finish

  • The updated app you have after this lesson confirms that you and your IDE are ready to begin creating an Angular app.

Lesson steps

Perform these steps on the app code in your chosen IDE (locally or using the StackBlitz).

Step 1 - Test the default app

In this step, after you download the default starting app, you build the default Angular app. This confirms that your development environment has what you need to continue the tutorial.

In the Terminal pane of your IDE:

  1. In your project directory, navigate to the first-app directory.

  2. Run this command to install the dependencies needed to run the app.

    content_copynpm install
  3. Run this command to build and serve the default app.

    content_copyng serve

    The app should build without errors.

  4. In a web browser on your development computer, open http://localhost:4200.

  5. Confirm that the default web site appears in the browser.

  6. You can leave ng serve running for as you complete the next steps.

Step 2 - Review the files in the project

In this step, you get to know the files that make up a default Angular app.

In the Explorer pane of your IDE:

  1. In your project directory, navigate to the first-app directory.

  2. Open the src directory to see these files.

    1. In the file explorer, find the Angular app files (/src).

      1. index.html is the app's top level HTML template.
      2. style.css is the app's top level style sheet.
      3. main.ts is where the app start running.
      4. favicon.ico is the app's icon, just as you would find in web site.
    2. In the file explorer, find the Angular app's component files (/app).

      1. app.component.ts is the source file that describes the app-root component. This is the top-level Angular component in the app. A component is the basic building block of an Angular application. The component description includes the component's code, HTML template, and styles, which can be described in this file, or in separate files.

        In this app, the styles are in a separate file while the component's code and HTML template are in this file.

      2. app.component.css is the style sheet for this component.

      3. New components are added to this directory.

    3. In the file explorer, find the image directory (/assets) contains images used by the app.

    4. In the file explorer, find the support files are files and directories that an Angular app needs to build and run, but they are not files that you normally interact with.

      1. .angular has files required to build the Angular app.
      2. .e2e has files used to test the app.
      3. .node_modules has the node.js packages that the app uses.
      4. angular.json describes the Angular app to the app building tools.
      5. package.json is used by npm (the node package manager) to run the finished app.
      6. tsconfig.* are the files that describe the app's configuration to the TypeScript compiler.

After you have reviewed the files that make up an Angular app project, continue to the next step.

Step 3 - Create Hello World

In this step, you update the Angular project files to change the displayed content.

In your IDE:

  1. Open first-app/src/index.html.

  2. In index.html, replace the <title> element with this code to update the title of the app.

    Replace in src/index.html

    content_copy<title>Homes</title>

    Then, save the changes you just made to index.html.

  3. Next, open  first-app/src/app/app.component.ts.

  4. In app.component.ts, in the @Component definition, replace the template line with this code to change the text in the app component.

    Replace in src/app/app.component.ts

    content_copytemplate: `<h1>Hello world!</h1>`,
  5. In app.component.ts, in the AppComponent class definition, replace the title line with this code to change the component title.

    Replace in src/app/app.component.ts

    content_copytitle = 'homes';

    Then, save the changes you made to app.component.ts.

  6. If you stopped the ng serve command from step 1, in the Terminal window of your IDE, run ng serveagain.

  7. Open your browser and navigate to localhost:4200 and confirm that the app builds without error and displays Hello world in the title and body of your app:

Angular文章来源地址https://www.toymoban.com/news/detail-511151.html

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

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

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

相关文章

  • makefile出现报错commands commence before first target. stop

    报错:commands commence before first target. stop 一般makefile出现此错误,一定要检查是否有 多余的空格 ,特别是末尾的的位置。

    2024年02月05日
    浏览(30)
  • Angular(一) Creating my first web page using Angular

            Angular is a popular open-source framework for building web applications. Here are some basic concepts and knowledge about Angular: 1. TypeScript : Angular is built with TypeScript, a superset of JavaScript that adds static typing and other features to enhance development. 2. Components : Angular applications are built using components, which

    2024年02月08日
    浏览(36)
  • 【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)
  • Dart 入门Hello world

    1、下载Dart sdk IntelliJ Android Studio | Dart 2、安装Dart 插件 3、安装后重启IDEA,创建Dart项目   4、创建dart文件 5、编写函数:    6、运行:   官网学习:Dart 语言开发文档 | Dart

    2024年02月12日
    浏览(54)
  • java 输出hello world

    在 Java 中,可以使用 System.out.println 来输出 \\\"hello world\\\"。 例如: 在这段代码中, System.out.println 会将字符串 \\\"hello world\\\" 输出到控制台。 注意: 在 Java 中,类名的首字母必须大写。 main 方法是程序的入口点,必须要有这个方法才能运行程序。 `

    2024年02月10日
    浏览(37)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包