angular2入门

目录

2018-1-10

2019-3-31

2021-3-27

---

2018-1-10

0、首先，名称不叫angularJs,而是叫angular。因为１.0版本是用javascript写的，但2.0是用typescript写的，然后编译成javascript。其次，现在是4.0版本，不是２.0，但差别不大。angular是尖的意思，就是<, 即尖括号的尖。

1、中文官方网站的教程非常好。

补充1、需要自己安装nodejs

补充2、国内要换成淘宝镜像源，且默认使用cnpm包管理器，否则虽然大部分包会从淘宝下载，个别包如node-sass仍然从国外下载，且每次下载都失败。

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

cnpm install -g @angular/cli

cnpm install -g @angular/cli@1.0.0   //指定这个版本号，生成的"@angular/core": "^4.0.0"，当你的新版本出现问题时，比如有些依赖的包或者插件下载不下来时，可以用这个版本。

ng set --global packageManager=cnpm

然后创建一个angular工程

ng new my-app4

结果如下

    → @angular/cli@1.6.3 › common-tags@^1.3.1(1.7.1) (20:53:44)
√ All packages installed (967 packages installed from npm registry, used 2m, speed 13.45kB/s, json 830(1.7MB), tarball 0B)
Installed packages for tooling via cnpm.
Project 'my-app4' successfully created.

2019-3-31

cnpm install -g @angular/cli@1.6.4

/usr/lib/node-v10.15.3-linux-x64/lib/node_modules# ls
@angular  cnpm  npm

ng -v

can not find module '@angular=dekit/core'

rm -rf  /usr/lib/node-v10.15.3-linux-x64/lib/node_modules/@angular 

cnpm install -g @angular/cli@1.6.5  --- change a newer version  -- ok

Angular CLI: 1.6.5
Node: 10.15.3
OS: linux x64
Angular: 5.2.11

1、cnpm install jquery --save
   cnpm install bootstrap --save
2、在.angular-cli.json中增加
"scripts":[
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
]
"styles": [
        "styles.css","../node_modules/bootstrap/dist/css/bootstrap.css"
      ]
可以找到文件后，右键拷贝相对路径
3、cnpm install @types/jquery --save-dev
   cnpm install @types/bootstrap --save-dev

C:\Users\Administrator\my-app3>ng g component navbar
> my-app3@0.0.0 ng C:\Users\Administrator\my-app4
> 
  create src/app/navbar/navbar.component.html (25 bytes)
  create src/app/navbar/navbar.component.spec.ts (628 bytes)
  create src/app/navbar/navbar.component.ts (269 bytes)
  create src/app/navbar/navbar.component.css (0 bytes)
  update src/app/app.module.ts (398 bytes)

bootstrap的css没有生效，在chrome中查看http://127.0.0.1:4200/styles.bundle.js，发现里面是有bootstrap的。为什么没有生效呢，可能是我的nodejs版本太新了，记得安装bootstrap时，好像有提示说nodejs版本太新。

解决方法：在index.html中手工引入了css，即

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

3、发送http消息。（可以用jquery，也可以用httpclient，下面给出的是httpclient）

