首页 / ANGULAR / angular2框架搭建，angular-cli使用，angular2学习

angular2框架搭建，angular-cli使用，angular2学习

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了angular2框架搭建，angular-cli使用，angular2学习，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10517字，纯文字阅读大概需要16分钟。

内容图文

　　angular红红火火很多年了，一眨眼ng4都出来了，我也只能叹息前端的日新月异，以及感叹自己永远追赶不上时代的步伐，但是没关系，一个优秀的前端不在于他懂的无数的框架，而在于遇到问题时候懂得如何学习，如何解决，所以当你需要用到一个新技术的时候，你可以很快的上手，如何学习，就非常重要，学习的途经有很多，每个人都有自己的方法。所以良好的学习能力比你走马观花的了解重要得多，当然为了求职，走马观花很重要，但对于职业生涯显得没那么重要，骚年，好好培养自己的学习能力吧，有朝一日必定大有用途。

　　废话不多了，我一直用的是ng1.5版本，公司也没要求要用其他的，但是我一个大学同学最近公司用了ng2做项目，遇到了问题，问我，听他随口一说，感觉说ng2和ng1差别很大，其实核心的思想是一样的，只不过把依赖注入设计更加严谨，模块的概念更加清晰了。我推荐用angular-cli来搭建前端框架。

1.电脑环境

　　首先需要你的电脑有node环境，建议高版本node，我用的是node7.×，还有npm 包管理工具，你安装了node都会默认安装npm的。

2.安装angular-cli

npm install -g @angular/cli

<1>.构建ng项目

ng new my-app

　　应用代码位于src文件夹中。所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。这个文件夹之外的文件都是为构建应用提供支持用的。

<2>.运行ng项目

cd my-app
ng serve 或者  npm start

3.angular的模块化结构

　　在你的src文件夹内部的app文件夹中，你可以看到一系列文件，其中app.module.ts是这个项目的根模块，每个项目都有一个根模块，我们习惯命名为AppModule，这个称之为项目的大脑，是项目的总指挥，所以在这个模块中不能依赖过多的东西，不要引入过多的东西，它就是整个项目的指挥中心。

            NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

- declarations - 声明本模块中拥有的视图类。 Angular 有三种视图类：组件、指令和管道。
- exports - declarations 的子集，可用于其它模块的组件模板。
- imports - 本模块声明的组件模板需要的类所在的其它模块。
- providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
- bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

我们平时真正开发都是在特性模块里面的，特性模块就是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。特性模块也有上述属性，特性模块的并不是全局，只是针对自己需要的。

<1>创建shared模块

　　在这个示例的项目中，先创建一个shared模块（ng g module shared可以直接创建整个文件夹），这个模块用于一些共享的组件，指令，过滤器。例如，我们全局任何的模块都可能需要表单验证提示这个功能，那么就把它封装成一个公用的组件，在shared.component.ts里面写入：

import { Component ,Input} from ‘@angular/core‘;

@Component({
  selector: ‘form-help‘,
  template: `<div *ngIf="target.invalid">
                <div  *ngIf="!target._parent.submitted && target.dirty && target.errors.required" class="alert alert-danger col-sm-6">账号是必须输入的11</div>
                <div  *ngIf="target._parent.submitted && target.errors.required" class="alert alert-danger col-sm-6">账号是必须输入的</div>
                <div *ngIf="target.dirty && target.errors.pattern" class="alert alert-danger col-sm-6">以字母开头</div>
                <div *ngIf="target.dirty && target.errors.minlength" class="alert alert-danger col-sm-6">不能少于{{target.errors.minlength.requiredLength}}</div>
                <div *ngIf="target.dirty && target.errors.maxlength" class="alert alert-danger col-sm-6">不能大于{{target.errors.maxlength.requiredLength}}</div>
            </div>`
})
export class FormComponent {
   @Input() target
    constructor() {
    }
}

/*表单的验证规则,最大长度，最小长度，是不是必须填，正则等一系列的判断
*在这里target._parent.submitted指的就是整个表单，如果整个表单被提交过，则submitted为true，根据这个来让没有输入过的表单显示错误
*/

其中@input就是需要外部传入内部的值。然后需要在SharedModule的declarations中声明这个组件，才能起效果，如果是自己用则不需要在exports数组中声明，但是我们这个是共享模块，需要在任何其他的模块中使用的，所以就需要在exports数组中声明，表明这个组件可以被其他引入该模块的文件共享。shared.module.ts文件代码如下：

