如何利⽤angular
导语
Angular2（已经统⼀更名为Angular，⽽Angular1表⽰1.x版本，以下统称Angular都是2.x版本以上）的⽬标是⼀套框架多个平台，这是所有前端⼯作的理想⽬标。
angular-cli它是angular框架官⽅的⼀个构建⼯具，当你使⽤ng new xxx创建⼀个项⽬时，所⾃动⽣成的项⽬结构是很有良⼼的。
我会从它开始，以我们⽬前⽣产项⽬中的⼀些经验，分享⼀些很基础的东西，希望有助于你了解整个Angular。
注：angular-cli的项⽬更新很频繁，但现在已经是rc0版本，所以以下不再探讨任何bate版本的内容。⼀、安装注意项⽬
angular-cli的核⼼是webpack，以及npm做为依赖包。但往往在安装过程中会遇到很多奇怪问题，我把这⼀切都追根于⽹络问题。
相信很多利⽤npm解决依赖包的⼈都知道淘宝有良⼼产品 cnpm，但这⼀次cnpm在安装angular依赖包时可能会⾏不通。那么⼀个正确的安装依赖包的姿势应该是：
1、Windows下必须是【管理员模式】下运⾏CMD；再使⽤ng命令。
2、当ng new xx创建项⽬时会⾃动执⾏npm install下载依赖包。
3、如果你⽹络没有问题的情况下，此时ng serve就可以正常运⾏。
然，很多时候，你可能会收到像：
懵逼了吧，⽆从下⼿了吧。其实是因为所依赖的.d.ts声明⽂件是存在rawgit⾥，靠腰啊，⼤部分⽹络环境是被抢！！所以类似这种问题，建议解决你的⽹络问题，那就是VPN。这也是前⾯我说cnpm也帮不了你的原因，⽆意⿊cnpm！
magnitude信号与系统UPDATE 2017-04-11 有⼀次我尝试以下办法完成：
npm install -g nrm
nrm use taobao
npm install
当然如若不⾏，可以尝试以下：
jquery下载的文件怎么使用
-- windows下使⽤管理员模式CMD
-- 1、先安装全局包
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
-- 2、创建项⽬
ng new ng-article
cd ng-article
ng serve
-- 3、如果ng serve运⾏不起来，尝试：
+ 删除node_modules
+ npm install
--4、依然错误
+ 尝试VPN，再循环第3步
升级⽼项⽬也⽐较简单：
1、.angular-cli.json
styles和scripts键
当需要引⼊⽤于全局作⽤域的类库，就需要添加相应类库的脚本和样式，⽐如在使⽤jQuery、bootstrap时："styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
]
其实不光⼀些全局作⽤域类库，有⼀些第三⽅（例如jQuery插件）插件，因为这类插件并不能被 TypeScript 识别，依然在npm安装完相应插件包后，也需要引相应的js和css加⼊到这⾥⾯。
defaults 键
⽣成⽅式的相关配置，⽐如默认初始化的项⽬都是采⽤ css，前端如果不使⽤CSS预处理语⾔，就不要好意思说你懂前端。我就是Sass的重度依赖者，所以初始化项⽬的时候会把css换成scss。只需要
简单⼀步：
"defaults": {
"styleExt": "scss"
}
因为angular-cli默认就⽀持sass/scss、less、stylus，你唯⼀要做的，就是把⽂件后缀由css变为scss即可。⽀持JSON Schema
值得说明的是angular-cli.json配置⽂件⽀持JSON Schema，每⼀个键值都会智能提醒，以及完整的含义解释（虽然是英⽂的）。
2、tsconfig.json
TypeScript的配置基类，为什么说基类，这是因为ts配置⽂件是允许被继承的，有没有发现
src/tsconfig.app.json 和 src/tsconfig.spce.json 这两个分别针对APP和测试环境的TS配置⽂件。那么angular-cli在执⾏tsc时会把 tsconfig.json + src/tsconfig.app.json 作为真正的配置⽂件。
演员孙侨潞
有关更多细节点tsconfig.json。
3、src/polyfills.ts
⽤于解决浏览器兼容问题的，⽐如像为了⽀持IE11以下可能你还可以导⼊⼀些ES6相应的polyfill。
如果你需要让⼀些pipe⽀持i18n的话，需要额外的安装相应intl。
Zone.js
之所以特意在这提⼀下zone.js，是因为TA对于angular来说⾮常重要，应该说像(click)这些操作和zone.js息息相关，这是angular团队专⽤angular开发⽤来解决异步任务间在上下⽂间传递数据的解决⽅案。有关这个话题另⽂在探讨。
四、NgModule与路由
Angular引导启动时是从根模块开始；⽽模块（NgModule）定义着组件、指令、服务、管道等等的访问权限，这样会使得每⼀个模块更内聚，这也是软件设计⼯程⾥⾯⼀直提倡且所追求的“⾼内聚、低耦合”。
@NgModule({
// 声明组件和指令
declarations: [
AppComponent
],
// 导⼊其他模块，这样本模块可以使⽤暴露出来的组件、指令、管道等
imports: [
BrowserModule,
FormsModule,
HttpModule
],
// 服务依赖注⼊
providers: [],
// 暴露本模块的组件、指令、管道等
exports: [],
entryComponents: [],
// APP启动的根组件
bootstrap: [AppComponent]
})
在代码中已经在⼤概的描述，更详细见参考。
1、entryComponents
描述entryComponents时，我们需要先谈angular-cli的摇树优化，什么意思呢？当编译⽣产环境代码时ng build --prod，angular-cli会⾃动对那⼀些完全没有被⽤到模板⾥的组件、管道等等⾃动排除掉，那怕是你在declarations声明过，这样才可以很⼤幅度减少⽂件⼤⼩。
所以有⼀些组件的确不会出现在模板中，但⼜会⽤到，⽐如某个组件是放在模态框⾥⾯，⽽模态框则是通过动态加载的⽅式来初始化组件，这个时候这些组件如果不在entryComponents中定义的话就会被排除掉。
2、模块在项⽬结构中的应⽤
前⾯说过模块可以让代码⼯程更内聚，利在“模块”，⽽器在“⼈”；因此，每个⼈如何去组织代码结构都会不⼀样，那我是怎么做的呢？
假设应⽤我们都会有⼀个布局，⽐如上左右结构，⽽正常上⽤户登录信息，左为菜单，右为内容。⽽唯⼀的特点是上左是通⽤的，右是根据路由来确定内容。
那么基于此，我的模块分布会是这样：
src/app
│  appponent.html
ditch翻译
│  appponent.scss
html语言视频教程
│  appponent.spec.ts
│  appponent.ts
│  dule.ts
├─layout // 通⽤布局组件
│      dule.ts
└─routes
│  routes.ts // 路由配置⽂件
│  dule.ts
├─trade // 订单
││  dule.ts
│├─list // 订单列表组件⽬录
│└─view // 订单明细组件⽬录
└─user // 会员
│  dule.ts
├─list
└─view
layout模块⾥⾯包含我上左的组件信息，这个模块与trade/user完全⽆关的；⽽对于trade的模块会有相应的list/view两个组件。⽽对于dule.ts是会导⼊ trade/user 两个模块⼀些通⽤的模块。
jscript调试路由写在模块⾥
整个结构中，只出现⼀个routes.ts⽂件来管理路由，但它并不是⽤来管理所有应⽤的路由，只是路由⼀些根级路由的配置，⽐如登录、未到路由时处理⽅式。
export const routes = [
{
path: '',
component: LayoutComponent, // 这个组件会在每个路由中优先加载
children: [
]
},
{ path: 'login', component: LoginComponent },
// Not found
{ path: '**', redirectTo: 'dashboard' }
]
路由就是⼀个带有层次结构的，这点和URI地址⼀样，⽤/来表⽰区隔。
等等，那我们后⾯的订单、⽤户的怎么办？怎么关联？
模块懒加载
模块间的导⼊与导出，其实从代码的⾓度来讲还是很依赖的，但是我们有⼀种办法可以让这种依赖变得更模糊。⽐如说让路由来帮忙加载，⽽不是通过模块与模块间的编码⽅式。
因此，只需要在routes.ts的children配置路径。
children: [
{ path: 'trade', loadChildren: './dule#TradeModule' },
{ path: 'user', loadChildren: './dule#UserModule' }
]
3、最佳实践
@NgModule的信息量就⼏个属性⽽已，本没有什么特殊之处，⽽官⽹也提供了⼀些最佳实践的⽅法供借鉴。共享模块
所谓共享是指在每个模块中可能都需要⽤到的，⽐如表单模块、Http模块、路由模块等等，这样的模块你想⽤必须⼿动导⼊。
因此，创建⼀个app/dule.ts模块来管理你共享的模块。
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule  } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule, Http } from '@angular/http';
import { BootstrapModalModule } from 'ng2-bootstrap-modal';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
BootstrapModalModule.forRoot({container:document.body})
],
exports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule
]
})
/
/ github/ocombe/ng2-translate/issues/209
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule
};
}
}
Service服务不应该放在共享模块中，这是因为Service是依靠DI来实现，只有DI才能保证Service是单⼀实例。
核⼼模块
如果你希望有些东西只是在Angular启动时初始化，然后在任何地⽅都可以⽤到，那么把这些东西放在这最适宜的。
import { NgModule, Optional, SkipSelf } from '@angular/core';
import { throwIfAlreadyLoaded } from './module-import-guard';

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。