快速搭建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:\ ...
随机推荐
- L103
Give everyday the chance to become the most beautiful day of your life.把每天都过成你生命中最美好的一天.competence 能 ...
- 一文读懂所有的编码方式(UTF-8、GBK、Unicode、宽字节...)
编码方式就分两类:ANSI编码.Unicode编码.这两类编码都兼容ASC码. ------------------------------------------------------------ ...
- 用JavaScript实现表单按回车自动提交
JavaScript实现表单form1按回车自动提交代码如下: <script type="text/javascript"> function submitMe() ...
- 股神小D
题目大意: 给定一棵树,每一条边有$L,R$两种权值,求有多少条路径满足$\max(L)\leq\min(R)$. 解法$1-$点分治$+$二维数点 统计树上的路径应首先想到点分治,我们很显然可以搜出 ...
- c#迭代遍历带数组的json格式数据
[1]首先我们先创建一个带数组形式的json格式的数组 1)我们按照结构定义一个类,如下: using System;using System.Collections.Generic;using Sy ...
- bzoj 4631: 踩气球 线段树
题目: Description 六一儿童节到了, SHUXK 被迫陪着M个熊孩子玩一个无聊的游戏:有N个盒子从左到右排成一排,第i个盒子里装着Ai个气球. SHUXK 要进行Q次操作,每次从某一个盒子 ...
- BZOJ2809:[APIO2012]dispatching
浅谈左偏树:https://www.cnblogs.com/AKMer/p/10246635.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php? ...
- android开发之数据库存取图片
Android数据库中存取图片通常使用两种方式,一种是保存图片所在路径,二是将图片以二进制的形式存储(sqlite3支持BLOB数据类型).对于两种方法的使用,好像第二种方法不如第一种方法更受程序员欢 ...
- Poj 1742 Coins(多重背包)
一.Description People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dolla ...
- Ubuntu下安装软件
在ubuntu当中,安装应用程序有三种方法,分别是:apt-get,dpkg安装deb和make install安装源码包三种. apt-get方法 使用apt-get install来安装应用程序算 ...