使用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 confirm选择判断
Oct 18 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
js实现简单音乐播放器
Jun 30 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
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
jQuery中map函数的两种方式
2017/04/07 jQuery
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Vue实现base64编码图片间的切换功能
2019/12/04 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
pycharm的python_stubs问题
2020/04/08 Python
如何利用Python 进行边缘检测
2020/10/14 Python
如何删除一个表里面的重复行
2013/07/13 面试题
Java基础知识面试题
2014/03/25 面试题
社区禁毒工作方案
2014/06/02 职场文书
个人委托书
2014/07/31 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
婚前保证书范文
2015/02/28 职场文书
写给导师的自荐信
2015/03/06 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
原告代理词范文
2015/05/25 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers