Angular学习笔记

2021-03-17

Angular 学习笔记

  1. 安装 Angular

安装地址

傻瓜式安装 安装完成后可在 cmd 控制台中输入 node-v npm-v 进行验证是否安装正确

image.png

问题一:

提示 node 不是内部或外部命令,也不是可运行的程序或批处理文件

可能是环境变量未添加成功的缘故:

配置环境变量:

windows 系统里, 需要把 nodejs 安装目录路径设置进系统变量或用户变量

  1. 打开控制面板 - > 系统和安全 - > 系统 - > 高级系统设置 - > 环境变量

用户变量中设置 NODE_PATH:C:\Program Files\nodejs
系统变量中在 path 中加入:C:\Program Files\nodejs\

img

注:我安装在了 E 盘所以会像下面一样显示:

image-20210305143411533

  1. 设置 npm 镜像

npm config set registry=http://registry.npm.taobao.org

  1. 选择合适的 IDE

我选择的是 VS Code 下载地址

  1. 安装 Angular CLI

npm install -g @angular/cli

问题一:尽量用管理员运行 否则可能提示不成功

如果报错,就先删掉 C:\Users\adminstrator\AppData\Roaming\npm\node_modules\@angular\cli\node_modules 目录,然后再运行 npm install -g @angular/cli

问题二:npm install 报 404 Not Found - GET https://registry.npmjs.org

一、先查看一下有没有设置代理

npm config get proxy
npm config get https-proxy

以上两个命令如果返回 null,那么就不需要执行以下命令清理

npm config set https-proxy null
npm config set proxy null

二、重新设置

npm config set registry https://registry.npmjs.org/

继续执行其他命令检测是否成功

  1. 修改 NPM 全局模式的默认安装路径的方法——参考博客

一般情况下,我们安装 Node.js 环境,程序会自动把 NPM 全局模块的路径设置在系统盘(通常是 C 盘下),我们在项目开发阶段不建议全局路径设置在系统盘,不但会影响电脑的性能,而且还很不安全。可以通过以下命令来设置默认下载的全局路径目录:

输入命令,查看当前配置:

npm config ls

运行结果:

在这里插入图片描述

如果是第一次使用 NPM 安装包的话,在配置中只会看到 prefix 的选项,就是 NPM 默认的全局安装目录。但是如果有多次使用 NPM 安装包的话,就会看到 cacheprefix 两个路径,如下图:

在这里插入图片描述

第一步:

在欲更改的目录下新建两个文件夹,分别是:node_global_modulesnode_cache,效果如图:

在这里插入图片描述

第二步:

打开命令提示符,执行下面两条命令:

npm config ``set` `prefix ``"D:\dev\nodejs\node_modules\npm\node_global_modules"``npm config ``set` `cache ``"D:\dev\nodejs\node_modules\npm\node_cache"

执行成功后,可以用 npm config ls 命令查看配置的结果,效果如图:

在这里插入图片描述

第三步:

验证配置成功后,需要配置环境变量。在环境变量中,新建一个系统变量,变量名:NODE_HOME,变量值:D:\dev\nodejs,效果如图:

在这里插入图片描述

Path 变量名中,新建变量值:

%NODE_HOME%``%NOED_HOME%\node_modules``%NODE_HOME%\node_modules\npm\node_global_modules\

效果如图:

在这里插入图片描述

保存之后,可以重新执行全局安装命令,查看 NPM 依赖包在全局的默认安装目录是否为我们配置好的目录,如果成功下载到了设置后的目录下,就成功修改了默认全局安装路径。

  1. 使用 Angular CLI 初始化应用

ng new hello-world

  1. 运行 Angular 应用
cd hello-world
ng serve --open
  1. 配置 TypeScript 库

全局安装 TypeScript 库:

`npm install -g typescript`

如果显示:则表示成功

image.png

tsc -v 查看目标

快速入门

指定文件夹创建项目

cd 绝对路径

ng new helloword -- skip-install

cd 项目目录

cnpm i 安装依赖

ng g component components/form 创建组件

在 app、根里面引入组件

<app-form></app-form>

[] 绑定属性
() 绑定事件

1、

image.png

  1. 自定义组件

静态属性:

<div [title]="student">
    张三
</div>

动态属性:

<div [title]="student">
    张三
</div>
<div>
    {{content}}
</div>

//解析

