南昌哪个公司做网站好,黄骅的网站,微网站设计与开发是什么,商城网站的管理用户模块一、简介
Angular是三大框架之一#xff0c;是最早开始出现并流行的框架。它是使用HTML、CSS、TypeScript编写的一个重量级框架#xff0c;为大型应用开发而设计。使用Angular开发出来的客户端应用是高度模块化的。Angular提供了cli工具#xff0c;组件和模块都可以使用cli…一、简介
Angular是三大框架之一是最早开始出现并流行的框架。它是使用HTML、CSS、TypeScript编写的一个重量级框架为大型应用开发而设计。使用Angular开发出来的客户端应用是高度模块化的。Angular提供了cli工具组件和模块都可以使用cli工具提供的命令行来创建。Angular对于状态管理是相当到位的可以轻松实现组件之间的数据共享。
二、Angular架构
一模块
Angular应用是由一个个模块组成的。这里的模块就是ngModel是Angular中组织代码结构的一种方式。一个Angular应用至少有一个ngModel称之为根模块。Angular应用启动过程中会使用根模块。在Angular中,ESModel和ngModel是同时使用的。ESModel是以文件为单位的而一个ngModel可以由多个文件组成。ngModel是由NgModel装饰的类。
二组件
组件是用来描述用户界面包括三部分组件类界面逻辑、组件模版HTML、组件样式样式css less scss。 在Angular中至少有一个根组件用于项目的启动。组件类是用Component装饰器装饰的类。组件是必须属于一个ngModel的ngModel为组件提供的编译时的上下文环境。同一个组件不能属于两个模块。其他模块想使用该组件就必须引入当前模块。
三服务
服务用来放置多个组件之间可以共享的数据或者逻辑。服务用于解耦组件类当中的代码。服务是用Injectable装饰器装饰的类。 Angular中的服务被设计为单例模式这也是实现组件之间共享数据的基础。 服务是一个类使用服务类时按照之前的逻辑是要使用new Service()创建一个类的实例对象来使用类的但是服务与组件是高度分离的服务的参数可能会有所修改所以在使用服务类的时候不能用new关键字来创建服务类实例。 其实Angular内置的依赖注入系统会自动帮我们创建服务的实例对象。 在组件中使用服务只需要在constructor中传递形参并且通过类型告诉Angular你需要引入什么服务。
import { AppService } from ./AppServiceexport class AppComponent {constructor (private appService: AppService) {}
}private的含义
appService作为当前组件的一个属性来使用appService只能在组件类中使用不能在组件模版中使用。
三、使用AngularCLI创建Angular项目
点击前往AngularCLI官网
一创建
安装命令cnpm i angular/cli创建项目ng new angular-base --minimal --inline-template falseng new 的后缀列表
后缀缩写含义数据类型默认值–skip-git跳过初始化git仓库booleanfalse–minimal创建一个不带单元测试的精简项目booleanfalse–skip-install跳过模块安装环节booleanfalse–inline-template-t在minimal状态下html和ts文件是在一个文件里的这个指令可以让html文件从ts文件抽离出来boolean–inline-style-s将样式文件从类文件中抽离出来boolean–prefix-p修改angular-cli创建的组件的前缀stringapp
二构建项目
在初始化项目之后package.json中为我们初始化好了运行项目的命令也就是ng serve ng serve有几个后缀名
后缀含义–open应用构建完毕后在浏览器打开–hmr开启热更新–oprt更改应用运行端口
三构建项目时的初始化文件解析
main.ts
// Angular应用程序的启动在不同平台上是不一样的
// 在浏览器中启动需要引入platformBrowserDynamic该方法返回平台实例对象
import { platformBrowserDynamic } from angular/platform-browser-dynamic;
// 引入根模块 用于启动应用程序
import { AppModule } from ./app/app.module;// 启动应用程序
platformBrowserDynamic().bootstrapModule(AppModule).catch(err console.error(err));
app/app.module.ts
// ngModule是Angular的模块装饰器
import { NgModule } from angular/core;
// BrowserModule是浏览器解析的模块
// CommonModule提供各种服务和指令比如NgIf、NgFor等,它是一个通用模块可以在任何平台上使用
// BrowserModule导入了CommonModule又重新导出了CommonModule所以在浏览器中使用CommonModule时只需要导入BrowserModule
import { BrowserModule } from angular/platform-browser;
// 引入根组件
import { AppComponent } from ./app.component;// 使用ngModule装饰器来定义一个模块
// ngModule装饰器接受一个元数据对象
NgModule({// 声明当前模块拥有哪些组件declarations: [AppComponent],// 声明当前模块依赖哪些模块imports: [BrowserModule],// 声明当前模块拥有哪些服务这些服务只能在当前组件中使用providers: [],// 可引导组件Angular会在引导过程中把它加载到DOM中bootstrap: [AppComponent]
})export class AppModule { }
app/app.component.ts
import { Component } from angular/core;Component({// 指定组件的使用方法// app-root app-root/app-root// [app-root] div app-root/div// .app-root div classapp-root/divselector: app-root,// 当前组件对应模版// tempalte/templateUrltemplateUrl: ./app.component.html,// 组件样式文件// styles/styleUrlsstyleUrls: [./app.component.css]
})
export class AppComponent {title angular-base;
}4.index.html
!doctype html
html langen
headmeta charsetutf-8titleAngularBase/titlebase href/meta nameviewport contentwidthdevice-width, initial-scale1link relicon typeimage/x-icon hreffavicon.ico
/head
body!-- 通过标记的形式调用了app-root--!--启动模块下边的启动组件的名字--app-root/app-root
/body
/html四、共享模块
共享模块是Angular应用中模块级别的需要共享的组件或逻辑。
创建共享模块 ng g m shared g-generate m-module 创建共享模块的组件 ng g c shared/components/Layout c-component 加上路径的好处就是在模块中会自动引入组件。 导出共享文件在模块中必须把共享组件导出这样依赖该模块的模块才能使用共享组件 在根组件中使用共享模块 在app.module.ts中引入模块并且声明模块 import { SharedModule } from ./shared/shared.module;
//--------------------------------------------------------------
// ngModule内
imports: [BrowserModule, SharedModule],在app.component.html中使用标记形式使用app-layout divapp-root/div
app-layout/app-layout
