Angular超级入门（二）【环境安装、HelloWorld程序】

时间 2019-11-07

标签 angular 超级入门环境安装 helloworld 程序栏目 AngularJS 繁體版

原文原文链接

上一篇，咱们介绍和对比了jQuery、Bootstrap、Ajax等等。接着，咱们进行Angular.js的介绍css

五、Angular.js框架优势【重点用来协做分工、数据处理】html

　　与传统的前端框架不一样，Angular并非负责更好的页面显示和优化的，而是注重分工与协做。咱们知道术业有专攻，也许传统的前端行业每人负责一个页面，可是更大型更精致的单页面，就须要每一个人负责页面的一个或多个子模块了。例如淘宝网的导航栏由专门的前端人员负责编写，而商品栏部分又由另外一我的负责编写。它是怎么作到的呢？简单的说就是每人写一个app.html（app1.html、app2.html……appN.html等等），而后在整合的界面中插入app标签（例如插入<app-1></app-1>）。相应子页面的元素，仍是由各个子页面编写人员单独负责。前端

　　更进一步的，Angular.js还能够自定义数据处理，例如向后端请求性别数据，结果返回的是0和1，那么在angular.js的子组件中，能够编写映射，根据国家决定显示男/女或者male/femalenode

　　总结，Angular.js更像是一个介于前端和后端之间的“中端”框架，负责整合不一样的前端人员的努力成果。web

【Angular开发流程】typescript

　　不一样于传统的js项目直接写js代码到js文件而后经过html页面调用，angular是一整套解决方案。为了突出数据处理的特性，它强调数据类型的严谨性，因而angular目前最受欢迎的开发方式是用typescript编写。TS（typescript）是微软开发的一套js升级语言，相比js的不一样是加入了更加严谨的类型检查机制，防止数据处理中产生过多类型匹配错误。npm

　　Angular的开发需用用到node.js（提供项目目录初始化、TS程序编译成js、服务器调试运行等功能），当项目目录初始化后，咱们会发现生成了一个很是很是大的文件夹，其中包含了众多的js、css、html、ts等文件，初学者会感到很是不适应。在下面的小节中咱们会一步步地理顺这些项目文件夹以及文件。后端

【Angular.js开发环境准备】浏览器

IDE集成开发环境：VSCode——>https://code.visualstudio.com/bash

编译环境：node.js——————>https://nodejs.org/en/（彷佛网络不太稳定）

【须要经过node.js安装的插件】

Angular CLI（Command Line Interface），安装命令为——> $ npm install -g @angular/cli@1.7.4

（若是被墙或者下载缓慢，能够更换包源后再安装，更换为淘宝源的命令$ npm config set registry https://registry.npm.taobao.org）

【安装完angular脚手架（CLI）后，能够使用ng命令进行项目管理】

建立项目文件夹——> $ ng new my-app

会生成如图所示的目录结构

【用VSCode编辑器打开编辑】

选择打开文件夹

选取刚刚用ng命令生成的项目文件夹

打开后的效果图

这样咱们就成功在IDE中打开这个工程文件夹了。

【试着运行】

打开cmd命令行，进入到刚才经过脚手架生成的新工程目录my-app中，输入以下命令：

npm run start

node.js就会启动一个web服务器，此时在浏览器输入以下地址，就能打开该angular项目的页面：

localhost:4200

效果如图：

【接下来作点什么】

试着更改一下页面？咱们会发觉不懂从何下手，整个工程文件夹下满目琳琅的文件。凭着直觉判断，通常会认为src目录下保存着源码，而index.html是一个网站的入口文件。那么咱们就看看src文件夹下，果真有index.html，打开看看：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp2</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></app-root>
</body>
</html>

发觉body下边什么也没有，只有一个<app-root></app-root>，那么页面具体内容是在哪里体现的呢？

答案在配置文件里。咱们打开src文件夹下的app文件夹，会发现里面有不少组件同样的东西：

其中的app.component.html就是页面显示的内容部分：

咱们将里边的内容改成以下：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    HelloWorld to {{ title }}!
  </h1>
</div>

从新打开localhost:4200页面：

发现页面变为咱们想要的内容了。因而，第一个angular的helloworld程序编写完成