angular2入门

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/[email protected]   //指定这个版本号，生成的"@angular/core": "^4.0.0"，当你的新版本出现问题时，比如有些依赖的包或者插件下载不下来时，可以用这个版本。

ng set --global packageManager=cnpm

然后创建一个angular工程

ng new my-app4

结果如下

    → @angular/[email protected] › 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/[email protected]

/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/[email protected]  --- 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
> [email protected] 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，即

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 =  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单元
hhh


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

  
图书名称：
  
图书作者：
  
出  版 社：
  
发行日期：

  

    添加
    放弃


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

  
  
  commit
  reset

{{myform.value|json}}
{{vv.value}}

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

 

 

5、html中展示代码

 

 

  
  
    import xx
  
  
import xx
  
  
import xx
  
 

6、模板

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

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

  template: `
    
navbar works! {{name}}
    
555
    
888
    
This div is x-large or smaller
    Cancel is disabled
  `,

此外，属性也可以设置[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

  gaofeng2 works! {{name2}}

ppp

gaofeng.component.html

  gaofeng works!{{rr}}



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