angular基础教程：快速开始

2024-04-20 19:01:03

好的工具可以使开发事半功倍。

Angular CLI是一个命令行接口工具，我们可以用它创建项目、添加文件、测试、压缩捆绑（bundling）和部署等。

这一节的主要目标是使用Angular CLI构建并运行一个包含了TypeScript的angular应用程序，在这一节完成之后将对CLI开发有个基本的了解。

配置开发环境

1、nodejs
2、npm
3、Angular CLI

执行全局安装CLI

npm install -g @angular/cli

但是安装前请确保node和npm环境已经准备好，至于node和npm如何安装请自行搜索教程。

创建项目

打开终端命令窗口，输入下面的命令

ng new my-app

启动服务

进入my-app文件夹

cd my-app

启动服务

ng server  --open # 或者使用 ng serever -o

服务启动成功，程序会自动打开浏览器窗口，如果没有可以在浏览器中输入http://localhost:4200/查看，4200是默认端口号。

编辑你的第一个angular组件

项目结构

这是刚刚通过CLI创建的项目，它已经为我们创建了一个组件，在目录src\app\下，这个组件是根组件，被命名为app-root，打开app.component.ts

import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';
}

现在来尝试编辑一点内容，看看会发生什么变化

export class AppComponent {title = 'my first angular application!';
}

将title的内容更新为my first angular application!，保存，然后你会发现终端上有重新编译的信息的输出。这是因为ng server --open的命令会监视文件，所有文件的任何改动都会引起应用的重新编译。
打开http://localhost:4200/查看输出结果

总结

至此，我们的学习angular的第一个“hello world”版本的应用已经完成了。

angular基础教程：快速开始相关推荐

Angular 基础教程（7.0）
课程亮点按照初学者的学习路线规划内容所有代码均采用 Angular 7.0 版本覆盖日常开发中使用频率最高的特性 To B.To C 型界面,移动端 PWA 全面覆盖附赠 3 个附录,对比 5 ...
工业机器人入门z50的含义_工业机器人基础教程——快速入门学习
六轴.水平关节(SCARA).DELTA等不同类型的机器人入门基础教程,学完这些,您将成为一名优秀的机器人应用工程师! 到2020年,工业机器人密度达到每万名员工使用100台以上.我国工业机器人市场将 ...
工业机器人基础教程——快速入门学习
想成为一名优秀的机器人应用工程师,从这里学起,六轴.水平关节(SCARA).DELTA等不同类型的机器人入门基础教程推荐. 1.<机器人学导论> 本书曾作为美国斯坦福大学机器人学导论的教材 ...
Angular基础教程+Demo项目——尽可能全面一些——第二节
一.前言 Angular是一个类似于后端开发模式的前端开发框架,学习起来非常简单,当然需要一定的前端基础,本篇接着第一节继续介绍Angular基础学习过程中所写的Demo_GitHub--学习Ang ...
Angular基础教程
https://www.runoob.com/angularjs/angularjs-tutorial.html 教程文档基本上学完这些,你就能正常的开发项目了,注意是正常开发而不是架构阅读本教程 ...
Angular *NgFor - angular 基础教程
转载自 http://www.ngui.cc/news/show-115.html 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息. 使用 ngFor 指令更新 Mai ...
Angular 事件_Angular $event - angular 基础教程 - Angular 教程网
转载自 http://www.ngui.cc/news/show-113.html 获取鼠标事件在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入 $event 变量,具 ...
Spring Boot 2.x基础教程：快速入门
点击蓝色"程序猿DD"关注我哟来源:http://t./ <Star最多的Spring Boot教程继续更新了> 牛皮吹过了! Git仓库和博客专题页也改版完成! 是 ...
php mvc教程文档,PHP培训教程教你快速打造PHP MVC框架[PHP基础教程]
PHP培训教程教你快速打造PHP MVC框架[PHP基础教程] 简介 MVC框架在现在的开发中相当流行,不论你使用的是JAVA,C#,PHP或者IOS,你肯定都会选择一款框架.虽然不能保证100%的开 ...

最新文章

热门文章