Angular系列学习一：使用Angujar CLI快速理解Angular项目的一些基本概念和写法

摘要：开始项目前，你需要先安装和，然后执行安装。一用命令行新建一个项目执行上面的命令就会自动新建一个项目，并启动了项目。

作者：心叶
时间：2018-04-22 09:13

Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布，这里的快速开始就是基于这个命令。

开始项目前，你需要先安装node和npm，然后执行npm install -g @angular/cli安装Angular CLI。

ng new newApp --skip-install

cd newApp

cnpm install

ng serve --open

执行上面的命令就会自动新建一个Angualr项目，并启动了项目。

其中--skip-install表示node包先不安装，我们接着使用cnpm install安装会快多了。

现在来看看ng命令帮助我们生成了什么，也就是项目的目录结构，里面都是干什么的，先有个大致了解，你可以不知道全部，不过先记住下面几个个人感觉重要的：

1.src：应用代码存放的地方；

2.src/app：你的代码主要存放的地方，这样说也许不合适，不过你开发的时候，大部分时间都是在修改这里的代码；

3.src/assets：图片等存放的地方，构建时会复制到发布包里；

4.src/main.js：你基本不会修改它，它是程序的主入口；

5.src/styles.css：特别用的样式写在对应的地方，后面会说，对于公共的样式就会写在这里；

6.karma.conf.js：给Karma的单元测试配置，当运行ng test时会用到它。

import { Component } from "@angular/core";

@Component({

    selector: "my-comp",
    
    template: "
ID:{{row.id}}  INFO:{{row.info}}
",
    
    styles: [`ul{background-color: antiquewhite;padding-left: 10px;list-style: none;}`]
    
})
export class MyComponent {

    dataList = [
        { id: 1, info: "Angular" },
        { id: 2, info: "React" },
        { id: 3, info: "Vue" }
    ];
    
}

上面就已经定义好了一个非常简单的组件，不过在使用前，你还需要在模块中定义，此时就是src/app/app.module.ts中注册：

import { NgModule } from "@angular/core";

import { MyComponent } from "./my.component";

@NgModule({

    declarations: [
        MyComponent
    ]
    
})
......

现在已经注册好了，你就可以使用了，上面的例子的使用方法很简单，就是自定义了一个标签my-comp，和普通的div的用法一模一样。

需要注意的是，为了方便查看，在注册的例子中我去掉了无关的代码，实际情况还好有包括启动，别的组件，服务等的注册，你可以看看命令行自动生成的别的指令，这里主要还是说明更重要的东西，下同。

类似AngularJS，Angular的selector除了上面的自定义标签，还有别的：

1.selector: "element-name"//自定义标签选择器；

2.selector: ".class"//样式选择器；

3.selector: "[attribute]"//属性选择器；

4.selector: "[attribute=value]"//属性值选择器；

5.selector: ":not(sub_selector)"//取反选择器；

6.selector: "selector1, selector2"//多种选择器。

和组件一样，我们先来定义一个服务。

import { Injectable } from "@angular/core";

export class DataFormat { 
    id: number; 
    info: string; 
}

@Injectable()
export class MyServ {

    getData(): DataFormat[] {
        return [
            { id: 1, info: "Angular" }, 
            { id: 2, info: "React" }, 
            { id: 3, info: "Vue" }
        ];
    }
    
}

接着来注册它，服务和组件在注册上有点不同，我们现在先注册在主组件上面吧，默认就是在arc/app/app.component.ts文件中注册：

import { Component } from "@angular/core";

import { MyServ } from "./my.service";

@Component({

    providers: [MyServ]
    
})

服务的使用也很简单，我们这里用构造函数来演示一下：

import { MyServ } from "./my.service";
......

export class MyComponent {

    dataList: any[];
    
    constructor(private demoService: MyServ) {
    
      this.dataList = this.demoService.getData();
      
    }
    
}

还记得自定义组件的代码吗？我们就在其中演示了服务的用法，上面只给出了修改的部分代码。

我们这里给出路由的一个简单用法，具体的细节和上面的类似，会多带带再去讨论，这篇文章的目的就是快速入门使用。

为了方便演示，我们默认已经定义好了二个组件：MyComponent和My2Component。

首先需要确定index.html页面的head标签中定义好了或动态生成该元素的脚本。

我们先在src/app/app.module.ts中注册路由：

......
import { RouterModule } from "@angular/router";

@NgModule({

    declarations: [MyComponent,My2Component],
    
    imports: [
    
        RouterModule.forRoot([
        
            {path: "my",component: MyComponent},
            
            {path: "my2",component: My2Component}
            
        ])
    ]
    ......
})
......

使用就很简单了：

toMycomp

toMy2comp

点击toMycomp或者toMy2comp就会跳转对应的路由设置的组件了。

由于@angular/http库中的HttpModule保存着http相关的服务，需要先引入进来（这里是在src/app/app.module.ts中引入）：

import { HttpModule }    from "@angular/http";

@NgModule({

    imports: [HttpModule]
    
})
......

现在，http就是一个服务，下面简单演示一种用法：

......
import { Http } from "@angular/http";
......

    constructor(private http: Http) {
    
        http.get("assets/XXX.json").forEach(function (data) {
        
            console.log(data["_body"]);
            
        });
        
    }
    
......