第一步:全局安装 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 前端开发环境的更多相关文章

  1. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  2. 快速搭建 Node.js 开发环境以及加速 npm

    如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...

  3. 【转】使用nvm快速搭建 Node.js 开发环境

    原文链接:http://www.cnblogs.com/shuoer/p/7802891.html 快速搭建 Node.js 开发环境 如果你想长期做 node 开发, 或者想快速更新 node 版本 ...

  4. 从零搭建Window前端开发环境

    前言 作为一个小前端,是否因为搭建环境烦恼过,是否因为npm等国外镜像踩坑过,不要怕,接下来跟着我一步步搭建适合自己的开发环境吧!!! node 这个不用说了吧,我们经常和他打交道,无论是 gulp. ...

  5. Linux快速搭建C/C++开发环境

    导读:越来越多的程序员在Linux下进行C/C++的开发.本文以CentOS 7为例,教你快速搭建一个vi + gcc/g++ + Make + valgrind的开发环境. 本文字数:1500,阅读 ...

  6. 使用 Laragon 在 Windows 中快速搭建 Laravel 本地开发环境 (转)

    laravel学院 简介 对于那些使用 Windows 操作系统的同学来说,Homestead 和 LaraDock 虽说支持 Windows 系统,但是对初学者来说,安装配置起来还是有一定复杂度的, ...

  7. 快速搭建一个vue开发环境

    常规的搭建就是从npm到vue到webpack这样一个一个的来,这样一套下来说不上复杂但是也不简单.之前公司的vue后台项目 我还是写的轻车熟路的,因为前端同事已经把架子搭好了,环境配置的丝般顺滑,你 ...

  8. Linux 服务器快速搭建 Java Web 开发环境

    搭建 Java 环境 yum list java* yum install java-1.8.0-openjdk.x86_64 -y java -version mkdir 创建文件夹 mv 修改文件 ...

  9. Windowd系统下Eclipse CDT+MinGW快速搭建C/C++开发环境

    安装MinGW后,最简单的配置:Window -> Preferences -> C/C++ -> Build -> Environment添加Path : $PATH;D:\ ...

随机推荐

  1. L103

    Give everyday the chance to become the most beautiful day of your life.把每天都过成你生命中最美好的一天.competence 能 ...

  2. 一文读懂所有的编码方式(UTF-8、GBK、Unicode、宽字节...)

    编码方式就分两类:ANSI编码.Unicode编码.这两类编码都兼容ASC码. ------------------------------------------------------------ ...

  3. 用JavaScript实现表单按回车自动提交

    JavaScript实现表单form1按回车自动提交代码如下: <script type="text/javascript"> function submitMe() ...

  4. 股神小D

    题目大意: 给定一棵树,每一条边有$L,R$两种权值,求有多少条路径满足$\max(L)\leq\min(R)$. 解法$1-$点分治$+$二维数点 统计树上的路径应首先想到点分治,我们很显然可以搜出 ...

  5. c#迭代遍历带数组的json格式数据

    [1]首先我们先创建一个带数组形式的json格式的数组 1)我们按照结构定义一个类,如下: using System;using System.Collections.Generic;using Sy ...

  6. bzoj 4631: 踩气球 线段树

    题目: Description 六一儿童节到了, SHUXK 被迫陪着M个熊孩子玩一个无聊的游戏:有N个盒子从左到右排成一排,第i个盒子里装着Ai个气球. SHUXK 要进行Q次操作,每次从某一个盒子 ...

  7. BZOJ2809:[APIO2012]dispatching

    浅谈左偏树:https://www.cnblogs.com/AKMer/p/10246635.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php? ...

  8. android开发之数据库存取图片

    Android数据库中存取图片通常使用两种方式,一种是保存图片所在路径,二是将图片以二进制的形式存储(sqlite3支持BLOB数据类型).对于两种方法的使用,好像第二种方法不如第一种方法更受程序员欢 ...

  9. Poj 1742 Coins(多重背包)

    一.Description People in Silverland use coins.They have coins of value A1,A2,A3...An Silverland dolla ...

  10. Ubuntu下安装软件

    在ubuntu当中,安装应用程序有三种方法,分别是:apt-get,dpkg安装deb和make install安装源码包三种. apt-get方法 使用apt-get install来安装应用程序算 ...