Angular学习01

最新推荐文章于 2024-09-03 16:55:43 发布

少ci饭8

最新推荐文章于 2024-09-03 16:55:43 发布

阅读量30

点赞数

文章标签： angular.js 学习前端

本文链接：https://blog.csdn.net/weixin_45486759/article/details/132694039

版权

Angular学习

Angular学习01

一、Angular目录

1. Angular目录结构
命令行：
ng new my-app2
在这里插入图片描述

src 应用源代码目录
|- app 包含定义应用逻辑和数据的组件文件
|- app.component.ts 为应用的根组件定义逻辑，名为 AppComponent。当你向应用中添加组件和服务时，与这个根组件相关联的视图就会成为视图树的根。
|- app.component.html 定义与根组件 AppComponent 关联的 HTML 模板。
|- app.component.css 为根组件 AppComponent 定义了基本的 CSS 样式表。
|- app.component.spec.ts 为根组件 AppComponent 定义了一个单元测试。
|- app.module.ts 为应用的根组件定义逻辑，名为 AppComponent。定义了名为 AppModule 的根模块，它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时，它们也必须在这里声明。
|- assets目录资源目录，存储静态资源的比如图片
|- environments 目录环境配置。Angular是支持多环境开发的，我们可以在不同的环境下（开发环境，测试环境，生产环境）共用一套代码，主要用来配置环境的
|- index.html 整个应用的根html，程序启动就是访问这个页面
|- main.ts 整个项目的入口点，Angular通过这个文件来启动项目
|- polyfills.ts 主要是用来导入一些必要库，为了让Angular能正常运行在老版本下
|- styles.css 主要是放一些全局的样式
|- tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
|- tsconfig.spec.json 不用管
|- test.ts 也是自动化测试用的
|- typings.d.ts不用管
.angular-cli.json Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包
比如jquery等
karma.conf.js karma是单元测试的执行器，karma.conf.js是karma的配置文件
package.json
这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
protractor.conf.js 也是一个做自动化测试的配置文件
README.md 说明文件
tslint.json 是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它
2. app.module.ts

2. 组件与模块

组件=装饰器+模板+控制器
组件（ts文件）：将页面上的能够复用的区域（块）封装在一个ts文件中
装饰器（@Component）：告知angular框架如何处理TypeScript类
模板（html文件）：定义组件外观，如何渲染组件（html展示组件外观）
控制器（TypeScript类）：控制器通过数据绑定与模板通讯，模板展示控制器数据，控制器处理模板上发生的事件（与模板通讯、处理模板事件）

import { Component } from '@angular/core';//导入的是angular/core核心包

@Component({//装饰器
  selector: 'app-root',//选择器：可以使用<app-root></app-root>标签引用这个组件
  templateUrl: './app.component.html',//模板：组件的外观、与控制器通讯
  styleUrls: ['./app.component.css']//模板的样式
})
export class AppComponent {//控制器：处理模板事件、与模板通讯
  title = 'auction';//声明数据
}

模块
Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule。一个 NgModule 就是一个容器，用于存放一些内聚的代码块，这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。

根据组件的概念可知，组件才是用户可以看到的，直接操作的对象，模块就是用来组织和归类组件的一块功能。下面是一张系统模块划分图
在这里插入图片描述

app模块：整个应用的根模块，表示整个应用的功能。

订单模块：专注于订单业务和页面集合

用户模块：专注于用户模块的页面集合

重点：一个组件必须且只能属于一个模块

这里面有两层含义：

（1）组件必须属于一个模块，如果这个组件不属于任何模块，则它无法被angular加载并显示在界面上

（2）组件只能属于一个模块，比如上面的订单页面组件，属于订单模块，就不能再把他划给用户模块。
下面来看看ngModule的用法

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }
imports:  导入其他模块，表示该模块依赖其他模块的组件