使用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 相关文章推荐
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
vue通过过滤器实现数据格式化
Jul 20 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 学习资料零碎东西
2010/12/04 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
javascript document.referrer 用法
2009/04/30 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
详解React项目中碰到的IE问题
2019/03/14 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
以Python的Pyspider为例剖析搜索引擎的网络爬虫实现方法
2015/03/30 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
python for 循环获取index索引的方法
2019/02/01 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
html中两种获取标签内的值的方法
2022/06/16 jQuery