Angular环境搭建及简单体验小结

Angular介绍

Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。
根据项目数统计angular(1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x)是现在网上使用量最大的框架。

Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。

关于Angular版本,Angular官方已经统一命名Angular 1.x统称为Angular JS;Angular 2.x及以上统称Angular;

目前2019年12月25日angular最新版本angular9.x。根据官方介绍,Angular每过几个月就会更新一个版本。Angular2.x以后所有的Angular版本用法都是一样的,此教程同样适用于Angular7.x 、Angular8.x、Angular9.x 以及未来的其它版本…。

学习Angular必备基础
必备基础:html 、css 、js、es6、ts

一、安装开发环境

npm install -g typescript
npm install -g @angular/cli

二、创建hello-world项目

创建项目

ng new angular2-hello-world

查看新建项目的目录结构

cd angular2-hello-world
sudo apt install tree
tree -F -L 1
.
├── angular.json
├── karma.conf.js
├── node_modules/
├── package.json
├── package-lock.json
├── README.md
├── src/
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

2 directories, 8 files

查看src目录里的结构

cd src
tree -F

启动应用,可以在http://localhost:4200查看运行结果

ng serve

创建hello-world组件

ng-generate component hello-world

在hello-world.component.ts中定义新的组件

//导入依赖
import { Component, OnInit } from '@angular/core';

//通过注解声明控件的选择器和相关的文件url
@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})

//组件的数据模型
export class HelloWorldComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

在hello-world.component.html中定义模板

<p>mango, hello-world works!</p>

为了使用新增加的组件,我们把标签添加到app.component.html中。

<h1>
  <app-hello-world></app-hello-world>
</h1>

执行 ng serve查看执行效果

三、创建展示用户的user-item指令

生成指令组件

mango@mango:~/angular2-hello-world$ ng generate component user-item
CREATE src/app/user-item/user-item.component.css (0 bytes)
CREATE src/app/user-item/user-item.component.html (24 bytes)
CREATE src/app/user-item/user-item.component.spec.ts (641 bytes)
CREATE src/app/user-item/user-item.component.ts (286 bytes)
UPDATE src/app/app.module.ts (585 bytes)

为组件声明并初始化一个name字段

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
  name: string,

  constructor() {
    this.name = 'mango';
  }

  ngOnInit(): void {
  }

}

在模板中显示变量name的值

<p>
    {{name}} welcome  into Angular world.
</p>

将app-user-item添加到app.component.html中,查看浏览器执行结果。

四、创建用户列表user-list指令

创建新组件

mango@mango:~/angular2-hello-world$ ng generate component user-list
CREATE src/app/user-list/user-list.component.css (0 bytes)
CREATE src/app/user-list/user-list.component.html (24 bytes)
CREATE src/app/user-list/user-list.component.spec.ts (641 bytes)
CREATE src/app/user-list/user-list.component.ts (286 bytes)
UPDATE src/app/app.module.ts (677 bytes)

在组件中声明并初始化names数组

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent implements OnInit {
  names: string[];
  constructor() {
    this.names = ['mango', 'pear', 'grap', 'apple'];
  }

  ngOnInit(): void {
  }

}

在组件的模板中递归遍历names数组

<ul>
    <li *ngFor="let name of names">Hello {{name}}</li>
</ul>

将组件添加app.component.html中,查看浏览器执行结果。

五、组合使用user-item和user-list

修改user-item的name参数使用外部输入

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.css']
})
export class UserItemComponent implements OnInit {
  @Input()
  name!: string;

  constructor() { 

  }

  ngOnInit(): void {
  }

}

修改user-list的模板

<ul>
    <app-user-item *ngFor="let name of names" [name]="name"></app-user-item>
</ul>

保存查看浏览器执行情况。

六、启动过程分析

ng会首先从angular.json中查找程序的main入口为src/main.ts

{
            "outputPath": "dist/angular2-hello-world",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }

查看main.ts文件,发现启动的Module是AppModule,位于app/app.module.ts中

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

