angular第一天学习

内容：flux、Angular框架入门 一、flux 1.介绍 flux和react都是facebook推出的产品 它的主要作用是在大型的react项目中进行状态的管理。 2.特性 保持数据、事件的单向流动 保持数据的可预测变化 保证项目的状态管理 提高项目的可维护性 3.工作流程 [图片上传失败...(image-f6a244-1583235911142)] ①用户访问view ②用户通过view发起action ③派发器dispatcher收到action，要求store进行数据的变化 ④store进行数据更新，通知view更新页面 ⑤view收到通知后，触发事件进行页面渲染 4.基本使用 (1)安装 npm install flux --save (2)创建仓库 在src目录下创建一个store文件夹，然后在store目录下创建一个index.js文件 /src/store/index.js import { Dispatcher } from 'flux'//引入派发器 import { EventEmmiter } from 'events'//引入事件监听器 class State extends EventEmmiter { name:'flux name',age:18 } var state = new State(); var dispatcher = new Dispathcer(); //定义派发器具体的任务 dispatcher.register(action=>{ switch(action.type){ case 'changeName': state.name = action.params; break; case 'changeAge': state.age = action.params; break; } state.emit('change');//触发一个change事件，告知使用仓库数据的组件（数据已发生变化） console.log('派发器执行了') console.log(state) }) export default { state,dispatcher } (3)在页面组件中使用 import React, { Component } from 'react' //引入仓库 import Store from '../store' export default class First extends Component { change(){ //通过派发器派发任务 Store.dispatcher.dispatch({ type:'changeName', params:'first name' }) } componentDidMount(){ //当前组件挂载完成后，监听change事件 //一旦仓库中触发change事件，则进行页面重新渲染 Store.state.on('change',()=>{ this.setState({}) }) } render() { console.log(Store) return ( ) } } 二、Angular框架 1.简介 ​ Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用。 ​ AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。 ​ 2009年开始开发 ​ 2010年发布初始版本 AngularJS 1 Javascript ​ 2016年5月份 发布2.0 Typescript 微软 ​ 2017年3月份 发布4.0 ​ 2017年11月份 发布5.0 ​ 2018年5月份 发布6.0 ​ 2018年10月份 发布7.0 ​ 2019年5月份 发布8.0 ​ 2019年11月份 发布9.0 2.官网 https://angular.cn/ 前提条件： 3.脚手架 node.js环境，并且版本在10.9.0以上 (1)安装 npm install @angular/cli -g Would you like to share anonymous usage data with the Angular Team at Google under Google’s Privacy Policy at https://policies.google.com/privacy? For more details and how to change this setting, see http://angular.io/analytics. No (2)初始化项目 进入指定目录，然后执行命令初始化项目 ng new 项目名称 Would you like to add Angular routing? No 是否安装路由（暂时不安装） ? Which stylesheet format would you like to use? CSS 选择项目样式预处理器 (3)目录结构 myproject 项目名称 ​ e2e 端对端的测试目录 用于做自动化测试 ​ node_modules 第三方依赖包 ​ src 应用源代码目录（主战场） ​ app 包含应用的组件和模块目录 ​ assets 资源目录 ​ environments 环境配置目录（开发环境、测试环境、生产环境） ​ favicon icon图标 ​ index.html 首页 ​ main.ts 整个项目的入口，angular通过它来启动项目 ​ polyfills.ts 用来导入一些必要的库文件，为了让angular能够运行在老版本下 ​ styles.css 全局样式 ​ test.ts 自动化测试 ​ .editorconfig 配置文件 ​ .gitignore git忽略提交的配置文件 ​ angular.json angular命令行工具的配置文件 ​ browserlist 兼容浏览器列表配置文件 ​ karma.conf.js 单元测试执行器的配置文件 ​ package.json 第三方依赖包配置文件 ​ tsconfig.app.json typecript配置文件 ​ tslint.json 用来定义typescript代码质量检查的规则 (4)启动项目 命令行，进入项目根目录，执行如下命令 npm start 或者 ng serve (5)脚手架项目运行流程 /src/index.html > /src/main.ts > /src/app/app.module.ts > /src/app/app.component.* angular中组件的文件类型构成： .css 组件的样式表 .html 组件的页面结构 .ts 组件的业务逻辑 4.基本使用 (1)组件创建 在项目根目录下执行如下命令： ng generate component [组件目录/]组件名称 可以简写成 ng g c [组件目录/]组件名称 (2)常用指令 ①渲染变量 在组件的ts文件中定义变量 在组件的html文件中可以通过{{ 变量名 }} {{ 单行js语法都可以执行 }} ②事件 在组件的ts文件中定义好函数 在组件的html文件中，可以给标签元素绑定相应的事件 按钮 ③样式 style： 在ts文件中定义一个对象类型的变量 styleA = { 'color':'red', 'fontSize':'30px' } 在html文件中使用ngStyle来设置样式

心中充满阳光

class： 在css文件中定义好样式 在html文件中使用样式

才能照亮别人

④条件判断

欢迎：{{ username }}

请登录

ng-container只是用来做判断/循环用的标签，它不会页面结构中存在。 ⑤循环 *ngFor

• 编号：{{ item.id }}

  姓名：{{ item.name }}

1. {{ i+1 }} --- {{ item.name }}

本文章由javascript技术分享原创和收集