有关angular4的一些介绍

理论篇

1、目录结构

 

 

package.json配置文件

当运行npm run build 是，会自动找package.json配置文件。

说明

module：组织代码的方式

target：编译目标平台（ES三、ES五、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

在根目录下，是访问网页的主页面

 

2、简单的建立项目

一、实现的效果

 

 

 

二、建立工做目录并建立主要的配置文件

1. package.json 用来标记出本项目所需的 npm 依赖包。
2. tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
3. typings.json 为那些 TypeScript 编译器没法识别的库提供了别的定义文件。

npm init 命令是初始化package.json内容的。

二、安装ng2的相关依赖库，用nmp

1. npm install xxxpackage --save-dev

2. npm install xxxpackage --save

3. npm install xxxpackage -g

 

三、添加typescript库

ng2首选使用ts开发，npm安装ts，提示你们使用全局和局部安装方法，好处是全局使用

npm install typescript -g

npm install -g typescript@2.0.6

npm install typescript --save-dev

 

四、建立应用和组件

mkdir src

cd src

mkdir app

 

五、启动应用

在APP同级目录下穿件文件@main.ts

六、主页面index.html

七、编译运行ng2

添加配置文件tsconfig.json 更好的设置tsc编译所需参数。

{

  "compilerOptions":{

    "target": "es5",

    "experimentalDecorators": true,

    "emitDecoratorMetadata": true

  }

}

 

八、安装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	支持参数: --watch 是否开启监听, 文件改动后自动再次执行构建 --env=dev 指定构建的环境 例如: npm run build:css -- --env=dev

 

# 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项目。