Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular系列学习一:使用Angujar CLI快速理解Angular项目的一些基本概念和写法大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

作者:心叶
时间:2018-04-22 09:13

Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布,这里的快速开始就是基于这个命令。

开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI。

一:用命令行新建一个项目

@H_301_9@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时会用到它。

三:自定义组件

@H_301_9@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中注册

@H_301_9@import { NgModule } from '@angular/core'; import { MyComponent } from './my.component'; @NgModule({ declarations: [ MyComponent ] }) ......

现在已经注册好了,你就可以使用了,上面的例子的使用方法很简单,就是自定义一个@L_376_26@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'//多种选择器。

四:自定义服务

和组件一样,我们先来定义一个服务。

@H_301_9@import { Injectable } from '@angular/core'; export class DataFormat { id: number; info: String; } @Injectable() export class MyServ { getData(): DataFormat[] { return [ { id: 1,info: "Vue" } ]; } }

接着来注册它,服务和组件在注册上有点不同,我们现在先注册在主组件上面吧,认就是在arc/app/app.component.ts文件注册

@H_301_9@import { Component } from '@angular/core'; import { MyServ } from './my.service'; @Component({ providers: [MyServ] })

服务的使用也很简单,我们这里用构造函数来演示一下:

@H_301_9@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="/">或动态生成该元素的脚本。

我们先在src/app/app.module.ts中注册路由:

@H_301_9@...... import { RouterModule } from '@angular/router'; @NgModule({ declarations: [MyComponent,My2Component],imports: [ RouterModule.forRoot([ {path: 'my',component: MyComponent},{path: 'my2',component: My2Component} ]) ] ...... }) ......

使用就很简单了:

@H_301_9@<a routerLink="/my">toMycomp</a> <a routerLink="/my2">toMy2comp</a> <router-outlet></router-outlet>

点击toMycomp或者toMy2comp就会跳转对应的路由设置的组件了。

六:http

由于@angular/http库中的httpR_138_11845@odule保存着http相关的服务,需要先引入进来(这里是在src/app/app.module.ts中引入):

@H_301_9@import { httpR_138_11845@odule } from '@angular/http'; @NgModule({ imports: [httpR_138_11845@odule] }) ......

现在,http就是一个服务,下面简单演示一种用法

@H_301_9@...... import { http } from '@angular/http'; ...... constructor(private http: http) { http.get('assets/XXX.json').forEach(function (data) { console.log(data['_body']); }); } ......

大佬总结

以上是大佬教程为你收集整理的Angular系列学习一:使用Angujar CLI快速理解Angular项目的一些基本概念和写法全部内容,希望文章能够帮你解决Angular系列学习一:使用Angujar CLI快速理解Angular项目的一些基本概念和写法所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。