import {HttpClient} from '@angular/common/http';
onclick() {
    console.log('ddd');
    this.http.get('http://127.0.0.1:8888/abc/hello2',{responseType: 'text'})
      .subscribe(
      data => { console.log(data)}
      )
} //在组件中直接使用HttpClient，浏览器报错，说无法导入HttpClient。
//需要在app.module.ts中导入HttpClientModule
import {HttpClientModule} from '@angular/common/http';
@NgModule({
  imports: [
    HttpClientModule,
//浏览器报错变为跨域错误了
//修改服务端跨域设置。我的是springboot。
//修改后，就浏览器就ok了。
//关于跨域，补充几点。服务端不设置跨域时，客户端是可以访问服务端的，只是浏览器拿到服务端的响应头后，发现没有跨域访问的字段，就报错。curl不做这个检查，就可以正常打印结果。
> GET /abc/hello2 HTTP/1.1
> Host: 127.0.0.1:8888
> User-Agent: curl/7.46.0
> Accept: */*
> Origin:http://127.0.0.1:4200
>
< HTTP/1.1 200
< Content-Type: text/plain;charset=UTF-8
< Content-Length: 24
< Date: Mon, 29 Jan 2018 15:19:08 GMT
<

//注意，服务端开启跨域访问后，除非请求头中有Origin:这个字段，且跨域访问，应答头中才会有Access-Control-Allow-Origin
> GET /abc/hello2 HTTP/1.1
> Host: 127.0.0.1:8888
> User-Agent: curl/7.46.0
> Accept: */*
> Origin:http://127.0.0.1:4200
>
< HTTP/1.1 200
< Access-Control-Allow-Origin: *
< Vary: Origin
< Content-Type: text/plain;charset=UTF-8
< Content-Length: 24
< Date: Mon, 29 Jan 2018 15:19:53 GMT
<
{ [24 bytes data]

  onClick() {
    this.out.emit('nihao:' + Date());
    console.log('send ...');

    // this.http.get('/assets/contacts.json').subscribe(data => console.log(data) );

    const params = new HttpParams().set('id', '1').set('name', 'Windstorm');
    const headers = new HttpHeaders().set('X-CustomHeader', 'custom header value');

    this.http.get('/assets/contacts.json', {params, headers})
      .subscribe(data => {
        console.log(data);
        this.cc = <any[]> data;//<>用于强制类型转换
      });
  }

4、路由

//首先需要导入路由模块，配置路由表
import {RouterModule, Routes} from '@angular/router';
const appRoutes: Routes = [
  {path: 'abc', component: SearchComponent}, //注意，这里不是/abc
  {path: '**', component: FootComponent}  //这是默认路由，如果不配置，就不路由
];
@NgModule({

  imports: [
    RouterModule.forRoot(appRoutes, {enableTracing: true})
  ],
  exports: [RouterModule],
//然后可以写一个链接，点击后会把路由界面更新到router-outlet单元
<a routerLink="/abc" routerLinkActive="active">hhh</a>
<router-outlet></router-outlet>

//也可以同点击事件，触发路由，并更新router-outlet单元
<button (click)="onclick()">uu</button>
import { Router} from '@angular/router';
constructor(private router: Router, private http: HttpClient ){}
onclick() {
    console.log('ddd');
    this.router.navigate(['/abc']);
  }

<div>
  <div>图书名称：<input #bookname></div>
  <div>图书作者：<input #author></div>
  <div>出  版 社：<input #company></div>
  <div>发行日期：<input #year></div>

  <div><button  (click)="add(bookname.value, author.value, company.value, year.value )" routerLink="/">
    添加</button>
    <button routerLink="/">放弃</button></div>
</div>

  add(bookname, author, company, year) {
    console.log('hh ', bookname, author, company, year);
    // this.router.navigateByUrl('/'); //在按钮中用routerLink也可以
  }

<form #myform="ngForm" (ngSubmit)="tt(myform.value)">
  <input ngModel name="user" #vv>
  <input ngModel name="pass">
  <button type="submit">commit</button>
  <button type="reset">reset</button>
</form>
<p>{{myform.value|json}}</p>
<p>{{vv.value}}</p>

export class LoginformComponent{
  tt(s: String) {
    console.log(s);
  }
}

5、html中展示代码

<ol style="color: #b3b6b7">  
  <li><pre style="color: blueviolet;margin:  0px ;">    import xx</pre></li>  
  <li>import xx</li>  
  <li>import xx</li>  
</ol> 

6、模板

最常见的，动态修改样式，比如点中菜单，tab页，需要增加一个class。

可以用 [class.bbb]="true"。如果是增加多个class，可以写多个[class.aaa]=，也可以用[ngClass]=，支持数组，对象等，可以参考angular的api说明。

  template: `
    <p [class.aaa]="1==1" [class.bbb]="true">navbar works! {{name}}</p>
    <p [ngClass]="{H:true}">555</p>
    <p [ngClass]="currentClass">888</p>
    <div [style.font-size]="'x-large'">This div is x-large or smaller</div>
    <button [disabled]="false" [textContent]="name">Cancel is disabled</button>
  `,

此外，属性也可以设置[disabled] [textContent] 这种内置属性，或自定义属性，如[hero]="currentHero"
 

7、父子组件通信 input output

https://blog.csdn.net/u014084065/article/details/53897905

gaofeng2.component.ts
import { Component, OnInit , Input, Output , EventEmitter} from '@angular/core';

@Component({
  selector: 'app-gaofeng2',
  templateUrl: './gaofeng2.component.html',
  styleUrls: ['./gaofeng2.component.css']
})
export class Gaofeng2Component implements OnInit {
  @Input() name2 = '88' ;
  @Output() out = new EventEmitter();
  constructor() { }

  ngOnInit() {
  }
  onClick(){
    this.out.emit('nihao:' + Date())
    console.log("send ...")
  }

gaofeng2.component.html
<p>
  gaofeng2 works! {{name2}}
</p>
<button (click)="onClick()">ppp</button>

gaofeng.component.html
<p>
  gaofeng works!{{rr}}
</p>
<app-gaofeng2 [name2]="'gaomingyang'" (out)="notifyme($event)"></app-gaofeng2>

gaofeng.component.ts
import { Component, OnInit } from '@angular/core';

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

  rr = "uu"
  ngOnInit() {
  }
  notifyme(event){
    console.log(event)
    this.rr = event
  }

}

Angular4 组件通讯方法大全 https://www.cnblogs.com/huangenai/p/7246651.html

9、除了每次使用cli命令创建工程外，也可以拷贝一个现有的工程。

然后调用 npm install (cnpm instal)来安装依赖的包。

最后启动程序 npm start (cnpm start)

可能会出现Cannot find module '@angular-devkit/core' 错误

可以在工程目录下执行 npm i --save-dev @angular-devkit/core（cnpm i --save-dev @angular-devkit/core）

我的工程，执行这个命令后，问题就解决了。如果没有解决，可以执行下面的命令

npm uninstall -g angular-cli

npm install -g @angular/cli@latest 

 

2021-3-27

1、安装新版本的nodejs （并设置淘宝镜像 npm config set registry https://registry.npm.taobao.org）

2、安装新版本的vscode

3、安装angular   npm install -g @angular/cli

     查看版本  ng --version

4、创建工程 ng new myapp

5、下载依赖包失败了，报 

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at

反复安装  npm install  第三次终于成功了

6、运行  npm start

      启动成功后，打开页面 http://localhost:4200/

7、开发一个小例子 参考https://webgl.blog.csdn.net/article/details/105142910