Angular安装和基础

最新推荐文章于 2024-05-28 09:38:34 发布

空中追风sk

最新推荐文章于 2024-05-28 09:38:34 发布

阅读量620

点赞数 1

分类专栏： web前端文章标签： angular

本文链接：https://blog.csdn.net/weixin_43667990/article/details/102985352

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.安装

1.安装node.js
下载地址：https://nodejs.org/en/

2.查看版本，修改npm镜像地址

node -v        # v12.13.0
npm -v        # 6.12.0

# 查看并修改npm镜像地址
npm congfig get registry    # http://registry.npmjs.org
npm config set registry http://registry.npm.taobao.org

# 安装cnpm
npm install -g cnpm --registry==https://registry.npm.taobao.org

# 安装angular，-g代表全局安装
cnpm install -g @angular/cli

# 检验是否安装成功
ng version

3.安装vscode插件
在这里插入图片描述

二.启动项目

ng new my-app --skip-install    # 新建项目，但取消依赖库的安装(npm安装依赖时可能出错)
cd my-app
cnpm install    # 使用cnpm安装依赖
ng serve --port=4200 --host 0.0.0.0    # 启动服务：http://0.0.0.0:4200/ ,4200为默认端口

项目结构
在这里插入图片描述

三.常用语法

1.创建组件

# 在src/app目录中创建组件，组件目录中已自动生成html，css和ts文件
ng g component components/news

news.component.ts

import { Component, OnInit } from '@angular/core'; /*引入angular 核心*/

@Component({
	selector: 'app-header', /*使用这个组件的名称*/
	templateUrl: './header.component.html', /*html 模板*/
	styleUrls: ['./header.component.css'] /*css 样式*/
})
export class HeaderComponent implements OnInit { /*实现接口*/
	// 可在此处定义属性数据和对象

	constructor() { /*构造函数*/
	}
	ngOnInit() { /*初始化加载的生命周期函数*/
	}
}

2.数据绑定

1.组件的ts文件中定义属性和对象

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

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  // 在组件种定义属性(数据)，默认为public，所有类均能访问
  title="this is news title";
  public msg="news component msg";
  // ts中建议在定义属性时写上属性类型
  username:string="kzzf";
  // any表示任意类型，protected 只能在此类和此类的子类中使用
  protected age:any='23';
  
  // 定义一个私有的对象，只能在这个类中使用
  private userinfo:object={
    username: "skkk",
    age: 18,
  }

  // 仅定义一个属性，不赋值，在构造方法或初始化方法中再赋值
  message:any;

  // 定义一个html片段
  htmlContent:string="<h2>这是一个html标签</h2>"

  // 定义一个数组
  public arr:any=[111,222,"333"];
  // 数组的第二种定义方式
  list:Array<number>=[123,456,789]

  userlist:any=[
    {
      username: '张三',
      age: 22,
    },
    {
      username: '李四',
      age: 28,
    },
  ]

  constructor() {
    this.message="属性赋值或改变属性值";
    this.msg="改变msg属性的值";
  }

  ngOnInit() {

  }

}

2.组件的html文件中进行引用

<h1>angular模板中绑定数据</h1>
    <h2>绑定变量{{title}}</h2>
    <h2>username={{username}}, age={{age}}</h2>
    <h4>{{userinfo.username}}-{{userinfo.age}}</h4>

<h1>angular模板中绑定html属性</h1>
    <!-- 给div的title绑定动态属性值 -->
    <div [title]="msg">
        张三
    </div>

<h1>angular模板中绑定html片段</h1>
    <div [innerHTML]="htmlContent"></div>
    {{htmlContent}}    <!-- 这样写的话html标签不会被浏览器解析 -->

<h1>angular模板中允许简单的运算</h1>
    <h2>1+1={{1+1}}</h2>

<h1>angular中的数据循环</h1>
    <ol>
        <li *ngFor="let item of arr">
            {{item}}
        </li>
    </ol>

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

3.图片的引入，判断循环和动态属性

1.组件的ts文件中定义属性和对象

export class HomeComponent implements OnInit {

  public picUrl = "https://www.baidu.com/img/bd_logo1.png?where=super";

  public list:any[]=[
    {"title": "新闻1"},
    {"title": "新闻2"},
    {"title": "新闻3"},
  ];

