推荐大家使用 VS code 工具编写代码,工具在官网有.deb的安装包,大家可以去下载安装。然后使用VS code编写前段代码。
1.查看官网指引:https://angular.io/guide/setup-local
To use the Angular framework, you should be familiar with the following:
2.安装Node.js
Angular requires a current, active LTS, or maintenance LTS version of Node.js
. See the engines
key for the specific version requirements in our package.json.
To check your version, run node -v
in a terminal/console window.
To get Node.js
, go to nodejs.org
sudo apt-get install nodejs npm
node -v
npm -v
3.安装AngularJS CLI脚手架
npm install -g @angular/cli
4.创建工作空间并初始化项目
ng new my-app
5.启动项目
cd my-app
ng serve --open
6.项目目录结构介绍
All projects within a workspace share a CLI configuration context. The top level of the workspace contains workspace-wide configuration files, configuration files for the root-level application, and subfolders for the root-level application source and test files.
WORKSPACE CONFIG FILES | PURPOSE |
---|---|
.editorconfig |
Configuration for code editors. See EditorConfig. 代码编辑器的配置。 |
.gitignore |
Specifies intentionally untracked files that Git should ignore. 明确Git忽略提交的文件类型。 |
README.md |
Introductory documentation for the root app. 应用介绍文档 |
angular.json |
CLI configuration defaults for all projects in the workspace, including configuration options for build, serve, and test tools that the CLI uses, such as TSLint, Karma, and Protractor. For details, see Angular Workspace Configuration. 工作区间内CLI的全局配置 |
package.json |
Configures npm package dependencies that are available to all projects in the workspace. See npm documentation for the specific format and contents of this file. npm包依赖管理 |
package-lock.json |
Provides version information for all packages installed into npm包依赖版本号管理 |
src/ |
Source files for the root-level application project. 源文件目录 |
node_modules/ |
Provides npm packages to the entire workspace. Workspace-wide npm依赖包存储位置 |
tsconfig.json |
Default TypeScript configuration for projects in the workspace. 默认TS全局配置 |
tslint.json |
Default TSLint configuration for projects in the workspace. 默认TSLint全局配置 |
Files at the top level of src/
support testing and running your application. Subfolders contain the application source and application-specific configuration.
APP SUPPORT FILES | PURPOSE |
---|---|
app/ |
Contains the component files in which your application logic and data are defined. See details below. 包含逻辑定义和数据申明的组建文件 |
assets/ |
Contains image and other asset files to be copied as-is when you build your application. 包含应用需要的图片和其他资源文件 |
environments/ |
Contains build configuration options for particular target environments. By default there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations. 开发和生产环境分离和切换配置 |
favicon.ico |
An icon to use for this application in the bookmark bar. 网页图标 |
index.html |
The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any 主页面HTML |
main.ts |
The main entry point for your application. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the 应用主入口 |
polyfills.ts |
Provides polyfill scripts for browser support. 提供polyfill 脚本给浏览器 |
styles.sass |
Lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project. CSS文件列 |
test.ts |
The main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file. 测试主入口 |
Inside the src/
folder, the app/
folder contains your project's logic and data. Angular components, templates, and styles go here.
SRC/APP/ FILES |
PURPOSE |
---|---|
app/app.component.ts |
Defines the logic for the app's root component, named 为根页面定义逻辑 |
app/app.component.html |
Defines the HTML template associated with the root 定义HTML模板 |
app/app.component.css |
Defines the base CSS stylesheet for the root 定义CSS样式 |
app/app.component.spec.ts |
Defines a unit test for the root 定义单元测试 |
app/app.module.ts |
Defines the root module, named 定义根模块,只在AppComponent定义初始化,所有其他组件页面的声明都必须写在这个文件中。 |
The application-specific configuration files for the root application reside at the workspace root level. For a multi-project workspace, project-specific configuration files are in the project root, under projects/project-name/
.
Project-specific TypeScript configuration files inherit from the workspace-wide tsconfig.json
, and project-specific TSLint configuration files inherit from the workspace-wide tslint.json
.
APPLICATION-SPECIFIC CONFIG FILES | PURPOSE |
---|---|
browserslist |
Configures sharing of target browsers and Node.js versions among various front-end tools. See Browserslist on GitHub for more information. |
karma.conf.js |
Application-specific Karma configuration. |
tsconfig.app.json |
Application-specific TypeScript configuration, including TypeScript and Angular template compiler options. See TypeScript Configuration and Angular Compiler Options. |
tsconfig.spec.json |
TypeScript configuration for the application tests. See TypeScript Configuration. |
tslint.json |
Application-specific TSLint configuration. |
An e2e/
folder at the top level contains source files for a set of end-to-end tests that correspond to the root-level application, along with test-specific configuration files.
For a multi-project workspace, application-specific end-to-end tests are in the project root, under projects/project-name/e2e/
.
content_copye2e/
src/ (end-to-end tests for my-app)
app.e2e-spec.ts
app.po.ts
protractor.conf.js (test-tool config)
tsconfig.json (TypeScript config inherits from workspace)