angular5学习系列之八大主要构造块
angular5学习系列之八大主要构造块
学习视频链接：https://www.bilibili.com/video/BV1i7411F7tb?p=5
一、angular.js简介
angularjs是一套用于构建用户界面的js框架，主要被用来开发和维护单页面应用
二、特性
MVVM 组件化 模块化 指令 服务 依赖注入 ts
三、建议
官方文档 写demo测试 写小项目练手
安装python c++编译工具npm install 。。。。
四、目录介绍
e2e 前端测试文件
node_modules npm依赖
src 存放业务代码
.angular-cli.json 脚手架工具配置文件
.editorconfig 针对编辑器的代码风格约束
.gitignore 仓库忽略配置项
karma.conf.js 测试配置文件呢（给karma用的）
package.json 项目包说明文件
protractor.conf.js 端到端测试配置文件
README.md项目说明文件
tsconfig.json ts配置文件
tslint.json ts代码风格校验工具配置文件（类似于eslint）
npm scripts 介绍"scripts": {"ng": "ng", 运行查看脚手架工具使用帮助"start": "ng serve",运行开发模式"build": "ng build",运行项目打包构建（用于发布到生成环境）"test": "ng test",运行karma单元测试"lint": "ng lint",运行ts代码校验"e2e": "ng e2e"运行protractor端到端测试},"root": "",源码根目录"sourceRoot": "src","index": "src/index.html",出口"main": "src/main.ts",加载根模块，启动执行模块系统，整个模块化系统启动的入口
五、组件
1.作用：（1）.分治 避免混在一起（2）.复用
在angular中，组件就是一个类，可认为是构造函数得另一种写法
@Component 组件的装饰器，修饰组件的一些特性
selector: ‘app-root’, 定义组件渲染的标签名称就是组件名
templateUrl: ‘./app.component.html’,指定组件模板文件
styleUrls: [’./app.component.css’]一个数组，存放组件相关的样式文件
import {Component, OnInit, ViewContainerRef} from ‘@angular/core’;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',styleUrls: ['./app.component.css']})
export class AppComponent{
title=””
｝
2.创建组件：ng generate component +name
六．模块：
就是app.modules.ts
@NgModule({ 组装模块资源：组件、指令、服务等declarations: [AppComponent,FooComponent],imports: [ 依赖模块BrowserModule,AppRoutingModule],providers: [],bootstrap: [AppComponent] 指定启动的组件
})
export class AppModule { }
七．模板：
组件是用来封装对视图的操作的，视图就是常规的HTML模板；
八．元数据
描述组件（类）的信息，告诉angular如何处理组件类
@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = '欢迎来到angular的世界';
}
九．数据绑定
和vue一样，MVVM思想（数据驱动视图），通过使用｛｛｝｝语法将数据绑定到DOM元素，当数据改变的时候会影响视图的更新。
十．指令
和vue一样，angular扩展了HTML语法，增加了一些特殊的属性指令，例如：
*ngFor 循环指令
*ngIf 条件判断指令
[{ngModel}]表单控件双向绑定指令
十一．Services（服务）
服务是一个广义范畴，包括：值、函数、应用所需的功能。
服务就是针对某个单一或系统功能的封装，最典型的就是http服务。任何东西几乎都可以是一个服务，典型的服务是一个类，具有专注的、明确的用途。说白了就是重用！
十二．依赖注入
提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。angular使用依赖注入来提供新组件以及组件所需的服务。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！