angular2.0学习笔记4.npm常用指令记录及angular语法
以下命令,都需要在命令行窗口中,先切入到项目文件夹目录,再执行
1.npm start
这个命令会在“监听”模式下运行TypeScript编译器,当代码变化时,它会自动重新编译。 同时,该命令还会在浏览器中启动该应用,并且当代码变化时刷新浏览器。
2.ng serve
运行web服务,(同时好像也能达到npm start的功能)
3.ctrl+c
是否终止web服务
4.npm install <Module Name> ( 本地安装模块)
例:
npm install express
//使用 npm 命令安装常用的 Node.js web框架模块 express:
//安装好之后,express 包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require('express') 的方式就好,无需指定第三方包路径。
var express = require('express');
全局安装与本地安装的区别
npm 的包安装分为本地安装(local)、全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如
npm install express # 本地安装
npm install express -g # 全局安装
本地安装
- 1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。
- 2. 可以通过 require() 来引入本地安装的包。
全局安装
- 1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
- 2. 可以直接在命令行里使用。
如果你希望具备两者功能,则需要在两个地方安装它或使用 npm link。
5.npm list -g 查看所有全局安装的模块
6.npm list express 查看某个模块的版本号
7.npm uninstall express 卸载模块
8.npm update express 更新模块
9.npm search express 搜索模块
angular2.0语法
1.[(ngModel)]
用与把变量绑定到输入框中。 它的数据流是双向的:从属性到输入框,并且从输入框回到属性。
例:<input [(ngModel)]="hero.name" placeholder="name">
使用时必须:
(1)在app.module.ts文件头部导入库符号
import {FormsModule} from '@angular/forms';
(2)然后把FormsModule添加到@NgModule元数据的imports数组中,即添加到当前应用正在使用的外部模块列表。
imports: [
BrowserModule,
FormsModule //加入到这里
]
2.*ngFor循环标签
ngFor的*前缀表示<li>及其子元素组成了一个主控模板。例:
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
3.[class.cssname]
根据条件增加或移除css,
例:<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero===selectedHero">选择我</li>
angular2.0学习笔记4.npm常用指令记录及angular语法的更多相关文章
- angular2.0学习笔记1.开发环境搭建 (node.js和npm的安装)
开发环境, 1.安装Node.js®和npm, node 6.9.x 和 npm 3.x.x 以上的版本. 更老的版本可能会出现错误,更新的版本则没问题. 控制台窗口中运行命令 node -v 和 n ...
- angular2.0学习笔记5.关于组件
1.组件文件应在/src/app文件夹下 2.组件文件命名应遵循小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾. 如:HeroDetailComponent类应该放在her ...
- angular2.0学习笔记3.了解angular2.0项目结构
1.我们应用的代码都位于src文件中,包括所有的组件.模板.样式.图片以及我们的应用所需的任何东西都在这个文件来里. 2.src这个文件夹之外的文件都是为构建应用提供支持用的. src文件夹及用途说明 ...
- angular2.0学习笔记7.echarts 地图(type:'map')slice undifined 出错问题
在 项目\node_modules\echarts\lib\chart\map.js文件头部 ... ... require("../coord/geo/geoCreator"); ...
- angular2.0学习笔记6.编程风格指南
1.组件的类名应该是大驼峰形式,并且以Component结尾. 因此英雄详情组件的类名是HeroDetailComponent. 组件的文件名应该是小写中线形式,每个单词之间用中线分隔,并且以.com ...
- angular2.0学习笔记2.创建hello world项目
1.打开终端命令行窗口 2.切换到指定目录 E:\cd myobject 3.创建新项目 ng new angular2-helloworld 4.创建成功后,在angular2-helloworld ...
- DirectX 总结和DirectX 9.0 学习笔记
转自:http://www.cnblogs.com/graphics/archive/2009/11/25/1583682.html DirectX 总结 DDS DirectXDraw Surfac ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- amazeui学习笔记--css(常用组件5)--评论列表Comment
amazeui学习笔记--css(常用组件5)--评论列表Comment 一.总结 1.am-comment:使用am-comment来声明评论对象,这个是放在article里面的,虽然article ...
随机推荐
- c++之enum的好处与 define 的区别
转载自 https://blog.csdn.net/zhh464626057/article/details/41038933 什么时候需要用到enum呢?就是变量的数值在几个范围之间.red,blu ...
- CSS强制换行和禁止换行代码
一.强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作 ...
- python进行爬虫
使用python进行网络爬虫 非结构画数据 转为 结构化数据.需要借助ETL(数据抽取,转换,存储)进行. 非结构化数据蕴含着丰富的价值.需要借助ETL进行转换成结构化数据,才能变成有价值的数据.比如 ...
- div 光标处插入内容
var Manager = { insertHtml: function(html, type) { var lastMemo = document.getElementById("memo ...
- C#单例和Unity单例
单例是一种设计模式 单例:不管在项目中的任何模块,当需要使用某个对象的时候,获取到的始终是同一个对象 在C#中 public class InstanceDemo{ private static In ...
- JAVA声明一个对象数组
Student stu[]=new Student[N]; Student stu={new Student(),~~~}; JAVA类型转换 String转为float String转为INT
- Python图片识别找坐标(appium通过识别图片点击坐标)
***如果只想了解图片相似度识别,直接看第一步即可 ***如果想了解appium根据图片识别点击坐标,需要看第一.二.三步 背景|在做UI测试时,发现iOS自定义的UI控件,appium识别不到. ...
- flash as3.0 截图保存图片
import flash.display.MovieClip; import flash.events.MouseEvent; import flash.filesystem.*; ///////// ...
- 三星笔记本安装系统时报错:image failed to verify with * access denied* press any key to continue.
安装系统从光盘启动报错: 出现黑屏,并且有一个提示框image failed to verify with *access denied*press any key to continue 原因:三星 ...
- SystemVerilog 带输出的task
1.task 的定义,输出定义为数组. /*- genRndPkt(): Generates random packet with the given length.*/ task genRndPkt ...