有关angular4的一些介绍
理论篇
一、目录结构
package.json配置文件
当运行npm run build 是，会自动找package.json配置文件。
说明
module：组织代码的方式
target：编译目标平台（ES3、ES5、ES6等）
sourceMap:把ts文件编译成JS文件时，是否生成对应的SourceMap文件
emitDecoratorMetadata：把TypeScript支持为带有装饰器的声明生成元数据
experimentalDecorators：是否启用实验性装饰器特性
typeRoots：指定第三方库的类型定义文件的存放位置，推荐使用node_modules/@types文件夹
src目录是存放项目具体资源的地方。包括app等
app.component.html 网页的配置文件，写的是网页内容
app.module.ts 是定义模块的配置文件
说明
@NgModule：用于定义模块用的装饰器
Declarations：导入模块依赖的组件、指令等
Imports：用来导入当前模块所需的其他模块
BrowserModule模块注册了一些关键的Provider和通用的指令，在imports属性中配置，作为公用模块供全局调用。
Bootstrap：标记出引导组件，在Angular启动应用时，将被标记的组件渲染到模板中。
main.ts 文件的入口文件，串联整个项目
index.html
在根目录下，是访问网页的主页面
二、简单的创建项目
1、实现的效果
2、创建工作目录并创建主要的配置文件
- package.json 用来标记出本项目所需的 npm 依赖包。
- tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
- typings.json 为那些 TypeScript 编译器无法识别的库提供了别的定义文件。
npm init 命令是初始化package.json内容的。
2、安装ng2的相关依赖库，用nmp
1. npm install xxxpackage --save-dev
2. npm install xxxpackage --save
3. npm install xxxpackage -g
3、添加typescript库
ng2首选使用ts开发，npm安装ts，提示大家使用全局和局部安装方法，好处是全局使用
npm install typescript -g
npm install -g typescript@2.0.6
npm install typescript --save-dev
4、创建应用和组件
mkdir src
cd src
mkdir app
5、启动应用
在APP同级目录下穿件文件@main.ts
6、主页面index.html
7、编译运行ng2
添加配置文件tsconfig.json 更好的设置tsc编译所需参数。
{
"compilerOptions":{
"target": "es5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
8、安装typings工具
npm install --save-dev typings
$(npm bin)/typings -v
$(npm bin)/typings search core-js
$(npm bin)/typings install --global --save dt~core-js
完成上述 几个步骤，就可以看到 根目录多了 文件夹 typings , typings.json 。
他们的作用就是为了解决上述提到 tsc 编译 ng2出现了error。
再次执行 $(npm bin)/tsc --rootDir src
--outDir dist 就没有任何问题了！
npm build 和 npm run build 的区别
npm ubild 是npm run build 的简写。
npm run build 可以指定运行scripts中的任何条目
npm的命令集
npm install --save 和npm install --save-dev的区别
npm install --save
- 会把msbuild包安装到node_modules目录中
- 会在package.json的dependencies属性下添加msbuild
- 之后运行npm install命令时，会自动安装msbuild到node_modules目录中
- 之后运行npm install --production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中
npm install --save-dev
- 会把msbuild包安装到node_modules目录中
- 会在package.json的devDependencies属性下添加msbuild
- 之后运行npm install命令时，会自动安装msbuild到node_modules目录中
- 之后运行npm install --production或者注明NODE_ENV变量值为production时，不会自动安装msbuild到node_modules目录中
使用原则:
运行时需要用到的包使用--save，否则使用--save-dev。
构建命令示例
|
命令 |
作用 |
说明 |
|
npm run dev |
开发构建 |
会开启监听, 执行开发环境的构建 |
|
npm run build |
正式构建 |
会先清理构建的结果, 再执行正式环境的构建 |
|
npm run build:css |
构建 CSS |
支持参数:
例如:
|
# these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# and so are these
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng build
npm install -g angular-cli
ng build -prod
git clone https://github.com/angular/angular-cli.git cd angular-cli npm link
npm link与npm install -g非常相似，只是从repo下载软件包，而刚刚克隆的angular-cli/文件夹变成了全局软件包。 对angular-cli/文件夹中的文件所做的任何更改都将立即影响全局angular-cli软件包，从而可以快速测试对cli项目所做的任何更改。
现在你可以通过命令行使用angular-cli了：
ng new foo cd foo npm link angular-cli ng server
npm link angular-cli是需要的，因为默认情况下全局安装的angular-cli只是加载了从npm远程获取的项目中的本地angular-cli 。 npm link angular-cli将全局angular-cli包符号链接到本地angular-cli包。 现在你克隆的angular-cli有三个地方：你克隆的文件夹，npm的文件夹，它存储全局包和刚创建的angular-cli项目。
