Angular超级入门（三）【变量修改、简单发布上线】

2019独角兽企业重金招聘Python工程师标准>>>

上一节《Angular.js超级入门（二）【环境安装、HelloWorld程序】》中讲到如下的代码：

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

其中的{{ title }}为何在页面显示的时候变成了app呢？

很显然，这个title是一个变量，从别的代码那取来的。我们看看其它文件，对于angular和大多数编程框架来说，相同功能的代码总是放在一个目录下的，于是我们会看到相同app文件夹下的app.component.ts文件里记载着title变量的值：

我们试着将title的值更改：

  title = 'MyFirstAngularApp1';

然后尝试刷新页面看看：

于是这个title变量，就可以按照程序的常规处理方式，在typescript中进行处理、转换了。（注意，用VSCode进行编辑，按快捷键ctrl+s默认只存储当前编辑的文件，而不是工程里所有未保存的文件都进行保存。如果遇到明明改了变量却没有反映的情况，试着检查下是否所有未保存的文件都保存了。）

 

【最后，简单发布】

这么多typescript、html、js、css文件，我总不能全部拷贝到web服务器上才能用吧？我能不依赖node.js的server来运行我的angular程序吗？

答案是当然可以。但首先，我们得把程序进行编译。所谓编译，就是将众多人开发的前端组件进行整合、优化，将typescript转化为前端浏览器可识别的javascript代码。编译过程如下：

打开CMD，进入到我们的工程文件夹（编译前记得关闭已经用npm run start命令开启的服务器），输入如下命令：

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)

解决办法如下：

1. 注释（或删掉）<base href="/">
2. 将xxx.js拷贝（或部署）到localhost/xxx.js下

开启该页面的方式有几种：

1. 直接双击该html文件，通过浏览器打开，此时浏览器的地址为“file:///D:/angular/my-app2/dist/index.html”
2. 使用webstorm等IDE自带的服务器进行打开
3. 加载的其它web服务器（例如tomcat、apache、nginx等）进行打开

 

 

 

 

 

转载于:https://my.oschina.net/u/2996334/blog/2994153