精华内容
下载资源
问答
  • angular教程
    2018-06-03 11:35:44

    angular系列在线交互式教程:

    angular5教程

    angular5教程全面系统地讲解了最新版的Angular5,内容不仅涵盖组件模板语法、指令和管道运用、表单运用、指令开发等基础内容,还包括依赖注入原理与应用、变化检测机制原理及应用、模块和组件的编译过程解析、视图结构等进阶技能。教程内容深入浅出、循序渐进,即适合有一定Angular基础的工程师提高学习,也适合没有接触过Angular的工程师从零学起。

    angular2教程

    即使你没有任何AngularJS的基础,学完angular2教程也可以轻松开发Angular2程序。本课程涵盖了Angular2的核心概念,并对其中涉及的ES2015、装饰器等语言增强恰当地进行讲解。

    angularjs教程

    AngularJS是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发者可以使用HTML来声明动态内容,从而使得Web开发和测试工作变得更加容易。angularjs教程深入框架实现机制,让你不仅学会利用angularjs进行应用开发,而且理解其工作原理。

    更多相关内容
  • 角度工作室这个 repo 包含学习 angular 基础知识所需的内容。 /start子目录是添加任何动态内容之前的应用程序。 这是为了让学生开始并添加角度代码/标记。 每个步骤目录将包含概述信息和要完成的任务列表。 这些目录...
  • angular 教程

    2016-09-28 21:39:44
    angularjs 教程
  • 仿Angular教程写的一个简单商城Demo,可正常编译运行,可供Angular入门者学习参考
  • 如何运行 e2e 测试。 node_modules/protractor/bin/webdriver-manager 更新量角器 2.
  • angular-app0:angular教程

    2021-02-14 22:19:11
    AngularApp0 该项目是使用版本11.0.5生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件,该应用程序将自动重新加载。 代码脚手架 运行ng generate component...
  • Angular,应用程序开发简介 创建多平台,可扩展和干净的应用程序。 实用车间 介绍 本角度课程介绍了对专业项目的必要实践的研究。 这是一门高级课程,因此将需要最少的实践知识,因为将解释大型项目中的常用技术。 ...
  • aspnetboilerplate-core-ng:ASP.NET Boilerplate Core + Angular教程
  • 英雄之旅 Angular教程应用
  • Angular 教程 Egghead 动画片深拷贝对象指示元素指令属性指令基本的jQuery 高级jQuery 与 Ctrl 进行指令对话指令与指令对话隔离范围 & 隔离作用域@ Isolate Scope =(双向绑定) HTTP http q_all routeProvider...
  • ElectronAngularTutorial-master.zip,ElectronAngularTutorial-master,tsd.json,main.js,bower.json,npm-debug.log,src,phones,phones.json,js,angularjs,angular.d.ts,node,node.d.ts,jquery,jquery.d.ts,...
  • 李斯特·杰西科斯(LISTAEJERCICIOS) 该项目是使用版本9.1.15生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。...要获得有关Angular CLI的更多帮助,请使用ng
  • 使用Angular进行Firebase身份验证该项目是Angular教程的一部分,我们在其中探索如何使用超赞的AngularFire库为Angular应用设置简单的电子邮件/密码以及社交登录身份验证工作流。 在获取分步免费教程请通过简单地放置...
  • Angular中的路由以及如何使用Angular路由模块创建单页应用程序
  • oc_angular_firebase:带有Firebase的Angular教程,随后为OpenClassrooms
  • APM 该项目是使用版本9.1.1生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。 代码脚手架 ...要获得有关Angular CLI的更多帮助,请使用ng help或查看 。
  • 不久前WebStorm的频繁卡死终于让我受不鸟了,我决定换个轻量级的编辑器,尝试了Emacs、Sublime text,最后选择...下面这篇文章主要给大家介绍了关于Angular2开发环境搭建教程之VS Code的相关资料,需要的朋友可以参考下。
  • 该项目是Angular教程的一部分,我们在其中探索如何使用很棒的AngularFire2库为Angular 7应用设置简单的电子邮件/密码以及社交登录身份验证工作流。 在获取分步免费教程 请通过简单地放置一个Github星来支持该项目 :...
  • 在本文中,我们将讨论Angular中的服务。
  • redditclone实践:遵循Spring Boot和Angular教程-通过freeCodeCampprogrammingtechie构建Reddit克隆(编码项目)
  • 如何在Angular中使用适当的验证技术构建数据输入表单
  • Angular js学习视频教程

    2022-04-14 17:14:15
    前端教程Angular 教程
  • Project使用来模拟带有打字稿和Webpack的angularjs环境中的angular 2+样式开发。 入门 要开始使用,您可以简单地克隆angularjs-typescript-webpack存储库。 一些项目依赖项仅用作示例,如果不需要,可以将其删除。 ...
  • Angular基础教程

    2021-10-08 17:57:58
    Angular基础教程 https://www.runoob.com/angularjs/angularjs-tutorial.html 教程文档 基本上学完这些,你就能正常的开发项目了,注意是正常开发而不是架构 阅读本教程前,您需要了解的知识: 在开始学习 AngularJS...

    https://www.runoob.com/angularjs/angularjs-tutorial.html 教程文档

    基本上学完这些,你就能正常的开发项目了,注意是正常开发而不是架构

    阅读本教程前,您需要了解的知识:

    在开始学习 AngularJS 之前,您需要具备以下基础知识:

    • HTML
    • CSS
    • JavaScript

    什么是 AngularJS?

    AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

    • AngularJS 把应用程序数据绑定到 HTML 元素。
    • AngularJS 可以克隆和重复 HTML 元素。
    • AngularJS 可以隐藏和显示 HTML 元素。
    • AngularJS 可以在 HTML 元素"背后"添加代码。
    • AngularJS 支持输入验证。

    入门案例

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
       
    </head>
    <body>
    
    <div ng-app="">
        <p>名字 : <input type="text" ng-model="name"></p>
        <h1>Hello {{name}}</h1>
    </div>
     <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    </body>
    </html>
    

    代码解析:

    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    

    这是AngularJS插件 ,使用AngularJS必须导入到页面中 ,我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

    当网页加载完毕,AngularJS 自动开启。

    ng-app 指令告诉 AngularJS,<div> 内元素是 AngularJS 应用程序 的"所有者"。 如果您移除了 ng-app 指令,AngularJS命令将无效
    
    ng-model 指令把输入域的值绑定到应用程序变量 name。 这个name自动会创建到AngularJS 里无需我们手动显示创建
    
    ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。(改变input的时候同时改变ng-bind绑定的内容和{{ }}的作用一样)
    

    以上是简单的AngularJS应用 但是实际上不会这样用的,会模块化使用

    AngularJS 模块化

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
    
    </head>
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    
        名: <input type="text" ng-model="firstName"><br>
        姓: <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{firstName + " " + lastName}}
    
    </div>
    
    
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.firstName= "John";
            $scope.lastName= "Doe";
        });
    </script>
    
    </body>
    </html>
    

    语法解析:

    绑定AngularJS 的作用域到myApp中 对应 html 的 ng-app="myApp"

    var app = angular.module('myApp', []);
    

    AngularJS 控制器控制应用 它的作用主要是对视图中的数据和事件处理函数进行挂载,同时进行一定的业务功能的底层封装和处理。

    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });
    

    AngularJS 指令大全

    把下面指令学完基本,AngularJS就能正常开发了

    https://www.runoob.com/angularjs/angularjs-reference.html

    建议把Angular-Cli 也学下我博客里有

    点赞 -收藏-关注-便于以后复习和收到最新内容
    有其他问题在评论区讨论-或者私信我-收到会在第一时间回复
    如有侵权,请私信联系我
    感谢,配合,希望我的努力对你有帮助^_^

    展开全文
  • Angular安装教程

    2021-01-08 00:21:59
    Angular安装 安装node和npm 参考这篇文章安装 https://blog.csdn.net/wf19930209/article/details/84226365 正式安装 当然,在安装 @angular/cli 之前需要先把 Node.js 安装好,请到官方网站下载安装包 ,安装过程和...
  • 你可能会问:Angular 的文章到处有,网上一大片,我为什么要来读你这个系列文章? 这是非常好的一个问题,说明你对阅读内容有质量要求。 如果是我,我也会问这个问题。 整体上说,这个系列的文章有以下特色: 1. 我...
  • angular英雄教程学习

    2022-02-04 20:19:38
    npm install @angular/cli 2. 新建angular项目 => ng new Myangular 3. 打开angular项目 => ng serve 2. 创建新组件 创建新组件:ng generate component home 3.设置属性,...

    1. 搭建开发环境

            1.安装angular/cli         =>   npm install @angular/cli

            2. 新建angular项目        =>        ng new Myangular

            3. 打开angular项目        =>        ng serve

    2. 创建新组件

            创建新组件:ng generate component home

    3.设置属性,模拟一组数据

    export interface Homesx {
        id :number,
        name:string,
    }
    import { Homesx } from './homesx/homesx';
    
    export const HOME: Homesx[] = [
      { id: 11, name: 'Dr Nice' },
      { id: 12, name: 'Narco' },
      { id: 13, name: 'Bombasto' },
      { id: 14, name: 'Celeritas' },
      { id: 15, name: 'Magneta' },
      { id: 16, name: 'RubberMan' },
      { id: 17, name: 'Dynama' },
      { id: 18, name: 'Dr IQ' },
      { id: 19, name: 'Magma' },
      { id: 20, name: 'Tornado' }
    ];

    4. 在home.component.ts中获取数据

            1. 新建一个home.service,来模拟异步获取HOME数据。

            ng g s home        =>        新建homeService

             2.写一个获取Home的方法,这里要用到Observable来设置一个可观察的值,利用of来弹出一个Observable属性类型。

      getHome():Observable<Homesx[]> {
        const home = of(HOME)
        return home
      }

            3.为了看到我们是否成功获取数据,可以在新建一个message.service,并且新建一个message.component来显示弹出获取成功的通知。

            ng g s message        ng g c message

             在message中设置新增和清除方法,在message.component中显示:如果获取到数据才显示,所以要使用一个*ngIf进行判断。因为每次获取数据都会向message中添加内容,所以遍历div显示所有的获取数据。

      message:string[] = []
      //新增方法
      add(m:string){
        this.message.push(m)
      }
      //清除方法
      clear(){
        this.message = []
      }
    <div *ngIf="messageService.message.length">
        <h2>Messages</h2>
        <button (click)="messageService.clear()">Clear messages</button>
        <div *ngFor='let message of messageService.message'> {{message}} </div>
      </div>

            4.这样我们就需要在home.service中的getHome方法中使用messageService中的add方法,将内容添加到message中。

            首先要在constructor中定义一个私有的messageservice

              constructor(private messageService:MessageService) { }

            然后在getHOME()中使用。

            this.messageService.add('获取数据') 

            5.现在我们的home.service和message.service都已经写完了,接下来就是要在home.component.ts中去调用这个获取数据的服务,方法如下

            (1) 在构造函数中添加私有的homeService和messageService

              constructor(private homeService : HomeService,private messageService:MessageService) { }

            (2)写一个获取数据的方法,因为用了Observable,这里要用subscribe来获取。

    getHome():void {
        this.homeService.getHome().subscribe(home => this.home = home)    //把传过来的home赋给原有的home数组
    }

             (3)在ngOnInit声明周期中调用该方法

      ngOnInit(): void {
        this.getHome()
      }

            6.这样在home中就使用了home.service这个服务,获取到了数据给了home数组。在home.html中遍历显示列表就行了。

    <ul>
        <li *ngFor='let h of home' >
            <a routerLink="/detail/{{h.id}}">    //此处点击会跳转到home-detail组件,所以写上roterLink
              <span>id:{{h.id}}</span><span>name:{{h.name}}</span>  
            </a>
        </li>
    </ul>

    5. 配置路由信息

            1. 现在home中已经有了数据,我们想让他点击Home时显示home.component组件,所以这时候我们需要配置路由。

    //引入路由
    import { RouterModule,Routes } from '@angular/router';
    //引入组件HomeComponent
    import { HomeComponent } from './home/home.component';
    //定义路由
    const routes:Routes = [
      {path: '', redirectTo: '/home', pathMatch: 'full' },//设置默认路由为home
      {path:'home',component:HomeComponent},
    ]

            2.配置好路由信息后,在app.component.html中配置

              <a routerLink="/home">Home</a>

    6.设置home-detail

            1.home-detail是我们点击home中的哪一个数据就跳转到显示对应的id和name。所以获取到点击的数据就尤为关键,通过id进行匹配。

            因为我们在home.service中获取了HOME数据,所以这里我们再写一个getId()来将id匹配的内容返回出来

      getId(id:number):Observable<Homesx|undefined> {
        const home = HOME.find(h =>h.id === id)  //通过find
        this.messageService.add(`得到id${{home}}`);//当获取到数据时,发送消息
        return of(home)
      }

            2.显然我们需要在home-detail中将所点击到的id传递给getId(),所以这里需要用到路由获取参数的方法。

    //引入获取路由参数的依赖
    import { ActivatedRoute } from '@angular/router';//保存路由信息,提取参数用的
    import { Location } from '@angular/common';      //一个angular的服务
      constructor(private acroute:ActivatedRoute,private location:Location,private homeService:HomeService) { }
      getDetail():void {
        const id = Number(this.acroute.snapshot.paramMap.get('id')) //得到参数的语法
        this.homeService.getId(id).subscribe(h => this.home = h)  //通过getId方法,得到匹配后的信息
      }

            3.这样我们将新的home显示在home-detail中就行了。

    <div *ngIf="home">
        <h2>{{home.name | uppercase}} Details</h2>
        <div><span>id: </span>{{home.id}}</div>
        <div>
          <label for="home-name">Hero name: </label>
          <input id="home-name" [(ngModel)]="home.name" placeholder="name">
        </div>
    </div>

    展开全文
  • angular快速入门教程

    千次阅读 2022-03-10 18:08:05
    angular快速入门

    angular

    安装:

    1.安装node.js

    2.安装angular

    npm i -g @angular/cli
    

    3.创建项目

    ng new 项目名
    

    4.文件结构:

    e2e:测试目录
    
    src:
    {
    	index.html:网站主页面
    	main.ts:应用主入口
    }
    src-app: //模块和组件
    	{
    	app.component.css     //模块/组件的css样式
    	app.component.html  //模块/组件的html页面
    	app.component.ts    //模块/组件的程序文件
    	}
    
    src-assets:  存放静态资源文件
    
    src-environments :环境配置
    
    src-favicon.ico  图标
    
    src-index.html  整个应用的根html
    
    main.ts    整个web应用的入口点,脚本执行的入口点
    
    polyfills.ts导入一些必要的库
    
    styless.css全局样式文件
    
    angular-cli.json  命令行工具的配置文件,
    
    karma ,protractor.conf.js   单元测试的追踪器
    
    package.json  npm配置文件,列明了当前应用所使用的依赖包
    
    tslint.json   tslint的配置文件
    

    5.运行

    ng serve --open 或者npm start
    

    组件:

    项目根模块:app.module.ts
    定义的组件都需要在app.module.ts文件里先进行import引入
    然后在@NgModule({deckartions:[]})声明
    定义组件模板的两个方式:
    1.使用templateurl引用一个html文件
    2.使用template +es6的模板字符串
    定义组件样式的两个方式:
    1.使用styleUrls引用一个css文件
    2.使用style +es6的模板字符串

    元数据:通过装饰器描述组件

    使用命令创建模块

    ng g module customers --routing=true

    生成的模块文件有个路由文件(customers-routing.modules.ts)和ts(customers.modules.ts)文件

    在项目的根路由文件引入模块

    const routes: Routes = [
      { path: '', pathMatch: 'full', redirectTo: 'CustomersModule' }, //重定向
      { path: 'CustomersModule',loadChildren:()=>import('./customers/customers.module').then(m=>m.CustomersModule)}
    ];
    

    使用命令创建组件

    先打开需要创建组件的模块,然后进入到模块命令行中,使用命令

    ng generate component 组件名 ##只能小写,不能大写

    或者缩写

    ng g c 组件名 ##只能小写,不能大写

    例如 ng g c hello

    就会生成一个hello的文件夹,里面有几个文件

    我们可以在hello.component.html写一段文字

    <p>我是第一个组件</p>
    

    在模块的路由文件里引入组件

    import { CustomersChildComponent } from './customers-child/customers-child.component';
    import { CustomersHelloComponent } from './customers-hello/customers-hello.component';
    
    const routes: Routes = [
      {path:"",component:CustomersChildComponent},
      {path:"hello",component:CustomersHelloComponent}
    ];
    

    然后保存,等编辑器重新编译之后,输入刚才模块的路由,就可以显示出来了

    http://localhost:4200/CustomersModule      //url地址/模块名称
    http://localhost:4200/CustomersModule/hello  //url地址/模块名称/模块里的组件
    

    数据绑定

    双向绑定:

    需要在根模块引入FormsModule,
    然后在import里添加FormsModule,[(ngModel)]=“text”,
    父组件到子组件@input(), @input(num) mynum 改名,当名字num重复的时候,可以使用此方法改名
    子组件到父组件@Output() change = new EventEmitter(),

    @Output(change) changea =new EventEmitter();

    改名
    属性绑定:class
    事件绑定:(click)=“clicked()”,(click)=“click1($event)”
    自定义事件:
    父组件:<子组件></子组件>
    子组件:先引入EventEmitter,Output,
    然后再获取自定义事件:@Output() myClick=new EventEmitter()
    触发自定义事件:<button (click)=“childClick()”>, childClick(){this.myClick.emit()}
    指令
    结构指令:

    *ngfor:循环
    *ngif:判断
    *ngSwitch: ngSwitch,ngSwitchCase,ngSwitchDefault
    
    ```html
    style.属性 style.color="'red'",style.color="true?'red':'blue'",style.font-size.px="10" 
    

    *ngStyle:[ngStyle]="{‘color’:‘red’,‘font-size’:‘80px’}"

    *ngClass:[ngClass]="{‘box’:true,‘container’:false}"

    
    ngNonBindable:类似于转义字符,使用了之后表示范围内的{{}}不进行编译,显示字符串
    属性指定:
    
    [(ngModel)]:双向绑定
    
    
    服务
    .server.ts结束的文件
    组件开发步骤:
    3.引入组件,并声明
    4.在要使用组件的位置,通过seletor的名称来使用,
    
    
    
    
    表单:
    
    ```javascript
    重置为空   this.userForm.reset()
    重置为默认数据 this.userForm.reset({
    //默认数据
    name:"aa",
    pwd:"123456"
    })
    //或者先将对象定义在外面,然后在this.userForm.reset(对象名)
    user={
    name:"aa",
    pwd:"123456"
    }
    this.userForm.reset(this.user)
    设置值 setValue
    this.userForm.setValue({
    name:"aa",
    pwd:"123456"
    })
    //将表单里的值设置为设置的值,需要设置全部的值,只设置其中部分值,会报错
    设置部分值 patchValue
    this.userForm.setValue({
    pwd:"123456"
    })
    //当需要只设置部分值的时候,可以用这个
    

    组件交互

    1.父组件-子组件

    父组件
    export class 父组件名称 implements OnInit{
    name="aa"
    age="11"
    }
    


    子组件接收,@Input() 只能取值,不能监听值的变化

    export class 子组件名称 implements OnInit{
    @Input() name;    //    @Input('父组件里的参数名') 子组件使用的参数名   @Input("name") myName    
    @Input() age;
    }
    

    如果需要监听值的变化,需要使用set和get

    @Input()
    set age(age:number){
    	//设置age
    }
    get age(){
    	//获取age 
    }
    

    2.子组件到父组件

    父组件
    <child [name]="name" [age]="age" (myAgeChange)="ageChange()"></child>
    
    ageChange(){
    this.age=99
    }
    
    子组件
    <button (click)="changeFaAge()"></button>
    
    @Output() myAgeChange = new EventEmitter()
    
    changFaAge(){
      this.myAgeChange.emit()
    }
    

    3.父组件可以通过子组件的模板变量获取到子组件里的事件

    父组件
    父组件在挂在子组件的时候,给子组件加上模板变量 #child,
    然后在父组件中就可以通过子组件的模板变量名称直接获取子组件里的事件
    child.changeFaAge
    <button (click)="child.changeFaAge"></button>
    <child #child [name]="name" [age]="age" (myAgeChange)="ageChange()"></child>
    
    子组件
    <button (click)="changeFaAge()"></button>
    @Output() myAgeChange = new EventEmitter()
    
    changFaAge(){
      this.myAgeChange.emit()
    }
    4.父组件调用@viewChild获取子组件的事件
    @viewChild(子组件名称)
    private child:子组件名称  //child定义的变量名称
    controlChild(){
    	this.child.changFaAge()
    }
    

    组件样式
    在组件的元数据定义styles,styles可以接受一个包含css样式代码的字符串数组
    @Component({
    selector:“app-style”
    template:<h3>hello world</h3>,
    styleUrls:[‘css文件路径’]
    styles:[h3{font-size:20px;},*{color:red;}]
    //当styleUrls和styles同时存在的时候,可能只有下面的那个生效,
    //一般建议把样式写在css文件中,然后再通过styleUrls引入
    })

    视图的封装模式
    组件的css样式被封装进了自己的视图中,从而不会影响到应用程序的其他部分,
    通过在组件的元数据上设置视图封装模式,我们可以分别控制每个组件的封装模式
    可选的封装模式分为三种:原生(Native),仿真(Emulated),无(None).
    原生(Native)
    通过使用浏览器原生的shadow dom来为组件的宿主元素添加一个shadow dom,组件的样式
    包裹在shadow dom中,不进不出,外面的样式进不来,组件样式出不去
    仿真(Emulated)
    通过预处理css代码来模拟shadow dom的行为,把css样式局限在组件视图中,外面的全局样式可以进来,
    组件的样式出不去
    无(None)
    把css样式添加到全局中,从本质来说,跟组件的样式直接放在html文件一样,能进能出

    使用
    先引入ViewEncapsulation
    通过组件元数据中的encapsulation来设置
    encapsulation:ViewEncapsulation.Native

    :host伪类选择器
    修改宿主的样式,宿主:即子组件依赖的父组件

    子组件css文件
    :host{
    color:red;
    }
    使用这个,即这个子组件的父组件就会增加样式

    :host(.active){
    border:3px solid #fff
    }
    只有当宿主同时带有active css类的时候才会生效

    :host-context
    类似:host()形式使用在当前组件宿主元素的祖先节点查找css类
    直到找到文档的根节点为止,在与其他选择器组合使用时会非常有效
    :host-context(.italic) h3{
    color:red;
    }
    在当前组件宿主元素的祖先节点查找italic类,如果找到这个类名了,他里面的h3就会改变颜色

    生命周期

    使用步骤

    1.要使用哪个钩子函数,就先引入
    import {OnInit} from ...
    再实现
    export class 组件名 implements Onint...
    再使用
    ngOnInit(){
    ....
    }
    

    生命周期钩子函数

    ngOnChanges()

    当angular(重新)设置数据绑定输入属性时相应。该方法接受当前和上一属性值的simpleChanges对象,当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。

    ngOnInit()

    在angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。

    在第一轮ngOnchanges()完成之后调用,只调用一次

    ngDoCheck()

    检测,并在发生angular无法或不愿意自己检测的变化时作出反应,在每个angular变更检测周期中调用,在ngOnChanges()和ngOnInit()之后

    ngAfterContentInit()

    当把内容投影进组件之后调用,第一次ngDoCheck()之后调用,只调用一次,只适用于组件

    ngAfterContentChecked()

    每次完成被投影组件内容的变更检测之后调用,ngAfterContentInit()和每次ngDoCheck()之后调用,只适用于组件

    ngAfterViewInit()

    初始化完组件视图及其子视图之后调用。第一次ngAfterContentChecked()之后调用,只调用一次,只适合组件。

    ngAfterViewChecked()

    每次做完组件视图和子视图的变更检测之后调用。ngAfterViewInit()和每次ngAfterContentChecked()之后调用,只适合组件

    ngOnDestroy

    当angular每次销毁指令/组件之前调用并清扫,在这里反订阅可观察和分离事件处理器,以防内存泄漏

    管道

    在绑定之前,表达式的结果可能需要一些转换。例如,可能希望把数字显示成金额、强制文本变成大写,或者过滤列表以及进行排序。

    Angular管道对象这样的小型转换来说是个很方便的选择。

    管道是一个简单的函数,它接受一个输入值,并返回转换结果。

    常用的内置管道函数:

    DatePipe:事件管道,根据区域设置规则格式化日期值

    {{ value | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
    

    UpperCasePipe:大写管道,将文本转为全部大写

    LowerCasePipe:小写管道,将文本全部转为小写

    SlicePipe:首字母转换为大写

    CurrencyPipi:货币管道,将数字转换成货币字符串

    DeprecatedPercentPipe:百分比管道,将数字格式化为百分比

    TitleCasePipe :将文本转为标题大小写,单词首字母大写,其余部分小写

    JsonPipe:json管道,将值转换为json格式

    DecimalPipe:字符串管道,将数字转换为字符串

    它们用于模块表达式中,只要使用管道操作符| 就可以了

    管道操作符会把它左侧的表达式结果传给它右侧的管道函数,还可以通过多个管道串联表达式。

    <div class="alert alert-warning">
        <p>{{title|uppercase }}</p>
        <p>{{title|uppercase|lowercase }}</p>  //链式管道
        <p>{{this|json}}</p>
        <p>{{time|date:'yyyy-MM-dd'}}</p>
        <p>{{number|percent}}</p>
        <p>{{number|currency:'CNY'}}</p>
        <p>{{birthday| date:format }}</p>
      </div>
    
    export class AppComponent {
      title = 'app';
      name = '张三丰';
     
      time = new Date();
      number = 1.123;
     birthday = new Date(2017,11,11)
    flag = true;
    format(){
       return this.flag?'yyy-MM-dd':'MM-dd'
    }
      show(str: string) {
        str += '---测试';
        return str;
      }
    }
    
    

    自定义管道

    import { Pipe, PipeTransform } form '@angular/core'; //引入PipeTransform是为了继承transform方法
    
    
    @Pipe({ name: 'sexReform' }) //name属性值惯用小驼峰是写法, name的值为html中| 后面的名称
    
    
    export class SexReformPipe implements PipeTransform {
        transform(value: string, args?: any): string {
            switch(value){
                case 'male': return '男';
                case 'female': return '女';
                default: return '雌雄同体';
            } 
        }
    }
    
    //在组件中使用自定义管道
    // demo.component.ts
    export Class DemoComponent {
        sexValue = 'male';
    }
    
    // demo.component.html
    <span>{{ sexValue | sexReform }}</span>
    

    服务

    依赖注入:是一种编程模式,可以让类从外部源中获得它的依赖,而不必亲自创建它们。可以在两个地方注入依赖:

    创建服务快捷指令
    ng-server

    NgModule:全局注册;
    在根目录的module.ts文件里引入,然后在providers:[]里进行全局注册
    在组件中使用:
    1.在组件的component.ts文件里引入
    2.在OnInit里通过构造器进行依赖注入
    constructor(private 自定义变量:上方引入的服务名)
    3.在数据初始化ngOnInit里使用
    this.自定义变量.服务里的方法
    例:
    //新建的服务文件为user.service.ts
    import {Injectable} from '@angular/core';
    @Injectable()
    export class UserListService{
    users:[]=[
        {name:"zhangsan",age:10},
        {name:"zhangsana",age:11},
        {name:"zhangsanb",age:12},
        {name:"zhangsanc",age:13},
    	];
    getUser(){
    	return this.users
    	}
    }
    //在根目录app.module.ts文件里引入服务
    import {userservice} from './user.service.ts'
    //在项目根目录进行全局注册
    providers:[userservice]
    //在组件中使用服务
    //引入服务
    import {userservice} from './user.service.ts'
    //在OnInit里通过构造器进行依赖注入
    constructor(private userservice:userservice)
    //使用服务
    users=[]
    ngOnInit(){
      users =  this.userservice.getUser()
    }
    
    Component:局部注册
    //不需要在根目录引入和注册服务,直接在所需要使用的组件里注入
    //组件 user-list-components.ts
    //引入服务
    import {userservice} from './user.service.ts'
    @Compinent({
    selector:"user-list-components",
    providers:[userservice]
    })
    //在OnInit里通过构造器进行依赖注入
    constructor(private userservice:userservice)
    //使用服务
    users=[]
    ngOnInit(){
      users =  this.userservice.getUser()
    }
    

    HttpClient

    //1.根目录的module.ts里引入httpclient
    import {HttpClientModule} from '@angular/common/http';  
    
      imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule   //加载httpclient
      ],
      
      2.在组件的component.ts文件里导入httpclient,如果有post请求,还需要导入HttpHeaders
      import { HttpClient, HttpHeaders } from "@angular/common/http";
      
      3.在组件的构造器里定义一个http
      constructor(
        private http: HttpClient,
      ) { }
      
      4.设置headers
      headers = {
        Headers: new HttpHeaders({
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        }),
      };
      
      5.使用http请求
      
      this.http
          .get<any>("接口地址", {
            headers: {},
            params: {},
          })
          .subscribe((res) => {
          		//请求成功的回调
            }
          }),
          (err: any) => {
          //请求失败的回调
            console.log(err);
          };
    

    通过proxy代理设置跨域

    1.在项目的根目录里新增一个proxy.conf.json文件
    2.在proxy.conf.json里设置代理
    {
        "/api": {
          "target": "请求的接口地址",
          "secure": false,
          "changeOrigin": true
        }
      }
    
    3.package.json里配置启动代理
    "start": "ng serve --proxy-config proxy.conf.json",
    
    4.重新运行项目,就可以正常请求到接口了
    npm start
    

    路由

    {path:"home",compont:home}
    <a routerLink='home'></a>   //等同于vue的 router-link to=''
    <router-outlet></router-outlet>  //路由出口
    //重定向路由
    {path:"",redirectTo:"home",pathMath:"full"}
    //参数路由
    {path:"home/:id",compont:home}
    使用
    <a routerLink='home/12'></a>
    //在组件里获取参数,router-params.component.ts
    //先引入Docheck钩子函数和路由核心库
    import {DoCheck} from '@angular/core'
    import {Router,ParamMap} from '@angular/router'
    //获取参数snapshot.paramMap.get('路由里定义的变量名')
    export class RouterParamsComponent implements OnInit,DoCheck{
        id;
        constructor(private route:ActivatedRoute,private router:Router){}
        ngDoCheck():void{
            this.id = this.route.snapshot.paramMap.get('id')
        }
    }
    
    

    配置子路由

    {path:"home",compont:home,
    children:[
        {path:"homea",compont:homea},    //子路由地址:/home/homea
        {path:"homeb/:id",compont:homeb}, ///home/homeb/1
    ]}
    

    注意:子路由需要在他的父路由的html中添加路由出口,否则会跳转无响应

    函数路由

    //通过事件跳转路由
    this.router.navigateByUrl('路由地址')
    //还可以设置属性{skipLocationChange:true},实现页面跳转但路由不发生变化
    this.router.navigateByUrl('home',{skipLocationChange:true})
    //还可以使用navigate进行路由跳转
    this.router.navigate(['home'])
    //传参
    this.router.navigateByUrl('home/1')
    this.router.navigate(['home','1'])
    
    展开全文
  • Angular 教程:英雄之旅
  • 这两天心血来潮,跟着Angular官网的教程英雄之旅(https://angular.cn/tutorial)做了一遍,由于我自己电脑版本的node版本比较低,因此从开始构建就逐渐出现一些有关版本问题的坑点,这里记录一下,并给出解决方法,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,643
精华内容 7,857
关键字:

angular教程