<span [innerHTML]='content'></span>

<h1>angular模板里面绑定数据</h1>
<h2>{{title}}</h2>
<h3>{{msg}}</h3>

<h4>{{username}}</h4>

<h5>{{student}}</h5>


<br/>

<div>
    {{message}}
</div>

<h1>angular模板里面绑定属性</h1>

<div title="student">
    张三
</div>


<div [title]="student">
    张三
</div>

<h1>angular模板里面绑定属性</h1>

<div>
    {{content}}
</div>

//解析

<span [innerHTML]='content' class="red"></span>


<h1>angular模板里面允许简单的运算</h1>

1+2={{1+2}}



<h1>angular模板里面的数据循环</h1>

<ul>
    <li *ngFor="let item of arr">
        {{item}}
    </li>
</ul>


<ol>
    <li *ngFor="let item of list">
        {{item}}
    </li>
</ol>


<ol>
    <li *ngFor="let item of items">
        {{item}}
    </li>
</ol>

<ul>
    <li *ngFor="let item of userList">
        {{item.username}}----{{item.age}}
    </li>
</ul>


<ul>
    <li *ngFor="let item of cars">

        <h2>{{item.cate}}</h2>
        
        <ol>
            <li *ngFor="let car of item.list">
                {{car.title}}----{{car.price}}
            </li>
        </ol>

    </li>
</ul>
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {

  //新建数据
  public title="Heloo xioabo";

  msg="我是一个新闻组件的smh";

  username:string="张三";

  //推荐使用这个
  public student:string="我是一个学生的属性(数据)";

  /*

  public  共有    可以这个类里面使用,也可以在类外面使用
  protected 保护类型      只有在它以及类的子类使用
  private 私有  只有当前类里面访问

  */

  //定义对象
  
  public userinfo:object={
      username:'张三',
      age:'20'
  }

  public message:any;

  public content="<h2>我是一个html标签</h2>";

  //定义数组
  public arr=['11','22','333'];

  public list:any[]=['我是第一个新闻','2222222','我是第三个新闻']

  public items:Array<any>=['wo','ai','ni']

  public userList:any[]=[{
    username:'张三',
    age:20
  },{
    usename:'李四',
    age:20
  },{
    username:'xiaobo',
    age:21
  }]

  constructor() { 

    this.message='给属性赋值,改变';
    
    //获取属性的值
    console.log(this.msg);

    //改变属性的值
    this.msg="我是改变后的msg的值";

  }

  public cars:any[]=[
    {
      cate:"BMW",
      list:[
        {
          title:'宝马x1',
          price:'30万'
        },
        {
          title:'宝马x2',
          price:'30万'
        },
        {
          title:'宝马x3',
          price:'30万'
        },
        {
          title:'宝马x4',
          price:'30万'
        }
      ]
    }
    ,
    {
      cate:"奥迪",
      list:[
        {
          title:'奥迪q1',
          price:'30万'
        },
        {
          title:'奥迪q1',
          price:'30万'
        },
        {
          title:'奥迪q1',
          price:'30万'
        },
        {
          title:'奥迪q1',
          price:'30万'
        }
      ]
    }
  ]


  ngOnInit(): void {
  }

}

条件判断语句*ngif

<h1>循环数据 显示数据的索引值</h1>

<ul>
    <li *ngFor="let item of list;let key=index;" >
        <span *ngIf="key==1" class="red">{{key}}----{{item.title}}</span>
        <span *ngIf="key!=1">{{key}}----{{item.title}}</span>
    </li>
</ul>

条件判断语句*ngSwit

<h3>条件判断语句 *ngSwit</h3>
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
    已经支付
</p>
<p *ngSwitchCase="2">
    表示支付且已经确认订单
</p>
<p *ngSwitchCase="3">
    表示已经发货
</p>
<p *ngSwitchCase="4">
    表示已经收获
</p>
<p *ngSwitchDefault>
    无效
</p>
</span>

循环数据

<h1>循环数据 显示数据的索引值</h1>

<ul>
    <li *ngFor="let item of list;let key=index;" >
        <span *ngIf="key==1" class="red">{{key}}----{{item.title}}</span>
        <span *ngIf="key!=1">{{key}}----{{item.title}}</span>
    </li>
</ul>

ngClass

<h3>属性[ngClass],[ngStyle]</h3>

