使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
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']); }); } ......
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- AI与自动驾驶
- python多线程学习笔记(超详细)
- Silverlight Telerik控件学习:RadTransitionControl
- Silverlight Telerik控件学习:弹出窗口RadWindow
- Andrew Ng机器学习课程笔记--week6(精度&召回率)
- Andrew Ng机器学习课程笔记--week5(下)
- silverlight: "[HtmlPage_NotEnabled] 调试资料字符串不可用"的解决
- Andrew Ng机器学习课程笔记--week5(上)
- Silverlight Telerik控件学习:带CheckBox复选框的树形TreeView控件
- Andrew Ng机器学习课程笔记--week4(神经网络)
- javascript:FF/Chrome 与 IE 动态加载元素的区别
- 腾讯云发布企业级微服务中间件TSF,助企业构建亿级互联网应用架构
- java学习:字符串比较“==”与“equals”的差异及与c#的区别
- 纯C语言程序员写的编程新手入门基础小游戏之最炫酷推箱子
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python中的with是测试常用到的资源打开利
- python批量运行py文件
- beautifulsoup的使用
- PWN:House Of Einherjar
- 2.用Python套用Excel模板,一键完成原亮样式
- Vmware Centos7 配置静态 ip 和 使宿主机和虚拟机互相 ping 通
- Hadoop安装成功之后,访问不了web界面的50070端口怎么解决?
- 2.1 注释
- 2.2 标识符
- 数据科学的软件工程技巧和最佳实践
- ntp 服务开机启动失败
- 4.8 this关键字
- 使用Pyppeteer进行gmail模拟登录
- 一个没法商用,但是好玩有趣的 Python 手绘图形库!
- 使用豆瓣源安装python包