import { NgModule } from ‘@angular/core‘;
import { CommonModule } from ‘@angular/common‘;
import { FormsModule } from ‘@angular/forms‘;

import { HighlightDirective } from ‘./shared.directive‘
import { InputChangeDirective } from ‘./shared.directive‘
import {FormComponent} from ‘./shared.component‘

@NgModule({
    imports: [//这个模块需要的其他模块就需要在此引入，ng2把非常多的功能都拆成模块引入，比如ngModel这个指令存在FormsModule这个angular自带模块中，不引入就会报错
        CommonModule,
        FormsModule
    ],
    declarations: [
        FormComponent
    ],
    providers: [ 
       
    ],
    exports:[FormComponent]
})
export class SharedModule { }

<2>.创建login模块

然后我们创建我们的login模块，登入模块，登入模块中组要用到上述模块的验证功能，所以在这个模块的login.module.ts文件中需要提前引入这个shared模块，代码如下：

import { NgModule } from ‘@angular/core‘;
import { CommonModule } from ‘@angular/common‘;
import { FormsModule } from ‘@angular/forms‘; 

import {LoginRouterModule} from ‘./login.routing‘
import {LoginComponent} from ‘./login.component‘;

import {SharedModule} from ‘../shared/shared.module‘//引入shared模块
import {LoginService} from ‘./login.service‘

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        LoginRouterModule,
        SharedModule//声明shared模块
     
    ],
    declarations: [
        LoginComponent,
    ],
    providers: [LoginService]//这个是login模块的服务，即这个模块需要的ajax接口代码
})
export class LoginModule { }

这个时候就可以使用shared模块，但是angular2的验证跟ng1也有点差别，先看login.component.ts中html代码：

<div class="container">
    <form class="form-horizontal" role="form" name="myForm" #forma="ngForm">
        <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" autocomplete="off" id="firstname" name="name" placeholder="请输入名字" [(ngModel)]=‘name‘ #ipt1="ngModel" minlength="3" required=‘true‘ pattern="^[a-z]+$" maxlength="6" />
                <form-help [target]=‘ipt1‘></form-help>
            </div>
        </div>
        <div class="form-group">
          <label for="lastname" class="col-sm-2 control-label">姓</label>
          <div class="col-sm-10">
                <input type="text" class="form-control" autocomplete="off" id="lastname" name="psw" placeholder="请输入姓" [(ngModel)]=‘psw‘ #ipt2="ngModel" required=‘true‘ minlength="5"/>
                <form-help [target]=‘ipt2‘></form-help>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" (click)="submit(forma)">登录</button>
            </div>
        </div>
    </form>
</div>

文件中#forma="ngForm"表明这是个ng表单，每个input都需要验证提示，则给input加上唯一的标识符#inp1=‘ngModel’，#inp2=‘ngModel‘....，[(ngModel)]=‘psw‘是数据双向绑定，<form-help [target]=‘ipt2‘></form-help>就是引用了shared模块的，传入数据给定义的target，则就讲这个input的验证信息传到form-help这个组件内，会经过一系列的验证告诉你提示信息。

<3>.创建全局创建一次的方法

看到这个大家肯定很模糊，前面提到shared的模块式共享的模块，在每个其他模块都需要引入的，每次使用都是会创建实例的，但是一些全局的方法，比如ajax调用错误处理，删除提示等全局的方法，我们只需要引入一次，其他时候直接调用方法即可，并不希望每次都要引入每个特性模块。于是core模块出现了，core.service.ts文件如下：

import { Injectable } from ‘@angular/core‘;

//封装后台错误提示信息的右上角弹出红色小框
import {ToasterService} from ‘angular2-toastr‘;

//封装一些删除，弹出输入框的确认操作
declare var swal:any;//在使用之前先声明要用到（用的是sweetalert插件，使用前在index.html里面引入相应的js文件）

@Injectable()
export class CoreService {

    constructor(public _toaster: ToasterService) {}

    toasterError(title,message): void {  //标题    提示信息 显示关闭按钮 消失需要时间this._toaster.error(title, message, true, 2000);
    } 

    toasterSuccess(): void {
        this._toaster.success(‘title‘, ‘message‘, true, 2000);
    }

    //确认删除，删除后的操作等，删除失败的处理等都需要后期的处理
    comfirmDelete(type):void {
        swal({
            title:"确定要删除吗?",
            text:‘删除吧‘,
            type:type,
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "确定!",
            cancelButtonText: "取消!",
            closeOnConfirm: false,
            closeOnCancel: true,
            showLoaderOnConfirm: true
        },function(isConfirm){
            if(isConfirm){
                setTimeout(function(){
                    swal({
                        title: "删除成功!",
                        type: "success",
                        confirmButtonColor: "#007AFF"
                    });
                },1000)
                
            }
        })
    }
}

