精华内容
下载资源
问答
  • angular项目
    千次阅读
    2022-01-04 10:06:13

    readme

    • 我的项目名叫qlnc-admin
    • nginx用docker装的,nginx的/usr/share/nginx目录挂载在/home/nginx

    一 nginx根目录部署angular项目

    • 打包
    ng build --prod
    
    • 将生成文件夹dist/qlnc-admin中的qlnc-admin文件夹拷贝到/home/nginx/html根目录下
    • 配置nginx

    带有路由的项目需要加上try_files $uri $uri/ /index.html;,否则配置的子路由等无法使用

    location / {
        root  /usr/share/nginx/html/qlnc-admin/;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    
    • 启动nginx
    docker run --name nginx -p 80:80 -p 443:443 \
    -v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf \
    -v /home/nginx/log:/var/log/nginx \
    -v /home/nginx/html:/usr/share/nginx/html \
    -v /home/nginx/cert:/etc/nginx/cert \
    -d nginx
    
    • 访问
    www.xxx.com/login
    

    参考

    二 nginx子目录部署angular项目

    2.1 项目放在nginx根目录

    这里的子目录应该指的是访问www.xxx.com/qlnc/login中的qlnc,而不是指将项目拷贝到nginx/html/qlnc文件夹下(如果要放到多层文件夹下,看后文)

    • 打包
    ng build --base-href=/qlnc/ --prod
    

    --base-href=/qlnc/指定访问的二级目录,也可直接修改打包目录下的index.html里的base href参考

    • 将生成的dist下的qlnc-admin拷贝到nginx/html目录下
    • 配置nginx
      location /qlnc {
          alias  /usr/share/nginx/html/qlnc-admin;
          index  index.html index.htm;
          try_files $uri $uri/ /qlnc/index.html;
      }
    

    注意 root 和 alias 指令的区别:
    root指令会将配置的路径 location 加到 root 的路径参数后面,即/usr/share/nginx/html/qlnc-admin/qlnc,而alias指令则不会

    • 启动nginx(同上)
    • 访问
    https://www.xxx.com/qlnc
    

    2.2 项目放到nginx多层文件夹下

    • 将打包的项目qlnc-admin拷贝到/home/nginx/html/qlnc0/下,qlnc0是多建的一层目录
    • 修改nginx.conf
    location /qlnc {
      alias  /usr/share/nginx/html/qlnc0/qlnc-admin;
      index  index.html index.htm;
      try_files $uri $uri/ /qlnc/index.html;
    }
    
    • 启动nginx(同上)
    • 访问
    https://www.xxx.com/qlnc
    

    参考

    三 其他方法

    更多相关内容
  • AngularCv 我展示我的个人简历以及一些Angular知识的Angular项目。 该项目是使用版本8.3.1生成的。开发服务器为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件,该应用程序将自动...
  • Docker 部署 Angular 项目有两种方法,一种是服务端渲染,这个官方文档已有说明,另一种就是使用 node 镜像编译后放入 web 服务器。由于在 node 环境,所以使用 express 最为便捷了。 创建 server.js const express...
  • 在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文件又有什么意义,文件中的代码又起到什么作用。 首先看一下整体的...
  • 网上搜索Angular 项目编译后部署到 Nginx 中的方法,多数文章都介绍了需要在 Nginx 中的配置文件的 location 中特别指定跳转到首页来避免刷新导致404的问题,那么完整的server 代码是: server { listen 80; ...
  • 要在本地进行测试,请全局安装@angular-devkit/schematics-cli并使用schematics命令行工具。 该工具的功能与Angular CLI的generate命令相同,但具有调试模式。 使用以下方法检查文档 schematics --help 单元测试 ...
  • angular项目源码

    2018-12-15 19:21:24
    angular项目源码
  • angular项目

    2018-12-20 20:48:36
    angular项目 新运行的项目
  • 快速构建angular项目

    2019-08-10 04:39:55
    快速构建angular项目
  • angular项目代码

    2018-07-23 16:28:48
    angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码angular开发代码
  • h1.Hellz 是的,Angular
  • Angular项目启动步骤

    千次阅读 2022-06-10 16:04:52
    初学者启动angular 项目

    最近参与公司的一个app项目,前端使用的 angularJs,首次接触这样的项目,一脸懵逼,启动项目都成问题。同事大致讲了一下,自己琢磨一番,项目总算是启动了,如下记录。

    先得从 SVN上下载项目源码,我使用的 webstorm开发工具。以下命令操作是在 webstorm 的Terminal 中完成,建议如果用不习惯的还是打开 cmd 使用吧,话不多说,开始写步骤了。

    一、安装 NodeJs

          这个百度访问,或是点击下载链接:下载 | Node.js   默认进入到最新版本下载页面,根据系统下载对应的版本安装,我是windows10系统,使用  msi 版本进行安装(说明:因为项目比较老,我并没有使用最新版本!)

    当然,并不是版本越高越好,根据自己的项目选择。我接触的这个项目不算新,开始下载的高版本,安装后一直启动不了,后来就降低了版本,我使用版本为 v14.18.0,

    下载地址:https://nodejs.org/download/release/v14.18.0/

    下载完成后,一直点击“next” 就能安装完成。

    安装完成后验证一下, 打开cmd

    命令:(1)node -v (2)npm -v

      出现以上版本信息,则表示安装成功。

    二、安装 cnpm

            npm使用的公网服务器,服务器在国外,一般速度不快,下载经常中断,使用阿里的镜像会快很多,相对稳定。安装也很方便,执行一条命令就行。

    命令:npm install -g cnpm -registry=https://registry.npm.taobao.org

    执行如下:

     完成后验证一下,命令:cnpm -v

     

    三、安装angular脚手架

            安装命令:cnpm i -g @angular/cli

    安装完成后验证一下,命令:ng version   

    出现如下信息则安装成功:

    四、安装依赖

            进入到项目目录命令:cd  D:\16__ZWZX_Workspace\openresty

            加载依赖命令: npm  install

            如果有个别依赖加载失败,可以使用下面的命令单独安装:cnpm install [依赖名称] --save

     五、启动项目

            进入到项目目录,执行以下命令: cnpm run dev

     

    完。

    展开全文
  • 遵循最新的最佳实践Angular项目集合
  • Angular项目框架搭建

    千次阅读 2021-09-22 21:53:50
    angular项目

    一、.前置环境安装

       确认已安装安装Node.js

       

    “在项目开发中需要使用NPM包管理工具,而NPM运行在node.js上面, 所以需要先安装node.js。通过npm可以很方便的安装、共享、分发代码,管理项目依赖关系;通过运行“npm install 包名”几乎可以安装任何包/库。”

    二、搭建Angular项目环境

      1、全局安装@angular/cli

    npm instal -g @angular/cli
    // 确认安装版本号
    ng v

      2、进入你的项目目录,创建一个基于 新项目: ng new 项目名

    ng new cloud-music-ui

    说明:

    Would you like to add Angular routing ==> 是否要安装 angular路由,Y 回车;

    Which stylesheet format would you like to use ==> 选择层叠样式表;

      3、安装成功后,项目文件夹中会多出一个目录: node_modules

       

      4、ng serve,启动项目

      项目启动成功:

    三、angular项目目录讲解

      

    首层目录:
    node_modules        第三方依赖包存放目录
    e2e                 端到端的测试目录  用来做自动测试的
    src                 应用源代码目录  
    angular.json   Angular命令行工具的配置文件。后期可能会去修改它,引一些其他的第三方的包  比如jquery等
    karma.conf.js       karma是单元测试的执行器,karma.conf.js是karma的配置文件
    package.json        这是一个标准的npm工具的配置文件,这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候,等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中,后期我们可能会修改这个文件。
    protractor.conf.js  也是一个做自动化测试的配置文件
    README.md           说明文件
    tslint.json         是tslint的配置文件,用来定义TypeScript代码质量检查的规则,不用管它

    src目录:
    app目录              包含应用的组件和模块,我们要写的代码都在这个目录
    assets目录           资源目录,存储静态资源的  比如图片
    environments目录     环境配置。Angular是支持多环境开发的,我们可以在不同的环境下(开发环境,测试环境,生产环境)共用一套代码,主要用来配置环境的
    index.html           整个应用的根html,程序启动就是访问这个页面
    main.ts              整个项目的入口点,Angular通过这个文件来启动项目
    polyfills.ts         主要是用来导入一些必要库,为了让Angular能正常运行在老版本下
    styles.css           主要是放一些全局的样式
    tsconfig.app.json    TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
    tsconfig.spec.json   不用管
    test.ts              也是自动化测试用的
    typings.d.ts         不用管


    app目录(重点)

    app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。
    一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。


    app.component.ts:这个文件表示组件,
    组件是Angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的Html
    我们来看看app.component.ts中的代码,并解释下代码的意义

    下图是源代码,我只是把title的值给改了下

    来看看每行代码的意义,有点乱,可以复制到编辑器上去看。


    /*这里是从Angular核心模块里面引入了component装饰器*/

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

    /*用装饰器定义了一个组件以及组件的元数据  所有的组件都必须使用这个装饰器来注解*/

    @Component({
      /*组件元数据  Angular会通过这里面的属性来渲染组件并执行逻辑
      * selector就是css选择器,表示这个组件可以通过app-root来调用,index.html中有个<app-root>Loading...</app-root>标签,这个标签用来展示该组件的内容
      *templateUrl  组件的模板,定义了组件的布局和内容
      *styleUrls   该模板引用那个css样式
      * */
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    /*AppComponent本来就是一个普通的typescript类,但是上面的组件元数据装饰器告诉Angular,AppComponent是一个组件,需要把一些元数据附加到这个类上,Angular就会把AppComponent当组件来处理*/
    export class AppComponent {
      /*这个类实际上就是该组件的控制器,我们的业务逻辑就是在这个类中编写*/
      title = '学习Angular';



    组件相关的概念:
    1.组件元数据装饰器(@Component)
    简称组件装饰器,用来告知Angular框架如何处理一个TypeScript类.
    Component装饰器包含多个属性,这些属性的值叫做元数据,Angular会根据这些元数据的值来渲染组件并执行组件的逻辑

    2.模板(Template)
    我们可以通过组件自带的模板来定义组件的外观,模板以html的形式存在,告诉Angular如何来渲染组件,一般来说,模板看起来很像html,但是我们可以在模板中使用Angular的数据绑定语法,来呈现控制器中的数据。

    3.控制器(controller)
    控制器就是一个普通的typescript类,他会被@Component来装饰,控制器会包含组件所有的属性和方法,绝大多数的业务逻辑都是写在控制器里的。控制器通过数据绑定与模板来通讯,模板展现控制器的数据,控制器处理模板上发生的事件。

    装饰器,模板和控制器是组件的必备要素。还有一些可选的元素,比如:

    **输入属性(@inputs)😗*是用来接收外部传入的数据的,Angular的程序结构就是一个组件树,输入属性允许在组件树种传递数据
    **提供器(providers):**这个是用来做依赖注入的
    **生命周期钩子(LifeCycle Hooks):**一个组件从创建到销毁的过程中会有多个钩子会被触发,类似于Android中的Activity的生命周期
    样式表:组件可以关联一些样式表
    动画(Animations): Angular提供了一个动画包来帮助我们方便的创建一些跟组件相关的动画效果,比如淡入淡出等
    **输出属性(@Outputs):**用来定义一些其他组件可能需要的事件或者用来在组件之间共享数据

    简单来说,组件的中关系就如下图所示

    下面我们来看看模块文件
    app.module.ts:这个文件表示模块

    与AppComponent类似,模块也需要装饰器来装饰。

    展开全文
  • 主要给大家介绍了关于Angular项目如何升级至Angular6的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Angular UI路由器Restangular ui-Bootstrap 带有一些基本文档的简单Angular项目的生成器。 安装 首先,使用安装和generator-angular-dft(我们假设您已经预装了 )。 npm install -g yo npm install -g generator-...
  • 项目项目是使用版本11.2.7生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。...要获得有关Angular CLI的更多帮助,请使用ng help或查看“ 页面。
  • Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布,这里的快速开始就是基于这个命令。 开始项目前,你需要先安装node和npm,然后执行npm install -g @...
  • 我的个人 Angular 项目启动。 特征 模块化方法 用于开发、暂存和生产的配置 Livereload(开发) Javascript 连接/缩小 CSS 串联/缩小 资产修改 html5mode路由 默认情况下还包括: (兼容) 要求 (和 Node.js)...
  • 文章目录将angular项目打包安装windows IISWindows10配置安装windows IISwindows Server2012 配置安装IIS安装URL Rewrite Module在该网站目录下添加一个配置文件web.config,复制下边的内容到web.config设置文件夹...

    将angular项目打包

    ng build
    

    安装windows IIS

    Windows10配置安装windows IIS

    进入控制面板–>程序
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    windows Server2012 配置安装IIS

    参考

    安装URL Rewrite Module

    在这里插入图片描述
    下载完成后直接打开安装,安装完成后检查是否安装完成

    在该网站目录下添加一个配置文件web.config,复制下边的内容到web.config

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
    
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="Angular Routes" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="./index.html" />
          </rule>
        </rules>
      </rewrite>
      <staticContent>
    		<remove fileExtension=".json"/>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".woff"/>
            <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    		<remove fileExtension=".woff2"/>
            <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
          </staticContent>
    </system.webServer>
    </configuration>
    

    设置文件夹权限

    将第一步打包的部署文件复制到服务上,设置文件夹权限,本例打包完成后的文件夹名称为zh-Hans
    在这里插入图片描述

    在IIS上部署

    添加网站

    在这里插入图片描述
    ##

    一些报错处理

    在唯一密钥属性“fileExtension”设置为“.json”时,无法添加类型为“mimeMap”的重复集合项

    在web.config节点中加入
    原因: mimeMap重复添加,为防止重复添加先移除已有

    <staticContent>
      <remove fileExtension=".json"/>
      <mimeMap fileExtension=".json" mimeType="application/x-javascript" />
    </staticContent>
    
    展开全文
  • angular-cli自身支持Scss预处理器,Scss比css更加方便灵活,而且层次清晰,代码整洁。下面这篇文章主要给大家介绍了关于Angular CLI在Angular项目中如何使用scss的相关资料,需要的朋友可以参考下。
  • 本文将介绍angular项目的国际化方案,涉及静态文件(html)和ts文件文案的国际化。 背景 Angular: 5.0 Angular Cli: 1.6.1(1.5.x也可以) NG-ZORRO: 0.6.8 Angular i18n i18n模板翻译流程有四个阶段: 在组件模板...
  • Angular:Angular项目

    2021-02-28 01:28:12
    Angular:Angular项目
  • 新建一个angular项目 菜鸟教程

    千次阅读 2021-10-07 20:24:24
    1.假设angular learning是我们想要存放项目的文件夹,则到angular learning文件夹下,输入cmd.exe回车开启终端;(也可在终端用cd angular learning找到该文件夹,如截图二) 2.我们给该项目命名为angular02,在...
  • 漂亮的角 该项目是使用 10.2.0 版生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件,该应用程序将自动重新加载。...要获得有关 Angular CLI 的更多帮助,请使用ng help或查看页面。
  • 但这样只能创建固定版本的angular项目,也就是与你的全局angular cli版本所对应 1、查看本地angular版本 ng --version 2、安装想要的angular 版本 npm install -g @angular/cli@~12.2.0 3、创建...
  • 一、Angular环境搭建 (一)下载并且安装Node.js 官方网站下载:https://nodejs.org/en/ 安装angular的计算机上面必须安装最新的nodejs–注意安装nodejs稳定版本 双击点开下载好的安装包 进入安装界面,点next ...
  • JestAngular一个示例回购展示了如何在Angular使用Jest 。请检查jest-preset-angular以查看有关可与Angular项目一起使用的预设的更多详细信息。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 76,433
精华内容 30,573
关键字:

angular项目

友情链接: jquery滑块内容.rar