angular4项目搭建总结
项目搭建
步骤1：设置开发环境
首先安装Node.js和npm,安装地址（在终端/控制台窗口中运行命令 node -v 和 npm -v查看版本 ）
然后全局安装 Angular CLI。
npm install -g @angular/cli步骤2：创建新项目
ng new SoftH步骤3：启动项目
cd SoftH
ng serve --open 或者 npm start（推荐）步骤 4：创建一个组件或者模块或者服务
(模块) ng g m [module-name] a-m
(组件) ng g c [component-name] a-c
(管道) ng g pipe [pipe-name] a-pipe
(服务) ng g s [service-name] a-s
(路由模块) 暂时无法用命令创建，需手动创建，输入a-m-r快速创建基础设置
sass设置
angular-cli.json文件里
"defaults": {
"styleExt": "sass",
"component": {}
}设置完sass之后，在组件里就必须用styleUrls，不能直接用Styles写样式了
hash路由
RouterModule.forRoot(routes, { useHash: true });使用hash路由，后端不用修改配置，这样比较方便，省去很多麻烦(具体原理，我也不清楚)
http
error: No provider for Http
使用http相关API，需要注入HttpModule
import { HttpModule } from '@angular/http';declare
引入第三方js库(typings.d.ts)
路由相关
RouterModule
forRoot 定义的根路由（appRoutingModule）在项目中只出现一次
forChild定义子路由
Error: StaticInjectorError(AppModule)
[RouterOutlet -> ChildrenOutletContexts]:
StaticInjectorError(Platform: core)[RouterOutlet -> ChildrenOutletContexts]:
NullInjectorError: No provider for ChildrenOutletContexts!报这个错应该把根路由forChild=>forRoot
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
}).angular-cli.json基础配置
详见此篇文章
路由路径设置
routes path前面不能加/
angular4提供了路由懒加载
在 AppRoutingModule 中
{
path: 'external-agency/:externalId',
canActivate: [AuthGuardService],
loadChildren: 'app/components/external-agency/external-agency.module#ExternalAgencyModule'
}
注意看惰性加载的语法：loadChildren 后面紧跟着一个字符串，它指向模块路径，然后是一个 #，然后是该模块的类名。当路由为external-agency/13时，会自动去ExternalAgencyModule=>ExternalAgencyRoutingModule中，不用单独用import引入ExternalAgencyModule
在ExternalAgencyRoutingModule中
{ path: '', redirectTo: 'home', pathMatch: 'full' }, //此处home表示当路由为空时，路由重定向为external-agency/13/home(AgencyHomeComponent)，如果是/home，路径是回根部，重定向为home
{
path: '', component: ExternalAgencyComponent, //path为空，因为AppRoutingModule已经设置好路径了，此路由相当于是ExternalAgencyModule的子路由
children: [
{ path: 'home', component: AgencyHomeComponent }, //此路由为ExternalAgencyComponent组件的子路由，在ExternalAgencyComponent中一定有一个引入插件库
引入插件库都要做的两步：
1.安装组件
npm i 插件名 --save
2.引入样式
修改 .angular-cli.json 文件的 styles 列表
...
"styles": [
"../node_modules/....css"
],
"scripts": [
"../node_modules/....js"
],
...jquery
1.安装插件
npm i jquery --save
npm i @types/jquery --save-dev
2.引入样式
在.angular-cli.json 中引入 jquery.min.js
"scripts": ["../node_modules/jquery/dist/jquery.min.js"3.引用
此刻就可以局部引用jquery
import * as $ from 'jquery';如果要在全局引用，需要在typings.d.ts中
/* SystemJS module definition */
declare var module: NodeModule;
declare var $: any;
declare var jQuery: any;
interface NodeModule {
id: string;
}大多数情况都会报 无法重新声明块范围变量“jQuery”和“$” 的错误，只需要去node_modules\@types\jquery\index.d.ts注释掉以下两行代码
declare const jQuery: JQueryStatic;
declare const $: JQueryStatic;bootstrap4
1.安装插件
npm i bootstrap --save
npm i @types/bootstrap --save-dev
2.引入样式
在.angular-cli.json文件中引入bootstrap4
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css" //必要时候可以引入bootstrap-theme.css
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],NG-ZORRO
这是angular4常见的UI插件库，可能与bootstrap有冲突，但冲突不大。官网（有些公司网络限制），替代网站
1.安装插件
npm i ng-zorro-antd --save
或者
yarn add ng-zorro-antd
2.引入模块
在AppModule中引用NgZorroAntdModule
import { NgZorroAntdModule } from 'ng-zorro-antd';
//注册语言包
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
@NgModule({
...
imports: [
NgZorroAntdModule.forRoot()
],
...
})3.引入样式
swiper
官网（方法一）
方法二：
npm i --save angular2-useful-swiper
npm i --save [email protected] //此种方法只支持3版本，运用方法也不同
引用样式
"styles": [
"styles.css",
"../node_modules/swiper/dist/css/swiper.css"
],
"scripts": [
"../node_modules/swiper/dist/js/swiper.js"
],html中：
<swiper [config]="config">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1div>
<div class="swiper-slide">Slide 2div>
<div class="swiper-slide">Slide 3div>
<div class="swiper-slide">Slide 4div>
div>
<div class="swiper-pagination">div>
<div class="swiper-button-next">div>
<div class="swiper-button-prev">div>
swiper>ts中：
export class MyComponent implements OnInit {
config: SwiperOptions = {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
};强调：一定要引用import { SwiperModule } from 'angular2-useful-swiper';
其他
有时候我们写一个路径，包括img、iframe、a等等，angular会默认在路径前面添加一个unsafe，此刻需要做如下处理：
在ts中
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
export class AppDownloadComponent implements OnInit {
openUrl: SafeResourceUrl;
this.openUrl = this.sanitizer.bypassSecurityTrustResourceUrl(需要处理的路径);
}
我遇到该问题是在做一个app下载功能时，iphone客户端下载路径是一个plist路径，因此必须做安全路径处理！！！