上述就是我举得例子，一些公用的方法，不希望处处创建，也符合函数的功能，实现代码的复用。当然要在该模块的providers中声明：

import { NgModule } from ‘@angular/core‘;
import { CommonModule } from ‘@angular/common‘;


import {CoreComponent} from ‘./core.component‘
import {CoreService} from ‘./core.service‘

//以下两个属于angular2-toastr的东西
import {ToasterComponent, ToastComponent} from ‘angular2-toastr/index‘
import {ToasterService} from ‘angular2-toastr‘;

@NgModule({
    imports: [
        CommonModule,
    ],
    declarations: [
        ToasterComponent,
        ToastComponent,
        CoreComponent
    ],
    providers: [ 
        ToasterService,//声明服务
        CoreService
   ],
  exports:[]
})
export class CoreModule { }

但是说到底这还是core某块中的，如何让全局都可以使用呢，只要在根模块下引入该模块即可，app.module.ts代码如下：

import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;
import { FormsModule } from ‘@angular/forms‘;
import { HttpModule } from ‘@angular/http‘;

import { AppComponent } from ‘./app.component‘;
import {LoginModule} from ‘./login/login.module‘
/*app路由*/
import {routing} from ‘./app.routing‘
/*共享模块*/
import {CoreModule} from ‘./core/core.module‘
//notpage
import {NotPageComponent} from ‘./notpage/notpage.component‘
//ng2-bootstrap
import { AlertModule} from ‘ng2-bootstrap‘;

@NgModule({
      declarations: [//可以告诉 Angular 哪个组件属于AppModule ,指令和管道 — 它们也必须被添加到declarations数组        AppComponent,
        NotPageComponent
      ],

      imports: [//imports数组中应该只有NgModule类。不要放置其它类型的类。        BrowserModule,
        FormsModule,
        HttpModule,
        LoginModule,//初次加载的模块，其他的模块都是路由惰性加载的
        CoreModule,//这就是coreModule的声明，可以使用这个模块全局的方法
        routing,
      ],
      providers: [],//引入服务，在所有这个模块下的都可以使用，不引入会报错，如果只需要在某个component下面使用，则只需要在某个component里面的providers里面引用即可      bootstrap: [AppComponent]
})

export class AppModule { }

4.路由

路由是每个框架必不可少的东西，我们期望的路由结构是这样的，根模块通过路由加载其他各特性模块，然后特性模块有自己的路由，引导去个特性模块里面不同的页面；为了方便演示，我在app下创建一个app.routing.ts文件，书写引导去哥特性模块的路由：

import {Routes, RouterModule} from ‘@angular/router‘;
import {NotPageComponent} from ‘./notpage/notpage.component‘

