使用Angular CLI快速创建Angular项目的一些基本概念和写法小结


Posted in Javascript onApril 22, 2018

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除了上面的自定义标签,还有别的:

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标签中定义好了<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']);      
    });    
  }  
......

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
jQuery ready函数滥用分析
Feb 16 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 #Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 #Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 #jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
javaScript产生随机数的用法小结
Apr 21 #Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 #Javascript
You might like
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python实现分页效果
2017/10/25 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
创建Django项目图文实例详解
2019/06/06 Python
python自动化之Ansible的安装教程
2019/06/13 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
pandas分批读取大数据集教程
2020/06/06 Python
美国家具网站:Cymax
2016/09/17 全球购物
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
工程部经理岗位职责
2013/12/08 职场文书
工会工作先进事迹
2014/08/18 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python