1、安装cli

npm install -g @angular/cli

2、创建工作区和初始应用项目

ng new my-app

npm ERR! path E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink 'E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js'
npm ERR!  { Error: EPERM: operation not permitted, unlink 'E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js'
npm ERR!   cause:
npm ERR!    { Error: EPERM: operation not permitted, unlink 'E:\aGit-project\myapp\node_modules\.staging\typescript-53141799\lib\tsserverlibrary.js'
npm ERR!      errno: -4048,
npm ERR!      code: 'EPERM',
npm ERR!      syscall: 'unlink',
npm ERR!      path: 'E:\\aGit-project\\myapp\\node_modules\\.staging\\typescript-53141799\\lib\\tsserverlibrary.js' },
npm ERR!   stack: 'Error: EPERM: operation not permitted, unlink \'E:\\aGit-project\\myapp\\node_modules\\.staging\\typescript-53141799\\lib\\tsserverlibrary.js\'',
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'unlink',
npm ERR!   path: 'E:\\aGit-project\\myapp\\node_modules\\.staging\\typescript-53141799\\lib\\tsserverlibrary.js',
npm ERR!   parent: 'myapp' }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator (though this is not recommended).

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\zj\AppData\Roaming\npm-cache\_logs\2019-03-08T14_47_30_775Z-debug.log
Package install failed, see above.

报错

 

重装@anglar/cli ：

 

卸载@anglar/cli 

npm uninstall -g @angular/cli

清除缓存

npm cache clean --force

 重新安装angular

npm install -g @angular/cli

发现还是不行，后来看了一下报错信息，发现在git目录下，所以报没有权限，所以在新的干净目录下重新创建即可

 

运行项目：

ng serve

打开浏览器：

3、目录结构分析

src是开发最常用到的目录，以下是其结构：

app/app.component.{ts,html,css,spec.ts}	 整个应用的根组件
assets/*	                            存放图片文件夹
environments/*	                        定义全局的环境变量，将用户开发和产品环境index.html	                            主要的的html文件， serve的时候会读取此文件，并且载入css,js文件，通常不需要更改此文件main.ts	                                主要的入口文件，在编译运行时，会读取此文件，编译模式包括JIT compiler(开发环境) 和 AOTCompiler(产品环境 –aot)polyfills.ts	                        不同的浏览器对个别API的支持程度不同，需要加入前缀，保证在特定的浏览器能够正常运行，在此文件中，会引入zong.jstest.ts	                                单元测试的入口文件
tsconfig.{app	spec}.json

根目录下的目录结构：

e2e/	                    独立于应用的点对点测试文件夹，包含独立的配置文件
.angular-cli.json	        Angular CLI命令配置文件
.editorconfig	            编辑工具的基础配置文件，保证每个人在自己的编辑工具中能够拥有相同的基础配置，比如字符，缩进等等
karma.conf.js	            karma 单元测试配置文件，应用于ng test命令
package.json	            整个应用程序依赖库的配置文件
protractor.conf.js	        针对于protractor点对点测试的配置文件， 执行命令 ng e2e
tslint.json	                代码检查配置文件，执行ng lint, 团队代码更加规范化
tsconfig.json	            针对于IDE的type script编译配置文件, IDE会根据这个配置文件提供帮助

4、新建第一个组件

新建一个名叫login的组件

ng generate component login

 

修改app.component.html，加入刚才的组件

<div style="text-align:center"><h1>Welcome to {{ title }}!</h1></div><app-login></app-login><router-outlet></router-outlet>

打开浏览器：

5、模块

模块就是提供相对独立功能的功能块，每块聚焦于一个特定业务领域。Angular内建的很多库是以模块形式提供的，比如FormsModule封装了表单处理，HttpModule封装了Http的处理等等。

每个Angular应用至少有一个模块类 —— 根模块，我们将通过引导根模块来启动应用。按照约定，根模块的类名叫做AppModule，被放在 app.module.ts 文件中。我们这个例子中的根模块位于 src\app\app.module.ts

 

 

 

 

参考：

https://angular.cn/guide/quickstart