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: '<ul><li *ngFor='let row of dataList'>ID:{{row.id}} INFO:{{row.info}}</li></ul>',
- 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 除了上面的自定义标签, 还有别的:
- selector: 'element-name'// 自定义标签选择器;
- selector: '.class'// 样式选择器;
- selector: '[attribute]'// 属性选择器;
- selector: '[attribute=value]'// 属性值选择器;
- selector: ':not(sub_selector)'// 取反选择器;
- 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 标签中定义好了 < base href="/" rel="external nofollow"> 或动态生成该元素的脚本.
我们先在 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}
- ])
- ]
- ......
- })
- ......
使用就很简单了:
- <a routerLink="/my">toMycomp</a>
- <a routerLink="/my2">toMy2comp</a>
- <router-outlet></router-outlet>
点击 toMycomp 或者 toMy2comp 就会跳转对应的路由设置的组件了.
六: HTTP
由于 @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']);
- });
- }
- ......
来源: http://www.jb51.net/article/138699.htm