在app.module.ts中可以看到,通过NgModule标注声明了本模块中的组件以及依赖的外部Module及作为顶层组件启动的AppComponent;

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';
import { UserItemComponent } from './user-item/user-item.component';
import { UserListComponent } from './user-list/user-list.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent,
    UserItemComponent,
    UserListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

以上就是Angular环境搭建及简单体验的详细内容,更多关于Angular环境搭建的资料请关注我们其它相关文章!

(0)

相关推荐

  • AngularJS入门教程之学习环境搭建

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

  • Angular2从搭建环境到开发步骤详解

    Angular-CLI 说到 cli 大家不陌生,每出一个框架都会有对应的 cli ,俗称脚手架.angular2 本身提供了起步项目 angular2-quickstart,我尝试了一下,发现不是很好用,其它的大部分扩展需要自行安装,之后看了一下 angular-cli 部署简单易用,还提供了快捷搭建项目的目录. 安装 首先,最好先升级 node 到 6.x 可以避免 node 版本过低带来的不必要的麻烦. npm install -g angular-cli 用法 ng --help 查看所

  • Angular4学习笔记之准备和环境搭建项目

    写在前面的废话1 我用angular的时候还是1.x,属于代码写的很反人类但是angular2还没出的蛮荒年代.我本身是从j2ee转到Android的工程师,也是就是说,我的日常开发语言是Java.突然切换到JavaScript那真是难受的像北极熊同企鹅讲话,更何况后来嫌webstorm太卡而用起了没有提示的sublime(嗯,终于治好了多年顽疾的"从不记函数名症候群").经过了一段痛苦不堪的撞墙经历后,总算是开始习惯了. 但我还是想大吼一声,JavaScriptWCNM. 发泄完了说

  • 初学者AngularJS的环境搭建过程

    AngularJS是什么? AngularJS是一个开源Web应用程序框架.它最初是由MISKO Hevery和Adam Abrons于2009年开发.现在是由谷歌维护 AngularJS特性 AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA). AngulajJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型 - 视图 - 控制器)的方式来编写客户端应用程序. AngularJS写的应用都是跨浏览器兼容.AngularJS使

  • AngularJs入门教程之环境搭建+创建应用示例

    本文简单讲述了AngularJs环境搭建+创建应用的方法.分享给大家供大家参考,具体如下: 概述 AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单.更高效.它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致.本系列文章將以实际的案例简单的介绍AngularJs的特性和用

  • AngularJS整合Springmvc、Spring、Mybatis搭建开发环境

    最近想学习AngularJS的使用,网上搜了一圈后,折腾了半天解决bug后,成功使用AngularJS整合Springmvc.Spring.Mybatis搭建了一个开发环境.(这里Spring使用的版本是4.0.6,Mybatis版本是3.2.5,AngularJS的版本是1.0.3) 第一步:创建一Maven项目,在pom.xml下添加需要的包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="

  • Angular环境搭建及简单体验小结

    Angular介绍 Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中. 根据项目数统计angular(1.x .2.x .4.x.5.x.6.x.7.x .8.x.9.x)是现在网上使用量最大的框架. Angular基于TypeScript和react.vue相比 Angular更适合中大型企业级项目. 关于Angular版本,Angular官方已经统

  • Java Spring开发环境搭建及简单入门示例教程

    本文实例讲述了Java Spring开发环境搭建及简单入门示例.分享给大家供大家参考,具体如下: 前言 虽然之前用过Spring,但是今天试着去搭建依然遇到了困难,而且上网找教程,很多写的是在web里使用Spring MVC的示例,官方文档里的getting start一开始就讲原理去了(可能打开的方法不对).没办法,好不容易实验成功了,记下来免得自己以后麻烦. 添加依赖包 进入spring官网,切换到projects下点击 spring framework.官网上写的是以maven依赖的形式写

  • Docker环境搭建的简单方法

    首先了解一下Docker是什么? Docker是一个容器引擎,可以用来部署应用.通过 Docker,可以实现快速交付,测试和部署代码,可移植性强. Docker主要包括3个基本概念: 镜像.容器.仓库 镜像:是用于创建 Docker 容器的模板,类似于我们装虚拟机的时候下载的windows或者linux系统镜像. 容器:是独立运行的一个或一组应用,是镜像运行时的实体,类似于我们在虚拟机软件上安装一个windows系统,那这个运行的系统就是一个容器.容器可以被创建.启动.停止.删除.暂停等. 仓库

  • OpenCV4.1.0+VisualStudio2019开发环境搭建(超级简单)

    先说一下其实根本无需修改环境变量等系统设置,只需要对 project 进行一些设置就好. 编译需要的是 .h 文件和 .lib 文件,运行需要的是 .dll 文件,调试需要的是代码源文件和 .pdb 文件. 1. 准备 Open CV 的文件 : https://opencv.org/releases/ 解压到哪里无所谓,我们后面会把需要的文件复制到 Solution 的目录里面. 2. 在 vs 中新建一个空的工程,添加一个 source.cpp,随便加几行代码能跑起来.注意把 Solutio

  • Android NDK开发的环境搭建与简单示例

    一.NDK与JNI简介 NDK全称为native development kit本地语言(C&C++)开发包.而对应的是经常接触的Android-SDK,(software development kit)软件开发包(只支持java语言开发). 简单来说利用NDK,可以开发纯C&C++的代码,然后编译成库,让利用Android-SDK开发的Java程序调用.NDK开发的可以称之为底层开发或者jni(java native interface)层开发,SDK开发可以称为上层开发. Andro

  • Struts2开发环境搭建 附简单登录功能实例

    首先是搭建Struts2环境. 第一步 下载Struts2 去Struts官网 http://struts.apache.org/ 下载Struts2组件. 截至目前,struts2最新版本为2.3.1.3,下载struts-2.3.16.3-all.zip,解压,放着. 第二步 新建Web Project并导入jar包 在MyEclispe中新建Web Project,然后找到解压的Struts2包,在里面apps文件夹下找到struts2-blank.war,解压这个WAR文件,将里面WEB

  • 详解SpringMVC和MyBatis框架开发环境搭建和简单实用

    1.下载SpringMVC框架架包,下载地址: 点击下载 点击打开地址如图所示,点击下载即可 然后把相关的jar复制到lib下导入 2.MyBatis(3.4.2)下载 点击下载 MyBatis中文文档地址 点击查看 下载解压之后把jar复制到lib下导入,大概是这样子的 3.jdbc连接库还没有下载...这个是5.1.41版本的... 点击下载 解压之后这样子... 4.fastjson 阿里巴巴的json解析库 点击下载 版本是1.2.24 这个是托管到了github上面的,地址是:点击进入

  • Vue.js 2.0和Cordova开发webApp环境搭建方法

    HTML5开发APP技术文档 一.环境参数 1.技术语言:HTML.CSS.ES6.Node.js等: 2.框架:Vue.js 2.x.Cordova: 3.开发系统:mac.windows等: 4.环境配置: node 6+ npm 3+ (最好下载Node.js官方最新版本) .jdk1.8.SDK(请直接下载Androidstudio软件官方最新版本,已集成AndroidSDk,建议以默认路径安装) . 二.系统环境变量配置(以window7为例) 1.AndroidSDK配置 A)添加用

  • Mybatis环境搭建和使用实例代码

    Mybatis的简介: MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .2013年11月迁移到Github. MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息,将接口和 J

  • java环境搭建教程

    网上关于java环境搭建的文章很多,有正确的也有错误的,有原创的也有拷贝的,还有一些过时的. 今天正好有时间,简单对java环境变量的配置作了总结,并加了一些说明,希望可以帮助一些新手朋友. 1.首先要搞明白什么是JVM.JRE.JDK 我见过一些工作过一两年的程序员解释不清楚这三个概念,简单的解释下, JVM:java虚拟机 JRE:java运行环境  简单点说 JRE = java虚拟机+核心类库(辅助java虚拟机运行的文件) JDK:java开发工具集合  也可以理解为 JDK = JR

随机推荐