上一节《Angular.js超级入门(二)【环境安装、HelloWorld程序】》中讲到以下的代码:javascript
<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> HelloWorld to {{ title }}! </h1> </div>
其中的{{ title }}为什么在页面显示的时候变成了app呢?css
很显然,这个title是一个变量,从别的代码那取来的。咱们看看其它文件,对于angular和大多数编程框架来讲,相同功能的代码老是放在一个目录下的,因而咱们会看到相同app文件夹下的app.component.ts文件里记载着title变量的值:html
咱们试着将title的值更改:前端
title = 'MyFirstAngularApp1';
而后尝试刷新页面看看:java
因而这个title变量,就能够按照程序的常规处理方式,在typescript中进行处理、转换了。(注意,用VSCode进行编辑,按快捷键ctrl+s默认只存储当前编辑的文件,而不是工程里全部未保存的文件都进行保存。若是遇到明明改了变量却没有反映的状况,试着检查下是否全部未保存的文件都保存了。)node
【最后,简单发布】nginx
这么多typescript、html、js、css文件,我总不能所有拷贝到web服务器上才能用吧?我能不依赖node.js的server来运行个人angular程序吗?web
答案是固然能够。但首先,咱们得把程序进行编译。所谓编译,就是将众多人开发的前端组件进行整合、优化,将typescript转化为前端浏览器可识别的javascript代码。编译过程以下:typescript
打开CMD,进入到咱们的工程文件夹(编译前记得关闭已经用npm run start命令开启的服务器),输入以下命令:apache
ng build --prod
编译的过程以下,编译完后会多一个dist文件夹:
dist即为真正的生产文件,能够部署到web服务器。部署前还有一个问题,咱们打开index.html页面,看到以下代码:
文件中的
<base href="/">
意味着全部的未指定详细路径的文件请求,都从根域名开始查找。若是这个index.html要部署在子目录下的话,例如localhost/subfolder/index.html,它的js文件依然会到localhost/xxx.js下去找,如果全部生产文件都复制在同一目录下(也就是xxx.js在localhost/subfolder/xxx.js下),那么打开index页面就会报错找不到xxx.js:
的脚本因 Mime 类型不匹配而被阻止 Refused to apply style from 'http://localhost:63342/styles.ac89bfdd6de82636b768.bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. index.html:15 GET http://localhost:63342/main.e9283078d8b0e76688b8.bundle.js net::ERR_ABORTED 404 (Not Found)
解决办法以下:
开启该页面的方式有几种: