1.创建应用
-
安装
angular-clinpm install @angular/cli -g -
创建应用
ng new angular-test --minimal --inlineTemplate false--skipGit=true // 不创建初始化 git 仓库 --minimal=true // 创建精简的 angular 项目 不包含测试文件,组件类 组件样式 组件模板被放置在一个文件中 如下图二 --skip-install // 不自动安装依赖 --style=css // 使用什么方式编写样式 --routing=false // false: 不创建路由文件 --inlineTemplate // 让组件模板是一个单独文件 如下图三 --inlineStyle // true: 组件类文件和组件样式文件合并为一个文件 --prefix // 默认前缀 app- --skip-tests // 不创建测试文件（.spec.ts）
完整项目
--minimal
--inlineTemplate
-
运行应用：
ng serve-
--open=true应用构建完成后在浏览器中运行 -
--hmr=true开启热更新 -
hmrWarning=false禁用热更新警告 -
--port更改应用运行端口
-
2. 默认代码解析
2.1 main.ts
// enableProdMode 方法调用后将会开启生产模式
import { enableProdMode } from "@angular/core"
// Angular 应用程序的启动在不同的平台上是不一样的
// 在浏览器中启动时需要用到 platformBrowserDynamic 方法, 该方法返回平台实例对象
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
// 引入根模块 用于启动应用程序
import { AppModule } from "./app/app.module"
// 引入环境变量对象 { production: false }
import { environment } from "./environments/environment"
// 如果当前为生产环境
if (environment.production) {
// 开启生产模式
enableProdMode()
}
// 启动应用程序
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err))
platformBrowserDynamic
2.2 environment.ts
// 在执行 ng build --prod 时, environment.prod.ts 文件会替换 environment.ts 文件
// 该项配置可以在 angular.json 文件中找到, projects -> angular-test -> architect -> configurations -> production -> fileReplacements
export const environment = {
production: false
}
2.3 environment.prod.ts
export const environment = {
production: true
}
2.4 app.module.ts
// BrowserModule 提供了启动和运行浏览器应用所必需的服务
// CommonModule 提供各种服务和指令, 例如 ngIf 和 ngFor, 与平台无关
// BrowserModule 导入了 CommonModule, 又重新导出了 CommonModule, 使其所有指令都可用于导入 BrowserModule 的任何模块
import { BrowserModule } from "@angular/platform-browser"
// NgModule: Angular 模块装饰器
import { NgModule } from "@angular/core"
// 根组件
import { AppComponent } from "./app.component"
// 调用 NgModule 装饰器, 告诉 Angular 当前类表示的是 Angular 模块
@NgModule({
// 声明当前模块拥有哪些组件
declarations: [AppComponent],
// 声明当前模块依赖了哪些其他模块
imports: [BrowserModule],
// 声明服务的作用域, 数组中接收服务类, 表示该服务只能在当前模块的组件中使用
providers: [],
// 可引导组件, Angular 会在引导过程中把它加载到 DOM 中
bootstrap: [AppComponent]
})
export class AppModule {}
2.5 app.component.ts
import { Component } from "@angular/core"
@Component({
// 指定组件的使用方式, 当前为标记形式
// app-home => <app-home></app-home>
// [app-home] => <div app-home></div>
// .app-home => <div class="app-home"></div>
selector: "app-root",
// 关联组件模板文件
// templateUrl:'组件模板文件路径'
// template:`组件模板字符串`
templateUrl: "./app.component.html",
// 关联组件样式文件
// styleUrls : ['组件样式文件路径']
// styles : [`组件样式`]
styleUrls: ["./app.component.css"]
})
export class AppComponent {}
2.6index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularTest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
3. 共享模块
共享模块当中放置的是 Angular 应用中模块级别的需要共享的组件或逻辑。
-
创建共享模块：
ng g m shared -
创建共享组件：
ng g c shared/components/Layout -
在共享模块中导出共享组件
@NgModule({ declarations: [LayoutComponent], exports: [LayoutComponent] }) export class SharedModule {} -
在根模块中导入共享模块
@NgModule({ declarations: [AppComponent], imports: [SharedModule], bootstrap: [AppComponent] }) export class AppModule {} -
在根组件中使用
Layout组件@Component({ selector: "app-root", template: ` <div>App works</div> <app-layout></app-layout> `, styles: [] }) export class AppComponent { }
网友评论