const routes: Routes = [
    { path: ‘‘, redirectTo: ‘login‘, pathMatch: ‘full‘ },//默认到的地方
    { path: ‘home‘, loadChildren: ‘./home/home.module#HomeModule‘ },
    { path:‘class‘, loadChildren: ‘./class/class.module#ClassModule‘},
    { path: ‘**‘, component: NotPageComponent}
];
export const routing = RouterModule.forRoot(routes);

把这个routing在AppModule的imports中引入，每个特性模块自己的路由也是这样引入。这个默认的login模块需要首先在AppModule中声明，其他惰性加载的不需要；我们再看看home这个模块的路由，在home.routing.ts中代码如下：

import {Routes, RouterModule} from ‘@angular/router‘;
import {HomeComponent} from ‘./home.component‘
import {HomeModule1Component} from ‘./home.module1.component‘
import {HomeModule2Component} from ‘./home.module2.component‘

const tablesRoutes: Routes = [
    {
        path:‘‘,//注意是‘‘,并不是home        component:HomeComponent,
        children: [
           { path: ‘‘, component: HomeModule1Component },
           { path: ‘homemodule1‘, component: HomeModule1Component },
           { path: ‘homemodule2‘, component: HomeModule2Component },
        ]
    }
]
export const homeRouting = RouterModule.forChild(tablesRoutes);

根据home，home/homemodule1，home/homemodule2加载home模块的不同的页面。

5.期待的页面路由结构

在我们的根目录的component.ts的html中我们并不需要太多的东西，只需要他提供一个视图的窗口即可，如下：

<router-outlet></router-outlet>

在特性模块例如home中，我们需要这个特性模块的视图窗口和导航，于是home.component.ts中的html文件如下：

<div class="row">
    <div class="col-sm-3">
        <ul class="nav nav-pills nav-stacked">
            <li><a routerLink="homemodule1" routerLinkActive="active">HomeModule1</a></li>
            <li><a routerLink="homemodule2" routerLinkActive="active">HomeModule2</a></li>
            <li><a routerLink="../class">Class</a></li>
            <li><a routerLink="home">VB.Net</a></li>
            <li><a routerLink="home">Java</a></li>
            <li><a routerLink="home">PHP</a></li>
        </ul>
    </div>
    <div class="col-sm-9">
        <router-outlet></router-outlet>//这个是本特性模块的视图
    </div>
</div>

6.总结

以上就是整个项目的框架搭建简述，ng2遵循的规则就是，1.我需要的模块就需要声明；2.全局的方法写在core模块，只在根模块引入；3.共享的模块写在shared模块，并在每个用到的模块中引入；其中源码在个人github上：https://github.com/jiangzhenfei/ng2-fei-cli，欢迎批评指正。

原文：http://www.cnblogs.com/zhenfei-jiang/p/7048596.html

内容总结

以上是互联网集市为您收集整理的angular2框架搭建，angular-cli使用，angular2学习全部内容，希望文章能够帮你解决angular2框架搭建，angular-cli使用，angular2学习所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1075750.html

来源：【匿名】

【上一篇】AngularJs日期处理【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【angular2框架搭建，angular-cli使用，angular2学习】教程文章相关的互联网学习教程文章

angular-项目框架遇到的问题【代码】

本项目用的是angular4搭建，用动态组件的形式来显示页面，之前遇到过因为内存溢出而导致无法aot的问题，　　解决方法：手动改写内存上限　　修改目录: my-project/node_modules/.bin 找到 ng.cmd :@IF EXIST "%~dp0\node.exe" ( "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\@angular\cli\bin\ng" %*) ELSE ( @SETLOCAL @SET PATHEXT=%PATHEXT:;.JS;=;% node --max_old_space_size=8192 "%~dp0\..\@angular\cli\b...

Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）【代码】【图】

前言：　　上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库，并且快速构建后台管理页面框架模板。这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件，并且介绍Angular相关目录结构、生命周期函数，路由配置和使用相关知识点，以及如何使用Angular CLI使用一行代码快速添加Angular应用的新功能。让你快熟的构建一个属于自己的NG-ZORRO后台管理框架，注意我们的前端代...

Angular入门--项目框架搭建【图】

Angular介绍Angular在2012年发布版本1.0，是最早流行的前端MVVM框架，目前流行的React和Vue框架都在它之后。由于React的流行，以及angular 1.0版本暴露出来的一些性能，组件化等的一些缺点，谷歌决定重写angular，在2016年推出angular2.0.Angular 2.0采用TypeScript开发，集成了RxJS库。目前最新版本是6.0Angular生态1、服务端渲染解决方案 Angular Universal2、PWA（Progressive web apps ）解决方案angular service worker3、Ion...

前端三大主流框架React、Vue、Angular的对比【代码】

前言每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：必须使用它的模块机制必须使用它的依赖注入必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他...

对比AngularJS/jQueryUI/Extjs：没有一个框架是万能的【图】

AngularJS不能做什么？对比Angular/JSjQueryUI/Extjs 框架就好比兵器，你得明白你手里拿的是屠龙刀还是倚天剑，刀法主要是砍，剑法主要是刺。对于那些职业喷子和脑残粉，小僧送你们两个字：呵呵；同时祝你幸福，请点右上角。首先要明白Angular不能做什么，或者Angular没有提供什么，然后再来看它能做什么，来看Angular与其它一些主流框架的对比。对于上面的表格，有人可能要跟我抬杠，咱大jQuery不是有各种插件吗！不是有各种E...

浅析angular框架的cookie【代码】

相信接触过网页编程的基本上都知道cookie这个东西吧，一个毫不起眼，但是又十分的重要的东西，今天我们就来分析一下这个小东西，我们都知道客服端通过发送http请求到服务器请求我们的数据，当我们的服务器接收到这个响应之后，经过处理之后会给出相应的响应，也就是传送回来我们需要的数据。但是如果我们关闭了页面之后再一次打开发送相应的请求会有什么情况发生呢？是否会快一点？没错，那就是cookie的作用。　　在举一个列子，比...