Angular学习笔记(2019-12-26更新)

阅读之前需要具有TypeScript基础知识TypeScript基础总结 如果您继续阅读 我将默认为您已具有相关基础知识

# 搭建环境

安装nodejs

使用npm命令安装angular
npm install –g @angular/cli
查看安装结果
ng v(查看版本号 是否安装成功)

安装 TypeScript

(因为angular基于ts开发需要ts做编译)
npm install -g typescript
tsc -v (查看版本号 是否安装成功)
ts基础自己看去 等有空写一篇基础总结

新建angular项目

ng new 项目名
等着吧 网络慢死了

运行项目

ng serve 端口默认是:4200

项目目录解释

 方法名称 说明
e2e 端到端的测试目录,用来做自动测试的
node_modules 第三方依赖包的存放目录
src 存放源代码文件,我们的开发过程主要在此目录操作
.editorconfig.json 编辑器配置文件
.gitignore git的配置文件
angular.json angular的配置文件
browserslist 浏览器列表
karma.conf.js karma单元测试配置文件
package.json npm的配置文件
tsconfig.json TypeScript编译器的配置文件
tslint.json 配置TypeScript代码质量检查的规则

src目录是项目的核心目录

 方法名称 说明
app App目录包含应用程序的组件和模块,在开发中所有的编码都在该目录
assets Assets目录用于存放静态资源文件,比如:视频 、图片、cssjs
environments 主要用于环境配置
index.html 整个网站的默认页面,
main.ts 整个项目的入口点,Angular通过此文件启动项目
polyfills.ts 用来导入一些必要的库,使其能够在老版本下运行
styles.css 全局样式文件
test.ts 单元测试的入口文件

模块

ps:

每个应用中至少包含一个模块,即根模块。

创建项目时自动创建根模块(app.module.ts)

创建项目时自动创建路由模块(app-routing.module.ts)

Angular模块是带有@NgModule(装饰器)

组件

新建组件

ng g component 模块名

创建组件之前,要停止Angular项目的运行:快捷键:ctrl+cy