<div class="res">
     ngClass演示 (尽量不要用dom来改变)
</div>

<div [ngClass]="{'blue': true,'red':false}">
    ngClass演示
</div>

<br>
<div [ngClass]="{'orange': flag,'red':!flag}">
    ngClass2演示
</div>

<strong>循环数组,让数组第一个元素样式为red</strong>

<ul>
    <li *ngFor="let item of list;let key=index;" [ngClass]="{'red': key==0,'orange':key==1,'blue':key==2}">
        {{key}}----{{item.title}}
    </li>
</ul>

ngStyle

<p style="color: red;">我是一个p标签1</p>

<p [ngStyle]="{'color': 'blue'}">我是一个p标签2</p>

<p [ngStyle]="{'color': attr}">我是一个p标签3</p>

管道

<h1>管道</h1>

{{today|date:'yyyy-MM-dd HH:mm:ss'}}

事件

<h1>事件</h1>
        
    <strong>{{title}}</strong>
    <br>
    <br>
    <button (click)='run()'>执行事件</button>

    <button (click)='getDate()'>执行方法获取数据</button>
    <br>

    <button (click)='setDate()'>执行方法改变属性里面的数据</button>
run(){

    alert('这是一个自定义方法');

  }
  getDate(){
    alert(this.title);
  }
  setDate(){
    this.title='我是一个改变后的title';
  }

双向绑定数据

<h1>双向数据绑定---MVVM 只是针对表单</h1>

    <input type="text" [(ngModel)]="keywords"/>
    {{keywords}}


    <button (click)="changKeywords()">改变keywords的值</button>
    <br>
    <button (click)="getKeywords()">获取keywords的值</button>


引入:
import{FormsModule} from '@angular/forms'
声明:
imports: [
    BrowserModule, 
    FormsModule
  ],

html.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

import { templateJitUrl } from '_@angular_compiler@11.2.4@@angular/compiler';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public title:string='我是一个titile';

  public picUrl="https://www.baidu.com/img/PCpad_012830ebaa7e4379ce9a9ed1b71f7507.png";

  public list:any[]=[
    {
      "title":"我是新闻1"
    },
    {
      "title":"我是新闻2"
    },{
      "title":"我是新闻3"
    }
  ]
  public flag:boolean=true;

  public orderStatus:number=3;//1 已经支付 2表示支付且已经确认订单 3表示已经发货 4表示已经收获 5 无效

  public attr:string='red';

  public today:any=new Date();
  public keywords:string='这是默认值';
  constructor() { 

    //打印数据
    console.log(this.today);

  }

  ngOnInit(): void {
  }
  run(){

    alert('这是一个自定义方法');

  }
  getDate(){
    alert(this.title);
  }
  setDate(){
    this.title='我是一个改变后的title'; 
  }
  keyDown(e){
    if(e.keyCode==13){
      console.log('按了个回车');
    }else{

      //e.
      console.log(e.target.value);
    }
    
  }
  keyUp(e){
    if(e.keyCode==13){
      console.log(e.target.value);
      console.log('按了个回车');
    }
  }
  runEvent(event){
    var dom:any=event.target;
    dom.style.color="red";
  }

  changKeywords(){
    this.keywords='我是改变后的值'
  }
  getKeywords() {
    console.log(this.keywords);
  }
}

home.html

<h1>引入图片</h1>


<!-- <img src="assets/images/1.jpg" alt="收藏"> -->

<img [src]="picUrl" />


<h1>循环数据 显示数据的索引值</h1>

<ul>
    <li *ngFor="let item of list;let key=index;" >
        <span *ngIf="key==1" class="red">{{key}}----{{item.title}}</span>
        <span *ngIf="key!=1">{{key}}----{{item.title}}</span>
    </li>
</ul>

<h3>条件判断语句 *ngif</h3>

    <!-- <div *ngIf="flag">
        <img src="assets/images/1.jpg"/>
    </div>

    <div *ngif="!flag">
        <img src="assets/images/2.jpg"/>
    </div> -->

<h3>条件判断语句 *ngSwit</h3>
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
    已经支付
</p>
<p *ngSwitchCase="2">
    表示支付且已经确认订单
</p>
<p *ngSwitchCase="3">
    表示已经发货
</p>
<p *ngSwitchCase="4">
    表示已经收获
</p>
<p *ngSwitchDefault>
    无效