  public attr:string="orange";
  public orderStatus:number=0;

2.组件的html文件中进行引用

<h1>引入图片</h1>
    <!-- 将图片放入assets目录中 -->
    <img src="assets/images/123.jpg" alt="">
	<!-- 网络图片，直接绑定picUrl属性 -->
    <img [src]="picUrl" alt="">

<h1>循环数据，获取列表索引</h1>
    <ul>
        <!-- 循环遍历的过程中，把索引赋值给变量key -->
        <li *ngFor="let item of list;let key=index">
            <!-- 条件判断if，angular中没有else -->
            <span *ngIf="key==1" class="red">{{key+1}}--{{item.title}}</span>
            <span *ngIf="key!=1">{{key+1}}--{{item.title}}</span>
        </li>
    </ul>

<h1>条件判断 ngswitch</h1>
	<!-- 根据orderStatus的值，动态选择显示的内容 -->
    <span [ngSwitch]="orderStatus">
	    <p *ngSwitchCase="1">已付款</p>
	    <p *ngSwitchCase="2">已发货</p>
	    <p *ngSwitchCase="3">已完成</p>
	    <p *ngSwitchDefault>无效订单</p>
    </span>

4.管道

<!-- today为ts中定义的一个日期对象 -->
{{today | date:"yyyy-MM-dd HH:mm:ss"}}

5.事件

<h1>事件</h1>
	<!-- 监听click事件，触发run方法并传入参数 -->
    <button (click)="run(1)">按钮</button>

<h1>表单元素的事件对象</h1>
    <!-- $event 传入当前的事件 -->
    <input type="text" (keydown)="keyDown($event)">

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

  keyDown(e:any){
    // 若输入回车，则弹出input框当前的value
    if(e.keyCode==13){
      alert(e.target.value);
    }else{
      console.log(e.target);  // 获取当前事件的dom节点
      console.log(e.key);    // 获取输入的值
      console.log(e.keyCode);    // 获取字符对应的编码
    }
  }

  runEvent(e:any) {
    var dom:any=e.target;    // 获取当前的事件对象
    dom.style.color="red";    // 改变事件对象的css属性
  }

6.双向数据绑定

先在app.module.ts中引入FormsModule并引用

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule    // 引用
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在组件中使用

<h1>双向数据绑定 MVVM(模型和视图相互影响)  仅针对表单元素</h1>
	<!-- ngModel 将input框的value和keyword属性进行动态绑定 -->
    <input type="text" [(ngModel)]="keyword">
    {{keyword}}
	<!-- 调用方法改变keyword属性值 -->
    <button (click)="getKeyword()">获取keyword</button>
    <button (click)="changeKeyword()">改变keyword</button>

  changeKeyword() {
    this.keyword="改变后的值";
  }

  getKeyword() {
    alert(this.keyword);
  }

四、模板语法

1.ng-if
if和else的用法

<!-- else后面跟的是模板名 -->
<span class="indicator" *ngIf="i==selectIndex else elseContent"></span>

<!-- 定义一个模板，模板名为：elseContent -->
<ng-template #elseContent>
  <span>123</span>
</ng-template>

2.ng-for

<li *ngFor="let menu of menus; let i=index">
  <a 
  [class.active]="i==selectIndex"    <!-- 应用单个class的常用技巧 -->
  (click)="handleSelected(i)"
  href="#">{{ menu.title }}</a>
</li>

常用的循环变量

# 判断是否为第一个或最后一个元素，布尔值
let f = first
let l = last

# 布尔值，索引是否为奇数或偶数
let odd = odd;
let even = even;

3.样式绑定
class.className，ngClass和ngStyle

[class.active]="i==selectIndex"    <!-- 应用单个class的常用技巧 -->

<h1>ngStyle</h1>
    <!-- 加引号则为字符串，不加时对应了一个属性变量，属性变量可以在ts中定义或由父组件传入 -->
    <p [ngStyle]="{'color': 'red'}">这是一个p标签</p>
    <p [ngStyle]="{'color': attr}">这是一个p标签</p>
    <a [ngStyle]="{'color': i==selectIndex ? titleActiveColor : titleColor}"></a>
    
<h1>ngClass，根据bool值动态选择class样式，这里的even和odd对应了css中的类样式</h1>
	<li
	    *ngFor="let menu of menus; let i = index; let even = even; let odd = odd"
	    [ngClass]="{ 'even': even, odd: odd }"
	  >

空中追风sk

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Angular安装和基础

一.安装# 设置cnpm镜像地址npm install -g cnpm --registry==https://registry.npm.taobao.org# 安装cnpm install -g @angular/cli# 检验是否安装成功ng version二.启动项目ng new my-app --skip-install # 新建项目，但取消依赖库的安装cd ...
复制链接

扫一扫

专栏目录