一个组件包含:1. html文件:页面元素(比如:div

                          2.  ts文件:定义ts代码

                          3.  css文件:组件的样式代码

                          4.  spec.ts文件:测试文件

引用组件

<app-组件名></app- 组件名>

变量声明

声明变量
变量名:空格 类型;
直接初始化变量(不需要定义类型 舒服!)
aa空格=空格1;
aa空格=空格true;
aa空格=空格‘我是谁?’;

添加bootstrap

bootstrap包复制到assets文件夹

在默认页面index.html中,导入外部Bootstrap,所有组件都生效(一次引入全局可用(niupi))

<link rel="stylesheet" href="./assets/bootstrap-3.3.7-dist/css/bootstrap.min.css">

变量

变量名:[空格]类型 冒号后要有空格

 aa: boolean;

aa = ‘hello’ //直接赋值! 不需要定义类型 niubi 字符串推荐使用单引号

数据绑定(直接取值 吹爆!)

数据源>>视图

1.插值表达式绑定

***.component.ts中

 aa = false;

***.component.html绑定

<p>{{变量名}}</p> {{aa}}

2.属性绑定(将ts的数据绑定到html标签的属性上)

***.component.ts

bb  =  './assets/img/logo.png';

***.component.html绑定

<img [src]="bb" />   < --   绑定属性 -->
<input  type=“text”  [value]="bb" /> <--   绑定属性 -->

3.style样式绑定

***.component.ts

cc  =  'red';

***.component.html绑定

 <input type="text" [style.background-color]="cc" />

4. class样式类绑定

在***.component.css中

  .dd {   background-color: skyblue;   color:orange;  } 

在***.component.ts中

change = true;

在***.component.html绑定

 <input type="text" [class.dd]= " change" />

视图>>数据源

//通常用于绑定事件,标签事件绑定ts中的方法

***.component.ts文件定义方法

  cc () {  
        alert(“绑定事件”);      } 

在***.component.html文件中,给按钮的单击事件绑定cc方法

 //(事件名称)=“方法名()”
 <input type=“button” value=“点我试试”  (click)=“cc()”> 

管道操作符

管道是一个接收输入值并返回转换结果的函数,具有多种转换形式,比如:百分数转换、数字转为金额、日期格式等。

***.component.ts文件定义日期

 per = 0.2;
 today =  Date.now();
 salary = 200; 

***.component.html在使用管道操作符

 //{{变量名 | 管道操作符名 }}
 {{per |percent}}  // 百分比
 {{ today | date: ‘yyyy-MM-dd hh:mm:ss’}} // date:表示日期
 {{salary | currency: ‘CNY’:‘symbol-narrow’}} //curreny:表示货币
 //CNY:表示人民币 
 //symbol-narrow:表示窄符号,去掉CN 

安全导航操作符

安全导航操作符的主要作用是用来保护出现在属性路径中的nullundefined,当表达式遇到空值时跳过,后面的代码可以正常执行

***.component.ts

hh = 20;

在***.component.html文件中获取不存在的对象的属性

 <!-- {{p.name}},抛出异常,整个页面停止执行,页面不显示  -- >
 {{p?.name}}
 //程序不会中断,下面代码可以正常执行
 {{hh}} 

*ngFor指令

ngFor的主要作用是可以循环数组,类似于for循环,可以将数组中的数据循环显示到页面上

***.component.ts文件定义数组

 nameArray: string[ ] = [ 'zhangsan' , 'lisi' , 'wangwu' ]; 

***.component.html中使用ngFor循环显示数组中的值

 <ul>
    <!– 数组中有几个元素,就循环几次,每次循环都生成一个<li>-->
    <!– let  变量名  of  数组名 -->
    <!– 每循环一次,从数组中取出一个元素,存入变量中-->
     <li *ngFor="let  name of nameArray">
       <!– 绑定每次循环到的变量值-->
       {{name}}
     </li>
 </ul> 

*ngFor指令获取索引

使用index获取数组的索引值

在***.component.ts文件定义日期

 nameArray: string[ ] = [ 'zhangsan' , 'lisi' , 'wangwu' ]; 

***.component.html获取索引值

 <ul>
     <!--  index获取数组的索引值  -->
     <!--  let 变量名  =  index  -->
     <li *ngFor="let  name of nameArray;let i = index">
       {{i}}: {{name}}
     </li>
 </ul> 

*ngIf指令

ngIf的主要作用是条件判断

*ngIf的的语法格式

  <span *ngIf=“条件表达式" >…</span> 

条件表达式返回true,显示元素

条件表达式返回false,不显示元素

在***.component.ts文件定义数组

 nameArray: string[ ] = [ 'zhangsan' , 'lisi' , 'wangwu' ]; 

***.component.html在使用*ngIf指令

<ul >
    <li *ngFor="let name of aa;let i = index">        
         <span *ngIf="i%2==0" style="background-color: skyblue;">
             {{name}}
         </span>
         <span *ngIf="i%2!=0" style="background-color:orange;">
             {{name}}
         </span>
     </li>
 </ul> 

ngSwitch指令

语法格式:

 <span [ngSwitch]=“表达式">  
         <span  *ngSwitchCase=“值1">…</span> 
         <span  *ngSwitchCase=“值2">…</span>
         <span  *ngSwitchCase=“值3">…</span>
         ….
         <span  *ngSwitchDefault>…</span>
 </span> 

1.显示与表达式匹配的元素

2.如果没有匹配的值显示默认项

 <span [ngSwitch]="bb">  
         <span  *ngSwitchCase="1">已支付</span> 
         <span  *ngSwitchCase="2">已发货</span>
         <span  *ngSwitchCase="3">已收货</span>
         <span  *ngSwitchDefault>不正常</span>
 </span> 

双向数据绑定

数据源(ts)绑定至视图(html

视图(html)绑定至数据源(ts)

双向数据绑定之前,需要在根模块app.modules.ts中引入FormsModule表单模块,所有的组件都生效

 // 导入(引入)表单模块
 import { FormsModule } from '@angular/forms';
 …..
 @NgModule({
 ……
      imports: [
     BrowserModule,
     AppRoutingModule,
     // 在模块的装饰器中导入表单模块
     FormsModule
   ] 

在***.component.ts文件中

 num1 = 2;
 num2 = 3;
 dd() {
     alert(  this.num1 + this.num2 );
 } 

***.component.html文件中

 <input type="text"  [(ngModel)]="num1" />  <br />
 <input type="text"  [(ngModel)]="num2" />  <br />
 <input type="button" value="求和" (click)="dd()" /> 

Number’123’);//将字符串转为number类型

Angular表单提交数据

添加ngForm指令:#变量名=ngForm

绑定提交事件:ngSubmit=“方法名(变量名.value)

单组件必须设置name属性,必须使用ngModel指令

必须使用submit提交按钮

 <form #f="ngForm" (ngSubmit)="ff(f.value)">
     <input type="text"  name="num1" ngModel />  <br />
     <input type="text"  name="num2" ngModel />  <br />
     <input type="submit" value="提交" >
  </form> 

***.component.ts中,添加提交事件绑定的方法

 //添加参数接收传过来的表单数据 
 ff(data: any) {
       alert(Number(data.num1) + Number(data.num2));
 } 

表单验证

名称 说明
required 设置表单控件值是非空的
email 设置表单控件值的格式是电子邮箱
minlength 设置表单控件值的最小长度
maxlength 设置表单控件值的最大长度
pattern 设置表单控件值必须匹配pattern对应的正则表达式

通过为ngModel设置变量名,通过变量名来查看该控件的验证状态

设置验证规则:非空

 <input type="text" name="num1" ngModel #one="ngModel“ required  />  

每当表单控件中的值发生变化时Angular 就会进行验证

验证无效:invalidtrue

 <span *ngIf=“one.invalid" style="color:red;">
        你输入的值无效
     </span> 
 <input type="text" name="num1" ngModel #two="ngModel" required email minlength="6" maxlength="12" />
 <span *ngIf=“two.errors?.required" style="color:red;">
         不能为空
 </span>
 <span *ngIf=“two.errors?.minlength" style="color:red;">
        长度至少6位
 </span>
 <span *ngIf=“two.errors?.maxlength" style="color:red;">
        长度最多12位
 </span>
 <span *ngIf=“two.errors?.email" style="color:red;">
        邮箱格式不正确
 </span> 

正则表达式验证

 <input type="text" name="num2" ngModel #two="ngModel" pattern="^[0-9]*$"/> 
 
 <span *ngIf="two.errors?.pattern" style="color:red;">
     你输入的数据格式不正确
 </span> 

表单样式

单控件CSS名会根据控件状态的变化而自动变化

名称 true时的css false时的css
控件是否访问过 ng-touched ng-untouched
控件的值是否变化 ng-dirty ng-pristine
控件的值是否有效 ng-valid ng-invalid
  input.ng-valid{
     border:3px solid #42A948;
  }
  input.ng-invalid{
    border:3px solid #a94442;
 } 

Angular路由

Angular 路由能让用户从一个视图导航另一个视图

Angular中使用路由实现跳转

 创建项目时自动创建了路由模块(app-routing.module.ts) 
// 导入需要加载的组件,可以从根模块中复制 (自动生成)
  {path: 'index/:uname', component: IndexComponent}

<router-outlet></router-outlet>

<router-outlet>扮演一个占位符的角色,标出一个位置,路由对应的组件显示到这个位置

在根组件app.component.html文件中

在地址栏输入:/index

路由就会匹配到pathindex的路由

并在根组件中<router-outlet>位置显示index组件。

在根组件中不要手动调用组件了,去掉<app-组件名称> </app-组件名称>

代码调用路由

在构造函数constructor(private router:Router)中注入路由器,注入时必须添加访问修饰符

 import { Router } from ‘@angular/router’;  //导入路由器
 ….
 export class LoginComponent implements OnInit {
 
   constructor(private router:Router) { }    //注入路由器
 
   login(data: any){
      if(data.username=="zhangsan" &&data.password=="123456"){
           // 使用路由器导航到首页
           this.router.navigate([‘/index’]);
           
      }
 } 

默认路由

path 为空时重定向/login路由

 const routes: Routes = [  
    …..
   {path:‘ ’,redirectTo:‘/login‘, pathMatch: 'full'}
 
 ];  
//redirectTo:重定向
//pathMatch:路径匹配方式,full完全匹配 

routerLink指令(A标签?)

 <ul> 
      <li><a [routerLink]=“[‘/index’]”>首页</a></li>
      <li><a [routerLink]=“[‘/login’]”>登录</a></li>
 </ul> 

路由path传递参数

 const routes: Routes = [
 {path:'main',component:MainComponent},
 {path:'login',component:LoginComponent},
 //  /:参数名
 {path:‘first/:name',component:FirstComponent}
 ]; 

ActivatedRoute活动路由,可以保存当前路由传递的信息

 //导入活动路由
 import {ActivatedRoute} from '@angular/router';
 //在构造函数中注入活动路由
 constructor(private route:ActivatedRoute) { } 

routerLink传值 (a标签传值 牛B)

  <a [routerLink]=“[‘/first’,’张三’]”>第一个</a> 

代码传值

 this.router.navigate(["/index", ’张三’ ]); 

可观察对象(Observable)

通过活动路由paramMap属性获取传递的数据

paramMap属性是一个可观察对象(Observable)对象

观察对象支持在应用中的发布者订阅者之间传递消息

获取传递的消息,就要调用subscribe(匿名函数) 方法

 ngOnInit() {
     this.route.paramMap.subscribe(
         //数据传递到data中
          function(data){      
                 //根据参数名称获取传递的值   
                alert(data.get("name"));   
           }
      );  
   } 

箭头函数

匿名函数

 function(参数1,参数2, ….参数n){
    ……..
 } 

箭头函数就是简化了的匿名函数

 //完整箭头函数
 (参数1, 参数2, …, 参数N) => { 函数主体}
 //只有一条语句,大括号省略
 (参数1, 参数2, …, 参数N) =>表达式
 // 当只有一个参数时,圆括号是可选的:
 单一参数 => {函数主体}
 // 只有一条语句,一个参数
 单一参数 =>表达式 

使用箭头函数简化匿名函数

 //注入活动路由
 constructor(private route:ActivatedRoute) { }
   aa:string;
   ngOnInit() {
      this.route.paramMap.subscribe(data=>this.aa=data.get(‘name’));    
   } 

Get传值

Get传值,使用queryParams

<a [routerLink]="['/sample']" [queryParams]="{id:3,name:'张三'}">页面四</a> 

代码传值

this.router.navigate(["/sample"],{queryParams: {id: 123,name:'zhangsan'}}) 

使用活动路由的queryParamMap获取数据

queryParamMap是一个可观察对象(Observable)对象

 //注入活动路由
 constructor(private route:ActivatedRoute) { }
   name:string="";
   ngOnInit() {
  this.route.queryParamMap.subscribe(
       data=>{ 
             alert(data.get("name")); 
             alert(data.get('id'))
        }
       );  
  } 

HttpClient后台通讯

要想使用 HttpClient必须在根模块(app.module.tsAngular HttpClientModule模块

 import { HttpClientModule } from '@angular/common/http';
 @NgModule({
   ….
   imports: [
     BrowserModule,
     HttpClientModule
   ],
   ….
 }) 

在组件中导入HttpClient

并在组件的构造函数中注入HTTP服务

 import { HttpClient } from '@angular/common/http';
 
 export class SampleComponent implements OnInit {
 
   constructor(private http: HttpClient) { }
 
   ngOnInit() {
       …..
   }
 
 } 

向后台发送数据

使用httpClientpost()方法后台发送数据

post()方法返回一个可观察对象(Observable对象)

获取数据,就要调用subscribe(箭头函数) 方法

 url = ‘http://localhost:8080/StuManager/stu/addStu’; //后台地址
 
   add(a: any){    
     //post(后台地址,发送的数据) 
     this.http.post(this.url,a).subscribe(data=>{
         // data是后台返回的影响行数  
        if(data>0){
              alert("添加数据成功");
          }
     });
     
   } 

获取后台数据

 import { HttpClient } from ‘@angular/common/http’; //导入HttpClient  
 
 constructor(private http: HttpClient) { }  //注入HttpClient
 
   stuList: any;  //存查询结果
   url = ‘http://xt-jiaoshiji:8080/StuManager/stu/getStu’; //后台地址
 
   getData(){   
         this.http.get(url).subscribe(data=>this.stuList=data);    
   } 

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