</p>
</span>

<h3>属性[ngClass],[ngStyle]</h3>

<div class="res">
     ngClass演示 (尽量不要用dom来改变)
</div>

<div [ngClass]="{'blue': true,'red':false}">
    ngClass演示
</div>

<br>
<div [ngClass]="{'orange': flag,'red':!flag}">
    ngClass2演示
</div>

<strong>循环数组,让数组第一个元素样式为red</strong>

<ul>
    <li *ngFor="let item of list;let key=index;" [ngClass]="{'red': key==0,'orange':key==1,'blue':key==2}">
        {{key}}----{{item.title}}
    </li>
</ul>

<br>

<p style="color: red;">我是一个p标签1</p>

<p [ngStyle]="{'color': 'blue'}">我是一个p标签2</p>

<p [ngStyle]="{'color': attr}">我是一个p标签3</p>


<h1>管道</h1>

{{today|date:'yyyy-MM-dd HH:mm:ss'}}


<h1>事件</h1>
        
    <strong>{{title}}</strong>
    <br>
    <br>
    <button (click)='run()'>执行事件</button>

    <button (click)='getDate()'>执行方法获取数据</button>
    <br>

    <button (click)='setDate()'>执行方法改变属性里面的数据</button>
    <br>

    <button (click)='runEvent($event)'>执行方法获取事件对象</button>

    <h1>表单事件 事件对象</h1>


        <!-- <input type="text" (keydown)='keyDown()'> -->
        keyDown:
        <input type='text' (keydown)="keyDown($event)"/>
        <br>
        keyUp:
        <input type='text' (keyup)="keyUp($event)">

<h1>双向数据绑定---MVVM 只是针对表单</h1>

    <input type="text" [(ngModel)]="keywords"/>
    {{keywords}}


    <button (click)="changKeywords()">改变keywords的值</button>
    <br>
    <button (click)="getKeywords()">获取keywords的值</button>


在线表单功能的实现

<h2>人员登记系统</h2>



<div class="people_list">
    <ul>
        <li>姓 名:<input type="text" id='username' [(ngModel)]="peopleInfo.username" value="form_input"/></li>
        <li> 性 别:

           <input type="radio"  value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"/> <label for="sex1">男</label>
           
           <input type="radio"  value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"/> <label for="sex2">女</label>
        </li>
        <li> 城市:

           <select name="city" id='city' [(ngModel)]="peopleInfo.city">

                <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>

           </select>

         </li>
         <li> 
            爱好:
           <span *ngFor="let item of peopleInfo.hobby;let key =index;">
               <input type='checkbox' [id]="'check'+key" [(ngModel)]="item.checked"/>
               <label [for]="'check'+key">{{item.titile}}</label>
                 
           </span>
          </li>
        
          <li> 
            备 注:
           
            <textarea name="mark" id='mark' cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>


          </li>
         
    </ul>
    <br> 
    <br> <br>

    <button (click)="doSubmit()" class="submit">获取表单的内容</button>
    <br> <br>
    <br> <br>
    <br> <br>
   
   
    <pre>
        {{peopleInfo|json}}
    </pre>
</div>

**

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {


public peopleInfo:any={
  username:'111',
  sex:'1',
  cityList:['北京','上海','深圳'],//可选列表
  city:'上海',//获取的值

  hobby:[{
    titile:'吃饭',
    checked:false
  },{
    titile:'睡觉',
    checked:false
  },{
    titile:'敲代码',
    checked:true
  }],
  mark:' '
}
  constructor() { }

  ngOnInit(): void {
  }
  doSubmit(){

    //jquery dom 操作
    // let usernameDom:any=document.getElementById('username');

    // console.log(usernameDom.value);


    //双向数据绑定
      console.log(this.peopleInfo);

  }
}

**

h2{
    text-align: center;
}
.people_list{
    width: 400px;
    margin: 40px auto;

    padding:20px;
    border:1px solid #eee;

    li{
        height: 50px;

        line-height:50px;

        .form_input{
            width: 300px;
            height: 32px;
        }
        
       .submit{
            width: 100px;
            height: 30px;

            float: right;


            margin-left: 50px;
            
            margin-top:100px;
            
        } 
    }

}

标题:Angular学习笔记
作者:xiaob0
地址:https://xiaobo.net.cn/articles/2021/03/17/1615987190533.html