第一步:全局安装 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. (转)C协程实现的效率对比

    前段时间实现的C协程依赖栈传递参数,在开启优化时会导致错误,于是实现了一个ucontext的版本,但ucontext的切换效率太差了, 在我的机器上执行4000W次切换需要11秒左右,这达不到我的要求 ...

  2. 关于MFC消息的总结

    一.MFC的消息类型 MFC的消息类型大致可以分为三种: 1.命令消息.由菜单和工具栏或快捷键产生,以WM_COMMAND形式发出(以WM_COMMAND发出的还有很多控件,如Button等,但它们产 ...

  3. windows中android SDK manager安装更新sdk很慢,或者出现Done loading packages后不动甚至没有任何可用包

    出现问题: 1.windows中android SDK manager安装更新sdk很慢,或者出现Done loading packages后不动甚至没有任何可用包 2.Failed to fetch ...

  4. windows下面的python的MySQLdb环境安装

    什么是MySQLdb? MySQLdb 是用于Python链接Mysql数据库的接口,它实现了 Python 数据库 API 规范 V2.0,基于 MySQL C API 上建立的. 如何安装MySQ ...

  5. VC++6.0注释快捷键的添加使用

    在eclipse等编辑工具中都有注释代码的快捷键,但是vc++6.0没有. vc++是以VB为脚本来控制的,在网上找到了一个VB的脚本供大家使用.   工具/原料 VC++6.0 方法/步骤 打开VC ...

  6. Poj_1002_java解决

    一.Description 电话号码的标准格式是七位十进制数,并在第三.第四位数字之间有一个连接符.电话拨号盘提供了从字母到数字的映射,映射关系如下: A, B, 和C 映射到 2 D, E, 和F ...

  7. 低调的css3属性font-size-adjust

    在我们日常的项目中经常会用到不同的字体来达到我们想要的效果,可是某些情况下不同字体的大小在相同的px下显示的大小是不同的 <div id="div1">Text 1&l ...

  8. 数组排序----Demo

    //选择排序,分为简单选择排序.树形选择排序(锦标赛排序).堆排序 此算法为简单选择排序 public static void selectSort(int[] a){ for(int i=0;i&l ...

  9. 问题:C#时间差;结果:C# 使用TimeSpan计算两个时间差

    C# 使用TimeSpan计算两个时间差 可以加两个日期之间任何一个时间单位. private string DateDiff(DateTime DateTime1, DateTime DateTim ...

  10. 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 ...