精华内容
下载资源
问答
  • angular入门教程
    2020-04-20 20:18:58

    骑士李四记录:

    1.Augular介绍:

    Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实。
    Angular 的基本构造块是 NgModule,它为组件提供了编译的上下文环境。 NgModule 会把相关的代码收集到一些功能集中。
    Angular 应用就是由一组 NgModule 定义出的。 应用至少会有一个用于引导应用的根模块,通常还会有很多特性模块。(每个 Angular 应用都有一个根模块,通常命名为 AppModule。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多特性模块。)
    AngularJS 通过指令 ng-directives 扩展了 HTML。

    2.NgModule 简介

    Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。
    每个 Angular 应用都至少有一个 NgModule 类,也就是根模块,它习惯上命名为 AppModule,并位于一个名叫 app.module.ts 的文件中。引导这个根模块就可以启动你的应用。
    NgModule 和 JavaScript 的模块:
    NgModule 系统与 JavaScript(ES2015)用来管理 JavaScript 对象的模块系统不同,而且也没有直接关联。 这两种模块系统不同但互补。你可以使用它们来共同编写你的应用。
    javaScript 中,每个文件是一个模块,文件中定义的所有对象都从属于那个模块。 通过 export 关键字,模块可以把它的某些对象声明为公共的。 其它 JavaScript 模块可以使用import 语句来访问这些公共对象。

    3.Angular的生命周期

    生命周期函数通俗的讲就是组件创建、组件更新、组件销毁的时候会触发的一系列的方法。
    当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些 生命周期钩子方法。
    每个接口都有唯一的一个钩子方法,它们的名字是由接口名再加上ng前缀构成的,比如OnInit接口的钩子方法叫做ngOnInit。
    生命周期钩子的作用及调用顺序
    ngOnChanges - 当数据绑定输入属性的值发生变化时调用
    ngOnInit - 在第一次 ngOnChanges 后调用
    ngDoCheck - 自定义的方法,用于检测和处理值的改变
    ngAfterContentInit - 在组件内容初始化之后调用
    ngAfterContentChecked - 组件每次检查内容时调用
    ngAfterViewInit - 组件相应的视图初始化之后调用
    ngAfterViewChecked - 组件每次检查视图时调用
    ngOnDestroy - 指令销毁前调用

    待完成。。

    更多相关内容
  • angular基础教程

    2021-09-08 16:33:30
    前端angular基础实战教程。前端三大框架之首,angular0基础教程,基础指令+pipe+service+module+directive等基础分解,学会小白也能轻松玩转React。
  • 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入门
  • Angular入门教程1

    2022-08-08 21:21:20
    1.搭建环境1.1 安装NodeJs安装Nodejs:sudo apt install curl浏览器打开 2-file-upload:https://gith
  • 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入门教程

    2021-04-12 07:52:45
    # @Component 表示是angular的组件,使用组件前必须先引入 import { Component } from '@angular/core'; @Component export class ServerComponent{ } # 对象选择器,selector 选择器可以自定义,templateUrl 模板...

    安装

    
    # 前提安装了 node 和 npm
    
    # 各种版本列表,安装过程可能node 和npm 版本问题,降低一下版本就可以
    https://github.com/angular/angular-cli/tags?after=v10.1.0-next.6
    卸载: npm uninstall -g angular-cli
    清空缓存后继续执行直至成功:npm cache verify
    
    指定安装版本:npm install -g @angular/cli@8.0.3
    
    安装最新版本:npm install -g @angular/cli
    
    # 不能用快捷键,随便找个D盘或者E目录
    E:\project\angular>ng version
    
         _                      _                 ____ _     ___
        / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
       / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
      / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
     /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                    |___/
    
    
    Angular CLI: 9.1.12
    Node: 15.5.0
    OS: win32 ia32
    
    Angular:
    ...
    Ivy Workspace:
    
    Package                      Version
    ------------------------------------------------------
    @angular-devkit/architect    0.901.12
    @angular-devkit/core         9.1.12
    @angular-devkit/schematics   9.1.12
    @schematics/angular          9.1.12
    @schematics/update           0.901.12
    rxjs                         6.5.4

     执行 nv version ,ng 不是内部或外部命令

    Angular运行时报错:ng 不是内部或外部命令
    一、运行命令ng -v时报错,添加环境变量
    此电脑-属性-高级系统设置-环境变量-Path
    添加:node_global

    运行命令ng -serve时报错,添加环境变量
    此电脑-属性-高级系统设置-环境变量-Path
    添加:node-cache

     

     

    # 创建项目
    ng new 项目名称
    创建完执行:npm install
    # 只是声明了一个普通的类
    export class ServerComponent{
    
    }
    # @Component 表示是angular的组件,使用组件前必须先引入
    import { Component } from '@angular/core';
    
    @Component
    export class ServerComponent{
    
    }
    
    # 对象选择器,selector 选择器可以自定义,templateUrl 模板文件
    @Component({
      selector: 'server-root',
      templateUrl: 'server.component.html',
    })
    
    # 在app.module.ts文件下声明组件, import 的下组件,ServerComponent 并注册
    import {ServerComponent } from './server/server.component'
    
    @NgModule({
      declarations: [
        AppComponent,
        ServerComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    
    # 调用组件: 直接在xx.xx.html中 <server-root></server-root> 写入选择器的名字就可以。
    # 比如我想在 app.component.html 中使用,直接在页面中:<server-root></server-root> 写这个选着器的名字就可以。
    selector: 'server-root'
    
    # 使用CLI组件创建 组件方便快捷,不用手动创建了。命令:ng g c service
    # service.component.spec.ts 这是一个测试文件。
    F:\web-project\ang\src\app>ng g c service
    CREATE src/app/service/service.component.html (22 bytes)
    CREATE src/app/service/service.component.spec.ts (633 bytes)
    CREATE src/app/service/service.component.ts (279 bytes)
    CREATE src/app/service/service.component.css (0 bytes)
    UPDATE src/app/app.module.ts (562 bytes)
    
    F:\web-project\ang\src\app>
    
    # 使用CLI创建的已经帮我们注册好了,不用手动引入和注册了。
    import { ServiceComponent } from './service/service.component'
    
    @NgModule({
      declarations: [
        AppComponent,
        ServerComponent,
        ServiceComponent
      ],
    # 属性,文本绑定
    export class ServerComponent{
      title = '这是一个标题'
    
    }
    
    <p>{{title}}</p>
    
    # 条件渲染
    # 定义flag 为boolean类型
    export class ServerComponent{
      title = '这是一个标题';
      public flag:boolean  = true;
    }
    <h1 *ngIf = 'flag'>是否展示</h1>
    
    # 列表渲染
    export class ServerComponent{
      list = ['张三','李四','王五'];
    }
    
    <ul>
        <li *ngFor = "let item of list">
          {{item}}
        </li>
    </ul>
    
    # 表单双向绑定,安装和导入一下就可以使用了
    cnpm i @angular/forms
    
    import { FormsModule } from '@angular/forms';
    
      imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    
    # 表单使用,页面就会有一个默认值
    msg = '这是一个默认值';
    <input type="text" [value]="msg"  />
    
    # 动态输入
    clickMessage = '';
    
    onKeyFun(event:any) {
        this.clickMessage = event.target.value ;
    }
    <div>
      <input type="text"  (keyup)="onKeyFun($event)">
      <input type="text" [value]="clickMessage"  />
    </div>
    
    # 使用 ngModel 实现动态输入
    <div>
      <input type="text"  [(ngModel)]="clickMessage">
      <input type="text" [value]="clickMessage"  />
    </div>
    
    # 配置路由
    # 正这个文件中配置
    app-routing.module.ts
    
    import { AppComponent } from './app.component';
    import {ServerComponent } from './server/server.component';
    import { ServiceComponent } from './service/service.component';
    import { ListComponent } from './list/list.component';
    import { SubformComponent } from './subform/subform.component';
    
    const routes: Routes = [
      {path: 'sub/form',component: SubformComponent},
      {path: 'sub/ser',component: ServerComponent},
      ];
    # 动态的挂在在根组件下面
    <h1>我是根组件:下面会显示不同路由的组件</h1>
    <router-outlet></router-outlet>
    
    # 页面点击动态跳转
    <h1>我是根组件</h1>
    <ul><a routerLink='sub/form'>首页</a></ul>
    <ul><a routerLink='sub/ser'>server</a></ul>
    <router-outlet></router-outlet>
    
    
    # 使用模板
    @Component({
      selector: 'server-root',
      templateUrl: 'server.component.html',
    })
    页面中:<server-root></server-root>
    
    # 匹配不到路由的时候跳转的路径
    const routes: Routes = [
      {path: 'sub/form',component: SubformComponent},
      {path: 'sub/ser',component: ServerComponent},
      //匹配不到的时候跳转到 sub/ser 这个路径
      {path: '**',redirectTo: 'sub/ser'},
      ];
    
    # 点中进行 Active 就是红色的
    <h1>我是根组件</h1>
    
    <ul><a routerLink='sub/form' routerLinkActive="active" >首页</a></ul>
    <ul><a routerLink='sub/ser' routerLinkActive="active">server</a></ul>
    <router-outlet></router-outlet>
    .active{
      color: red
    }
    
    # 父子路由
    const routes: Routes = [
      {path: 'sub/form',component: SubformComponent},
      {path: 'sub/ser',component: ServerComponent},
    
      {path: 'news/list',component: NewsComponent,
        children:[
           {path: 'content',component: NewscontentComponent},
        ]
      },
    
      ];
     // 一定要父组件加 : <router-outlet></router-outlet> 就实现了组件的引用
     <h2> 新闻列表</h2>
     <div>
       <ul>
         <li *ngFor = "let item of newsId">
           <a routerLink='content'>跳转新闻详情:{{item}} </a>
         </li>
       </ul>
     </div>
     <router-outlet></router-outlet>
    

    展开全文
  • Angular 基础教程(7.0)[大漠穷秋]
  • Angular 基础教程(7.0)

    千次阅读 2018-11-26 13:17:42
    课程亮点 按照初学者的学习路线规划内容 ...《Angular 初学者快速上手教程》课程发布已有一年,期间收到了很多读者的留言,这里摘录几条,仅供参考。为了不打搅这些朋友,部分采用了匿名。 课程背景 本...
  • angular 入门教程1

    2019-09-28 02:45:49
    当然这里说的都是最基础的用法了。后面我会继续讲到一些实际项目中的一些用法包括路由和注入。服务调用等等。   看到这相信你对于angular的整体和基本的使用方式都有了一定的理解 了。时间有限第一篇的教程就写...
  • Angular中进行单体测试,使用的是Jasmine,这篇文章将就ng new demo所生成出来的代码为例进行说明Angular中是如何使用Jasmine进行单元测试的。
  • Angular 2 教程

    2020-12-14 03:12:46
    Angular 2 教程 Angular2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。 Angular2 是 Angular 1.x 的升级版本,性能上...TypeScript 入门教程 Angular2.x与Angular1.x 的区别 Angular2.x
  • 也许是全网最全的 Angular 新手入门指南

    千次阅读 多人点赞 2022-05-22 22:57:16
    文章目录Angular概述Angular程序架构Angular优势@angular/cli脚手架文件加载顺序项目目录结构Angular模块@NgModule 装饰器内置模块自定义模块模块的tipsAngular组件@Component 元数据数据绑定脏值检测父子组件通讯...
  • Angular2 权威教程

    2019-02-21 05:54:13
    本文档是 文字版 的angular2教程。所以可以很方便的做笔记和摘录。angualr2跟angualrJS相差非常大,和后面版本的angular是同一套基础,所以尽管不是最新的angular7,但是同样可以作为教程学习。
  • 在前一篇文章中介绍了Jasmine框架在Angular中的使用,而无法避开的另外一个部分就是Karma,这篇文章将继续通过demo应用来介绍Karma在Angular中的运用。
  • 获取鼠标事件 在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入 $event 变量,...import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-simple-
  • angular2入门教程,基于官网案例整合而成。
  • Angular Cli提供ng test和ng e2e进行单元测试,在这篇文章中首先通过具体的示例来直观感受一下使用方式。
  • 学习过程中所写的Demo_GitHub——学习Angular——浅度学习Demo 官网:https://angular.cn/(官网是最好的老师哦,追求技术的大神可以继续深入啦) Angular前言(跳过即可,自勉而已) 一写博客,不例外的喜欢啰嗦...
  • 在GitChat看到广受欢迎的Angular课程迭代更新了更棒的版本,推荐给有需要的你。目录如下:感兴趣的小伙伴,可以识别下图二维码购买,原价 69 ,目前特价 49 ,...
  • Angular *NgFor - angular 基础教程

    万次阅读 2018-02-02 14:18:43
    Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。 使用 ngFor 指令 更新 MailService 服务 import { Injectable } from '@angular/core'; @Injectable() export class Mai
  • Angular Material是包含Navigation/Dashboard/Table三种图形类型,这篇文章中将会了解一些其使用的方式。 准备:安装Material 进入到上篇文章创建的demo2,使用ng add进行安装 liumiaocn:demo2 liumiao$ pwd /...
  • 本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一、初步了解模块和组件 之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件。...
  • '@angular/core' ; @Injectable () export class MailService { message: string = '该消息来自MailService' ; constructor ( ) { } } 使用服务 import { Component } from '@...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,329
精华内容 4,531
关键字:

angular入门教程