Angular结构简单介绍
Angular 简单 介绍 结构
2023-09-11 14:14:38 时间
在当前项目目录下,使用Angular-CLI生成一个组件:heroes
ng generate component heroes
主界面(也就是一个主模块+多个单模块,例如我们创建的heroes(单模块也有自己的html\css\ts文件,可以在主页面导入它的视图)):
//类似CSS
app.component.css
//类似HTML
app.component.html
//TypeScript
app.component.ts
//app.component.html <!-- 1.这里和普通的HTML文件差不多,只不过多了模板变量 2.{{value}},双花括号是Angular的插值绑定语法。此插值绑定title在HTML标头标签内呈现组件的属性值。 --> <div class="inCenter"> <h1> Welcome to {{ head }}! </h1> </div> <!-- 显示 HeroesComponent视图 --> <app-heroes></app-heroes>
//app.component.css .inCenter { text-align: center; color: #f00; }
//app.component.ts import { Component } from '@angular/core'; @Component({ // selector:选择器 selector: 'app-root', // 模板地址 templateUrl: './app.component.html', // 样式地址(数组) styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'fcuk'; head = '66s'; }
//app.module.ts /* Angular需要知道应用程序的各个部分如何组合在一起以及应用程序需要哪些其他文件和库。这些信息被称为元数据 一些元数据位于您添加到组件类的装饰器中。其他关键元数据在装饰器中。@Component@NgModule 最重要的装饰器注释顶级AppModule类。@NgModule Angular CLI AppModule在src/app/app.module.ts创建项目时生成了一个类。这是你选择进入的地方FormsModule。 **/ // 1.导入模块 import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; // <-- NgModel 在这里 import { NgModule } from '@angular/core'; // 2.导入组件 import { AppComponent } from './app.component'; import { HeroesComponent } from './heroes/heroes.component'; @NgModule({ /** * AppModule 声明这两个应用程序组件,AppComponent和HeroesComponent。 */ declarations: [ AppComponent, HeroesComponent ], imports: [ BrowserModule, /** * 然后添加FormsModule到元数据的数组中, * 其中包含应用程序需要的外部模块列表。@NgModuleimports */ /** * 每个组件必须在一个 NgModule中声明。 * 你没有声明HeroesComponent。那么,为什么该应用程序工作? * 它的工作原因是Angular CLI HeroesComponent在AppModule它生成该组件时进行了声明。 * 打开src/app/app.module.ts并HeroesComponent在顶部附近找到导入。 */ FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
//hero.ts // 这个是创建的Hero类 export class Hero{ id: number; name: string; }
/heroes/heroes.component.html <p> heroes works{{hero}}! </p> <!-- 显示对象值 --> <!-- 格式与 UppercasePipe,你可以创建你自己的格式化字符串、货币金额、日期等 --> <h2>{{ hero.name | uppercase }} Details</h2> <div><span>id: </span>{{hero.id}}</div> <div><span>name: </span>{{hero.name}}</div> <div> <label>name: <input [(ngModel)]="hero.name" placeholder="name"> </label> </div>
/heroes/heroes.component.css
heroes/heroes.component.ts import { Component, OnInit } from '@angular/core'; // 表单模块 // import { FormsModule } from '@angular/forms'; // 导入组件hero.js import { Hero } from '../hero'; @Component({ //组件的CSS元素选择器 //在CSS元素选择, 'app-heroes'是相匹配的标识父组件模板内此组件的HTML元素的名称 selector: 'app-heroes', //组件模板文件的位置 templateUrl: './heroes.component.html', //组件的私有CSS样式的位置 styleUrls: ['./heroes.component.css'] }) export class HeroesComponent implements OnInit { // Hero对象值 hero: Hero = { id: 1, name: 'Windstorm' } constructor() { } //这ngOnInit是一个生命周期钩子 Angular ngOnInit在创建组件后立即调用。这是放置初始化逻辑的好地方 ngOnInit() { } }
相关文章
- [Angular 8] Keep original DOM structure with ng-container
- [Angular] Expose Angular Component Logic Using State Reducers
- [Angular] Increasing Performance by using Pipe
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [Angular Router] Lazy loading Module with Auxiliary router
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [Angular & Web] Retrieve user data from Session
- [Angular 2] BYPASSING PROVIDERS IN ANGULAR 2
- [Angular2 Router] Build Angular 2 Navigation with routerLink
- [Angular 2] ng-class and Encapsulated Component Styles
- [Angular] Promises, reject(). 4. ngRoute, $routeChangeError event and defer.reject()
- [Angular] In angular world and out angular world
- Angular 项目里 angular.json 文件内容的学习笔记
- 最简单的Angular Route hello world场景都跑不通的一个原因
- Angular Component代码和编译后生成的JavaScript代码
- Angular SSR 应用启动时的一些保护措施
- Angular 服务器端渲染应用的一个错误消息 type ReferenceError - localStorage is not defined
- 如何以可视化方式显示 Angular 应用构建后的 bundle 文件大小
- Angular 项目里 angular.json 文件内容的学习笔记
- Angular NgRx MemoizedSelector的类型定义学习
- 使用Angular reactive form发送HTTP请求的一个简单例子
- Angular应用的angular.json文件字段一览
- 一个简单的Angular search UI实现
- 通过一个最简单的例子,理解Angular rxjs里的Observable对象的pipe方法