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++ 简单实现MFC ListControl 点击列头排序
说明: SetItemData可以为每一行绑定一个DWORD类型的变量.用GetItemData可以获得这个变量.举个例子,假设CListCtrl中你需要显示某个数据表中的记录,该表有个流水号主键ID ...
- iOS Dev (25) 解决“The executable was signed with invalid entitlements.”问题
2014-01-10 10:34 5240人阅读 评论(1) 收藏 举报 目录(?)[+] iOS Dev (25) 解决“The executable was signed with inv ...
- 吴裕雄 python oracle子查询的用法(3)
import cx_Oracle conn = cx_Oracle.connect("scott/admin@localhost:1521/orcl")cursor = conn. ...
- Winform 学生管理系统增删改查
数据库: create database adonet go use adonet go create table xue ( code ), name ), sex bit, birth datet ...
- asyncio的核心概念与基本架构
https://blog.csdn.net/qq_27825451/article/details/86218230 虽然有部分运行错误,但是还是有参考价值.
- SpringBoot @Async注解失效分析
有时候在使用的过程中@Async注解会失效(原因和@Transactional注解有时候会失效的原因一样). 下面定义一个Service: 两个异步执行的方法test03()和test02()用来模拟 ...
- 申请ssl证书报提示caa提示
申请ssl证书报下面提示caa提示,这和dns有关,换一组dns重新申请 send challenge err[acme error 'urn:acme:error:connection': DNS ...
- java面试题:基础知识
类和对象 Q:讲一下面向对象OOP思想. 面向对象主要是抽象,封装,继承,多态. 多态又分为重载和重写.重载主要是方法参数类型不一样,重写则是方法内容不一样. Q:抽象类和接口有什么区别? 抽象类中可 ...
- spring boot 启动错误:Could not resolve placeholder
在启动整个spring boot项目时,出现错误: Could not resolve placeholder 原因:没有指定好配置文件,因为src/main/resources下有多个配置文件,例如 ...
- Android笔记:Button
示例代码摘自<第一行代码> ButtonDemo.java的代码: public class ButtonDemo extends Activity { @Override protect ...