Angular 2 + 折腾记 ：(1) 初识 Angular-cli[官方脚手架] 及脱坑要点_JavaScript_第七城市
Angular 2 + 折腾记 ：(1) 初识 Angular-cli[官方脚手架] 及脱坑要点
这个系列的进度有些跳跃性，我尽量直白点解释，但是我不是官方文档，直入主题！！！！
什么是Angular-cli
简言之：就是NG团队自行维护的一个｀脚手架｀[内置单元测试及webpack2打包工具等] －－ 这货前身是 ember-cli ；
官网： https://cli.angular.io/
Github: /angular/angular-cli
npm: /package/angular-cli
我最早是从beta18开始用的，截止beta28.3-- 这个分支已经废弃，已经迁移,之前 npm install angular-cli 不推荐；
目前最新的是 v1.0.0-rc.2 ;从旧版本到rc期间坑了太多次，每次升级各种酸爽；
rc2开始基本变化不大，可以直接拿来用了。。
window下：
安装 lts 版本的nodejs[6.10.0] ， Angular-cli中的 node-sass 不支持7.x，装不上的装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译]
或者采用国内的cnpm安装,记得带版本号，有时候不带版本会安装 0.0.1 版本，cnpm好像会把编译好node-sass装上，不用本地再次编译 -- 亲测多次可用 或者安装windows-build-tools:windows下的依赖库，再执行官方安装命令
nodejs控制推荐用 nvm 来管理 ： /creationix/nvm
先下载 nvm 的脚本，用 curl 或者 wget 都行，前者有些不预装，后者基本都有
wget -qO- /creationix/nvm/v0.33.1/install.sh | bash curl -o- /creationix/nvm/v0.33.1/install.sh | bash
记得重新读取bash的配置文件，因为脚本没法实时生效，用linux的 source 命令一下子就搞定了
source ~/.bashrc : 意思就是重新加载当前用户的bash配置文件
nvm 的命令不多，仔细看看文档哈，我们这里只需要稳定版本(lts)
nvm install --lts ： 之后node怎么用就怎么用哈
其次，linux下推荐用 yarn 替代 npm ，使用起来体验好很多，速度也快很多
# 下载公钥curl -sS /debian/pubkey.gpg | sudo apt-key add - # 把源写进去源请求列表echo &deb /debian/ stable main& | sudo tee /etc/apt/sources.list.d/yarn.list # 我用的是deepin !!!! 支持一下国产，挺好用哈～～～～sudo apt-get update && sudo apt-get install yarn
开发工具这些就不扯了，我选择VSCODE
npm install -g @angular/cli -- 无压力过墙的孩子推荐
cnpm install -g @ -- 国内淘宝源(cnpm的安装自行搜索)
yarn add global @angular/cli -- 看网络了。。。
初始化项目
angular-cli可以初始化ng2或者ng4的项目，我这里说2+；
脚手架的命令很多，我这里只列出最常用的； 新建东东
范围 命令 作用
new ng new new_project 初始化新项目 Component ng g component my-new-component 新建一个组件 Directive ng g directive my-new-directive 新建一个指令 Pipe ng g pipe my-new-pipe 新建一个管道 Service ng g service my-new-service 新建一个服务 Class ng g class my-new-class 新建一个类 Interface ng g interface my-new-interface 新建一个接口 Enum ng g enum my-new-enum 新建一个枚举 Module ng g module my-module 新建一个模块
测试及检测
范围 命令 作用
e2e ng e2e 跑自动化测试-自己写测试测试用例 test ng test 跑单元测试 -- 自己写 lint ng lint 调用tslint跑整个项目，可以收获一堆警告和错误，--force --fix --format可以帮助格式和修复部分问题
ng serve ： 启动脚手架服务，默认端口4200；自定义什么看帮助额
ng build : 开发模式打包，调用的环境文件是 /src/environments/environments.
ng build --prod : 以前调用aot打包还需要带上 --aot ,从beta31开始， --prod 模式下自动调用aot打包，
调用的环境文件是 /src/environments/environments.prod.ts
弹出配置文件(还原真实的配置文件)
我们看到的 ng 开头的命令都是二重封装的。。。有时候我们想要改源文件或者看到原始配置是怎么样的这货就用到了
ng eject : 这个东西的配置很多，可以弹出各种各样的源配置和文件
生成的目录树小解释
这个脚手架支持sass和less，手动改下 .angular-cli.json 就可以了。或者执行命令改下支持，，一个道理的 当然可以配置接口反向代理，但是我感觉不实用，推荐还是把不同接口的url写在不同的environment里面，用 nginx 做反向代理！ ng serve --proxy-config proxy.conf.这个老版本是支持的，现在不知道支不支持 {&/&: {&target&: &http://localhost:3000&,&secure&: false}}
最新教程周点击榜
微信扫一扫如何让angular-cli工程基于Express服务-爱编程
如何让angular-cli工程基于Express服务
在angular-cli生成的工程文件目录下，创建server子目录，在server目录下创建app.js和api.routes.js，app.js内容：
//参考资料： https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli#conclusion
const express = require('express');
const path = require('path');
const http = require('http');
const bodyParser = require('body-parser');
// Get our API routes
const api = require('./api.routes');
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, '../dist')));
// Set our api routes
app.use('/api', api);
// Catch all other routes and return the index file
app.get('*', (req, res) =& {
res.sendFile(path.join(__dirname, '../dist/index.html'));
* Get port from environment and store in Express.
const port = process.env.PORT || '3000';
app.set('port', port);
* Create HTTP server.
const server = http.createServer(app);
* Listen on provided port, on all network interfaces.
server.listen(port, () =& console.log(`API running on localhost:${port}`));
api.routes.js内容：
const express = require('express');
const router = express.Router();
/* GET api listing. */
router.get('/', (req, res) =& {
res.send('api works');
module.exports =
修改package.json中scripts内容，其中start和build内容修改成
"start": "node server/app.js",
"build": "ng build --watch",
安装express
$ npm install --save express body-parser
$npm start & npm run build 注：& 符号并行运行两侧命令，如果是&&，是顺序执行两侧命令
浏览器中访问 http://localhost:3000
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。Angular2 路由刷新404解决办法 - 简书
Angular2 路由刷新404解决办法
问题：Angular2设置路由，部署后刷新后Tomcat直接出来404。开篇题外话：
从来只逛博客，赞都懒得点的人突然开始写博客。只是因为最近接触了Angular2，网上资源太少，之前又没有Angular1的基础，真是举步维艰，记录下自己艰辛的历程。同时公司没有建立知识库博客等相关的工具，在此方便交流下，还有上班些博客其实不当误工作的 ^_^ (代码部分也不涉及公司业务)。已经研究了一个星期，前面遇到的诸多问题后续争取不上。一、开发环境：1、后台前端
Maven + Spring + SpringMVC + Mybatis
Spring:spring-4.0.2.RELEASE
SpringMVC:spring-webmvc-4.0.2.RELEASE
Mybatis:mybatis-3.2.6
开发工具：Eclipse Neon Release (4.6.0)
2、前台框架
Angular2 + Bootstrap 4
Angular:Angular2.1
Bootstrap:Bootstrap v4.0.0-alpha
开发工具：Eclipse + nodejs + angular-cli
angular2 编写路由后(如下)在npm start后可以正常访问，但是打包发布到服务器（tomcat）刷新后出现404的问题。
const routes: Routes = [
{ path: '', redirectTo: '/index', pathMatch: 'full' },
{ path: 'index',
component: IndexComponent },
{ path: 'main',
component: MainComponent },
{ path: 'help',
component: HelpComponent }
三、解决方式
分析：angular2 毕竟是客户端执行的，当直接访问路由地址时服务器也不知到底是什么请求，所以就404 。
so，问题来了。
1、直接访问路由地址时服务器到底访问的时生么？很简单，当然是angular的首页了（我的是index.html）。
2、访问路由时，服务器将地址转发到angular首页行不行？试了下确实可以，事实证明还是可以正常使用的，至于参数会不会丢，还么试验，应该是没问题的。
思路这里，大家随意，我是下面这样做的。
网上也有篇文章提到在web.xml中配置拦截，导入个jar，实现跳转的，我没这样搞。
由于我后端使用的SpringMVC，默认是拦截所有的请求，且不带.do（有强迫症），上代码
web.xml --&
&servlet-mapping&
&servlet-name&SpringMVC&/servlet-name&
&!-- 此处可以可以配置成*.do，对应struts的后缀习惯 --&
&url-pattern&/&/url-pattern&
&/servlet-mapping&
&!-- 自动扫描该包，使SpringMVC认为包下用了@controller注解的类是控制器 --&
&context:component-scan base-package="com.ovit" /&
于是各种思想斗争下开劈了一个新的控制器/web，
package com.ovit.framework.
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import org.springframework.stereotype.C
import org.springframework.web.bind.annotation.RequestM
* 用于处理路由
* @author Lichun
@Controller
@RequestMapping("/web")
public class WebController extends BaseController {
* 默认处理/web下说有的请求，全部转发到index.html
* @param request
* @param response
@RequestMapping("**")
public void routes(HttpServletRequest request ,HttpServletResponse response) {
request.setAttribute("routes","路由跳转");
// 此处路径要打两点，如果直接写 index.html 会循环反问/web/index.html 造成死循环
request.getRequestDispatcher("../index.html").forward(request,response);
} catch (Exception es) {
log.error("路由失败",es);
// app-routing.module.ts
import { NgModule }
from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { IndexComponent }
from './ponent';
import { MainComponent }
from './ponent';
import { HelpComponent }
from './ponent';
const routes: Routes = [
{ path: '', redirectTo: '/web/index', pathMatch: 'full' },
{ path: 'web/index',
component: IndexComponent },
{ path: 'web/main',
component: MainComponent },
{ path: 'web/help',
component: HelpComponent }
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
export class AppRoutingModule {}
第一次使用简书写博客，测试能不能修改 ^-^ ，没有广告很清爽，写code很方便！！！
我的其它博客将同步更新：、、
[CSDN](http://blog.csdn.net/qq_)
[简书](...Angular CLI 使用教程指南参考
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2016 |
作者 红领巾 ]
Angular CLI 使用教程指南参考
Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本.
要安装Angular CLI你需要先安装node和npm，然后运行以下命令来安装最新的Angular CLI：
注意：Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。
npm install -g angular-cli
平台上，你可能需要添加 sudo
前缀提权进行全局安装：
sudo npm install -g angular-cli
你可以通过 Angular CLI 的 help
命令来获取相关的命令信息.
Angular CLI的命令关键字为 ng
ng new &project-name& [options]
创建一个新的 Angular 项目,默认在当前所在目录下
只输出要创建的文件和执行的操作，实际上并没有创建项目
输出详细信息
--skip-npm
在项目第一次创建时不执行任何npm命令
指定创建项目的名称
ng new PROJECT_NAME
cd PROJECT_NAME
将会自动在浏览器中打开默认地址 http://localhost:4200/
. 运行之后如果你修改了程序源代码.应用将会自动重载.
你也可以自定义配置 IP, 端口和实时重载端口号
ng serve --host 0.0.0.0 --port 4201 --live-reload-port 49153
ng init &project-name& [options]
在当前所在目录下初始化一个新的 Angular 项目
只输出要创建的文件和执行的操作，实际上并没有创建项目
输出详细信息
--skip-npm
在项目第一次创建时不执行任何npm命令
指定创建项目的名称
ng completion
ng completion
将自动完成功能添加到ng命令的shell中
ng doc &keyword&
在浏览器中打开Angular文档并搜索当前关键字
使用 protractor
在当前应用中运行e2e测试
使用 clang-format
格式化当前项目代码
ng generate
ng generate &type& [options]
在项目中构建新代码
ng g &type& [options]
支持的类型
ng g component my-new-component
ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service
ng g class my-new-class
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module
ng g route my-route 当前已禁用
构建的组件都会使用自用目录,除非 --flat
不在自用目录内创建代码
--route=&route&
指定父路由.仅用于生成组件和路由.默认为指定的路径.
--skip-router-generation
跳过生成父路由配置。只能用于路由命令。
指定路由应为默认路由。
指定路由是延迟的。 默认为true。
ng get &path1, path2, ...pathN& [options]
从Angular CLI配置获取值
pathN是一个有效的参数路径，例如“users[1].userName”。 如果未设置该值，将显示“undefined”。 此命令默认情况下仅在项目目录中工作。
返回全局配置值，而不是本地配置值（如果都设置）. 此选项还可以使命令在项目目录外工作
ng get &path1=value1, path2=value2, ...pathN=valueN& [options]
在Angular CLI配置中设置值
默认情况下，如果在项目内部运行，则设置项目配置中的值，如果不在项目内部，则失败。 pathN参数是一个有效的JavaScript路径，如“users [1] .userName”。 该值将被强制转换为正确的类型，或者如果类型无法强制，则会抛出错误。
设置全局配置值，而不是本地配置值。 这也使 ng set
可以在项目之外工作。
构建工件将存储在 /dist
ng build可以指定构建目标（--target = production或--target = development）和要与该构建一起使用的环境文件（--environment = dev或--environment = prod）。 默认情况下，使用开发构建目标和环境。
# 这是生产构建
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# 这是开发构建
ng build --target=development --environment=dev
ng build --dev --e=dev
ng build --dev
ng github-pages:deploy
ng github-pages:deploy [options]
构建生产应用程序，设置GitHub存储库，然后发布应用程序。
--message=&message&
构建并提交信息.默认为 "new gh-pages version"
--environment=&env&
angular 环境构建。 默认为“production”
--branch=&branch-name&
推送页面的git分支。 默认为“gh-branch”
--skip-build
在发布之前跳过构建项目
--gh-token=&token&
用于部署的API令牌,必须.
--gh-username=&username&
使用的Github用户名,必须.
在项目上运行codelyzer linter
ng test [options]
使用 karma
运行单元测试
继续运行测试. 默认为true
--browsers
, --colors
, --reporters
, --log-level
这些参数直接传递给karma
ng version
ng version
输出cli版本, node 版本和操作系统信息
继续运行测试. 默认为true
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
CodeSecTeam微信公众号
方向不对，越努力越尴尬！
手机客户端