快速搭建angular7 前端开发环境
第一步:全局安装 Angular CLI
(1)打开npm(终端)安装angular-cli
第二步:创造工作区和初始应用
(1)运行命令 ng new my-app
第三步:启动开发服务器
(1)cd my-app
(2)ng serve --open
(3)运行成功后app.component.js/app.component.css/app.component.html
第四部分:angular的一些组件
(1)Component NgModule
一个装饰器,用于把某个类标记为 Angular 组件,并为它配置一些元数据,以决定该组件在运行期间该如何处理、实例化和使用。
Input: 一个装饰器,用来把某个类字段标记为输入属性,并且提供配置元数据。 声明一个可供数据绑定的输入属性,在变更检测期间,Angular 会自动更新它。
(2)Angular 的双向数据绑定语法:[(ngModel)]
如果页面绑定了数据 就需要app.module.ts文件注入FormsModule符号
import { FormsModule } from '@angular/forms';
(3)循环数据:*ngFor
例子:<li *ngFor="let hero of heroes">
(4)条件判断命令: *ngIf
例子:<div *ngIf="selectedHero"></div>
(5)事件绑定:(click)
例子:<li *ngFor="let hero of heroes" (click)="onSelect(hero)"></li>
(6)class绑定来切换 css:[class.active](注:.active是用户定义的class类)
例子:<li *ngFor="let hero of heroes"
[class.active]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span>
</li>
(7)属性绑定:用中括号,比如属性值hero [hero]
例子:<app-hero-detail [hero]="selectedHero"></app-hero-detail>
快速搭建angular7 前端开发环境的更多相关文章
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- 快速搭建 Node.js 开发环境以及加速 npm
如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...
- 【转】使用nvm快速搭建 Node.js 开发环境
原文链接:http://www.cnblogs.com/shuoer/p/7802891.html 快速搭建 Node.js 开发环境 如果你想长期做 node 开发, 或者想快速更新 node 版本 ...
- 从零搭建Window前端开发环境
前言 作为一个小前端,是否因为搭建环境烦恼过,是否因为npm等国外镜像踩坑过,不要怕,接下来跟着我一步步搭建适合自己的开发环境吧!!! node 这个不用说了吧,我们经常和他打交道,无论是 gulp. ...
- Linux快速搭建C/C++开发环境
导读:越来越多的程序员在Linux下进行C/C++的开发.本文以CentOS 7为例,教你快速搭建一个vi + gcc/g++ + Make + valgrind的开发环境. 本文字数:1500,阅读 ...
- 使用 Laragon 在 Windows 中快速搭建 Laravel 本地开发环境 (转)
laravel学院 简介 对于那些使用 Windows 操作系统的同学来说,Homestead 和 LaraDock 虽说支持 Windows 系统,但是对初学者来说,安装配置起来还是有一定复杂度的, ...
- 快速搭建一个vue开发环境
常规的搭建就是从npm到vue到webpack这样一个一个的来,这样一套下来说不上复杂但是也不简单.之前公司的vue后台项目 我还是写的轻车熟路的,因为前端同事已经把架子搭好了,环境配置的丝般顺滑,你 ...
- Linux 服务器快速搭建 Java Web 开发环境
搭建 Java 环境 yum list java* yum install java-1.8.0-openjdk.x86_64 -y java -version mkdir 创建文件夹 mv 修改文件 ...
- Windowd系统下Eclipse CDT+MinGW快速搭建C/C++开发环境
安装MinGW后,最简单的配置:Window -> Preferences -> C/C++ -> Build -> Environment添加Path : $PATH;D:\ ...
随机推荐
- (转)C协程实现的效率对比
前段时间实现的C协程依赖栈传递参数,在开启优化时会导致错误,于是实现了一个ucontext的版本,但ucontext的切换效率太差了, 在我的机器上执行4000W次切换需要11秒左右,这达不到我的要求 ...
- 关于MFC消息的总结
一.MFC的消息类型 MFC的消息类型大致可以分为三种: 1.命令消息.由菜单和工具栏或快捷键产生,以WM_COMMAND形式发出(以WM_COMMAND发出的还有很多控件,如Button等,但它们产 ...
- windows中android SDK manager安装更新sdk很慢,或者出现Done loading packages后不动甚至没有任何可用包
出现问题: 1.windows中android SDK manager安装更新sdk很慢,或者出现Done loading packages后不动甚至没有任何可用包 2.Failed to fetch ...
- windows下面的python的MySQLdb环境安装
什么是MySQLdb? MySQLdb 是用于Python链接Mysql数据库的接口,它实现了 Python 数据库 API 规范 V2.0,基于 MySQL C API 上建立的. 如何安装MySQ ...
- VC++6.0注释快捷键的添加使用
在eclipse等编辑工具中都有注释代码的快捷键,但是vc++6.0没有. vc++是以VB为脚本来控制的,在网上找到了一个VB的脚本供大家使用. 工具/原料 VC++6.0 方法/步骤 打开VC ...
- Poj_1002_java解决
一.Description 电话号码的标准格式是七位十进制数,并在第三.第四位数字之间有一个连接符.电话拨号盘提供了从字母到数字的映射,映射关系如下: A, B, 和C 映射到 2 D, E, 和F ...
- 低调的css3属性font-size-adjust
在我们日常的项目中经常会用到不同的字体来达到我们想要的效果,可是某些情况下不同字体的大小在相同的px下显示的大小是不同的 <div id="div1">Text 1&l ...
- 数组排序----Demo
//选择排序,分为简单选择排序.树形选择排序(锦标赛排序).堆排序 此算法为简单选择排序 public static void selectSort(int[] a){ for(int i=0;i&l ...
- 问题:C#时间差;结果:C# 使用TimeSpan计算两个时间差
C# 使用TimeSpan计算两个时间差 可以加两个日期之间任何一个时间单位. private string DateDiff(DateTime DateTime1, DateTime DateTim ...
- numpy.ones(shape, dtype=None, order='C')
Return a new array of given shape and type, filled with ones. Parameters: shape : int or sequence of ...