您的位置：首页 > Web前端

Angular入坑指南（环境搭建）

2017-05-17 21:38 302 查看

我是Angular～

Angular是目前前端最为流行的框架之一，由Google大法在背后为其撑腰，凭借着Angualr在开发上提供的种种优势，Angular成为越来越多开发者所选用的框架。Google采用了Microsoft开发的TypeScript，重新编写了AngularJS，经历了从1.x到2.x的大变革，现在Angular的版本更新到了4.x，并将处于持续稳定的更新阶段。

为何入坑～

博主进入IT码农这个行业时，便在iOS开发这一行摸爬滚打。由于公司需求，转行干起了前端开发。从一开始接触JavaScript时，便被JavaScript随意的语法，各种各样的JS框架搞得甚是头疼。Angular框架是构建SPA的Web客户端应用，采用的是MVC的开发模式，基于Angular的Ionic框架又能在后续开发跨平台的移动应用，这对于在一家IoT企业，可以快速的开发各种跨平台的物联网应用，便毫不犹豫入了坑。

什么是TypeScript～

TypeScript并不是一门新的语言。TypeScript是JavaScript的超集。TypeScript引入了所有的ES5，ES6的语法，并在这基础上进行了扩展。TypeScript可以编译成纯的JavaScript代码，可以在任何浏览器上运行。TypeScript是Angular官方推荐的用来进行基于Angular框架开发的语言。

如何搭建Angular开发环境～

搭建Angular的开发环境，首先需要安装Node.js。(MAC电脑上自带了Node) 可以通过$ node -v 来查看版本，如果没有安装，请自行安装。通过下载Node安装包来安装或者用homebrew来安装等。

Node中集成了我们要使用的包管理工具npm 。我们需要使用它来下载TypeScript。

使用命令

$ npm install -g typescript

Angular提供了一个命令行工具angular-cli，它能让用户通过命令行创建和管理项目。我们可以通过angular-cli快速创建项目。

若要安装angular-cli，运行一下命令

$ sudo npm -g @angular/cli

安装完成后，执行命令

$ ng -v

就可以看到以下内容

紧接着，我们可以通过终端命令ng new命令来创建一个新的项目HelloWorld。

$ng new HelloWorld

这个命令会运行比较长的时间，因为需要下载一些npm的依赖。

创建成功后，我们可以进入HelloWorld，来查看工具都为我们生成了哪些文件

angular-cli.json 是angular-cli的配置文件

karma.conf.js是测试配置文件

typescript的lint配置文件

protractor.conf.js是端到端的测试配置文件

再进入src文件夹，看看src里的文件都有什么

app目录是我们要编写的应用的目录

assets目录主要是用来放置一些类似图片的资源

index.html是应用启动时的根页面

polyfills.ts是导入es6模块的配置文件

main.ts是angular工程的引导启动文件

styles.css用来放置全局样式

ts.config.json是typescript配置文件

typings.d.ts是typescript的声明文件

然后进入app目录下，查看目录下有哪些文件

OK，组件，模块，模版html，以及css样式文件都有了，只可惜，如果要是再多分几个目录分别管理会更清晰点，不过这个我们可以自己来做，这里就不提了。

打开我们的index.html 可以看到以下代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

打开app.module.ts

可以看到以下代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

打开app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}

打开app.component.html

<h1>
{{title}}
</h1>

OK,主体上生成的示例代码就是这样。

接着回到HelloWorld目录下运行命令

$ng serve

结果发现

是啊刚才生成的文件中并没有node_modules，这就比较尴尬了。

我们可以使用命令$ npm install来下载Angular需要的一些依赖。时间有点长～或者安装淘宝的镜像，使用cnpm install来下载

完成后，重新执行$ ng serve 看到以下内容

在浏览器上访问http://localhost:4200

可以看到以下内容

OK。这样Angular的简单环境搭建就完成了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular 框架前端

相关文章推荐

新的分享

章节导航