A-A+

angular4简要入门

2017年12月25日 Web开发 暂无评论 阅读 239 views 次

angular4简要入门

 angular4是angular发布的4.0正式版。“未觉池塘春草梦,阶前梧叶已秋声”,时间过的很快,可能有的同事听说angularJS出了2.0,还没有来得及看,angular就已快速发展到了4.0。今天,本文作者力求以通俗易懂的语言,为大家介绍一下angular4.0,以方便大家尽快“买票上车”。

angular发展简史

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。

Angular2 发布于2016年9月份,它是基于ES6来开发的。

2017年3月份,Angular4.0.0正式版发布。这是自angular改版后,首次发布的专业版本。它向下兼容,支持所有使用了angular2.x.x版本的应用程序。

angular.js 1.x到angular2确实是一个非常大的升级,以至于api,实现原理,框架思路都是完全不一样的。可以毫不夸张的说,学习angular2就和学一个全新的框架并没有太大区别。

angular2.x到angular4.0破坏性升级并不多,也很容易直接升级到4.0版本,看完了2.x的文档,那么上手angular4.0并没有问题。

新版本的特性

  • 更轻量化、更快 
  • 视图引擎 改变了生成的AOT代码样式。这个变化将减少大多数情况下生成的60%的组件代码。它可以使你自己的模板更个性化,复用率更高。
  • 动画包 在@angular/core中新增了很多动画效果包。这就意味着,你用或不用,动画包就在那里,不离不弃。
    这个变化同样会让你更容易的找到文档,更好的实现自动完成。你也可以从@angular/platform-browser/animations中导入浏览器动画模型,以此来为你的主要模块实现你需要的动画效果。

angular4入门攻略


安装命令行工具Angular CLI

#全局安装 Angular CLI (可以例用 ng -v 查看安装的版本信息)

npm install -g @angular/cli

创建项目

ng new angularProjectPlus 

如果在后面加上 --routing参数,会在app目录下面多出来一个路由配置app- routing.module.ts文件,同时在app.module.ts文件中自动引入生成的路由配置 文件,同时在app.component.html中引入<router-outlet></router-outlet>(注意本项目生成时没用这个参数,后面咱们是手写的,便于学习)

启动开发服务器

cd angularProjectPlus

ng serve --open

ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新 构建此应用。使用–open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。应用会用一条消息来跟你打招呼:Welcome to app!

angular启动过程

通过项目根目录下的angular-cli.json文件可以发现启动js文件位于src文件夹下的main.ts,页面的入口文件位于src文件夹下的index.html

实战开发

开发准备:引入第三方库,jquerybootstrap

npm install jquery --save

npm install [@types](/user/types)/jquery --save-dev

npm install bootstrap --save

npm install [@types](/user/types)/bootstrap --save-dev

@types/jquery和@types/bootstrap,因为Angular是使用TypeScript语言开发的,而jquery本质是JavaScript,TypeScript是不能直接使用的。我们需要先安装类型描述文件,让TypeScript认识jquery,bootstrap

同时安装完上面的包之后,需要到根目录下找到.angular-cli.json文件,把其中的 “scripts”: []修改成如下:

"scripts": [

    "../node_modules/jquery/dist/jquery.min.js",

    "../node_modules/bootstrap/dist/js/bootstrap.min.js"

]

同时需要把.angular-cli.json文件中的"styles": [“styles.css”]修改成如下:

 "styles": [

        "styles.css",

        "../node_modules/bootstrap/dist/css/bootstrap.min.css"

 ],

安装完成后,修改src目录下的tsconfig.app.json文件,将jquery添加到types数组中。把其中的"types": []修改成如下(此步现在最新版本已经不需要改了):

 "types": ["jquery"]

生成项目组件

ng g component navbar

ng g component footer

ng g component carousel

ng g component product

ng g component stars

ng g component search

ng g component home

ng g component product-detail

 

以上生成了页面的八个组件,每个组件都有相对应的组件的html页面,可以在入口页面app.component.html中加入组件如下代码(本项目用的是bootstrap样式):

<app-navbar></app-navbar>

<div class="container">

  <div class="row">

    <div class="col-md-3">

      <app-search></app-search>

    </div>

    <div class="col-md-9">

      <div class="row carousel-container">

        <app-carousel></app-carousel>

      </div>

      <div class="row">

        <app-product></app-product>

      </div>

    </div>

  </div>

</div>

<app-footer></app-footer>

其中组件如果是动态,需要循环数据的时候,会用到angular的循环标签*ngFor,父子组件之间传值会用到angular里的@Input()至此基于angular页面组件方面的工作就到一段落了。

使用angular路由(创建项目时如果带有–routing参数,会生成下面的这个文件,本项目是手工写入的,只需要修改app.module.ts文件就行)app-routing.module.ts

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

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

在const routes: Routes = [];数组里自定义我们的路由即可(带参数用的)。

app.module.ts文件需要修改的地方如下(本项目用的):

import {RouterModule, Routes} from "@angular/router";

const routeConfig: Routes = [

  {path: '', component: HomeComponent},

  {path: 'product/:id', component: ProductDetailComponent}

];

imports: [

   RouterModule.forRoot(routeConfig)

],

说到路由,就会让人想起页面之间的传递参数问题,好在angular路由里可以配置参数,如下:

<a [routerLink]="['/product', product.id]">{{product.title}}</a>

在详情页就可以用如下方式得到ID关在展示层html中显示如下;

export class ProductDetailComponent implements OnInit {

  public productId : number;

  

  constructor(private routerInfo: ActivatedRoute) {}

  ngOnInit() {

      //----得到了id,并把它给了productId

      this.productId=this.routerInfo.snapshot.params["id"]

      //----------------------------

  }

}

html组件页面中:

商品ID为{{productId}}

angular依赖注入(DI)

学过java的朋友可能更了解,回为java中有个有名的框架springmvc,里面就有依赖注入,不过没关系,js估计也是学习各家语言所长,咱从头开始学。用到两个概念,提供器和注入器

  • [x] app.module.ts文件中一般写提供器(组件中也可以写提供器)如下:

providers: [],

  • [x] 注入器一般写在组件的构造函数中

import {ActivatedRoute, Params} from "@angular/router";

constructor(private routerInfo: ActivatedRoute) {}

  • [x] 生成服务的命令 ng g service shared/product(服务名)

本项目中用ng g service shared/product 生成一个产品服务来共享数据,期中用到angular依赖注入,具体本项目配置如下:

app.module.ts

providers: [ProductService]

product.component.ts

constructor(private productService:ProductService) { }

export class ProductComponent implements OnInit {

  ngOnInit() {

    //service动态注入数据

    this.products=this.productService.getProducts();

  }

}

数据双向绑定和管道

页面如下:

<input [(ngmodel)] ="name">

{{name}}

生成管道的命令是 ng g pipe pipe/multiple

 http通讯

app.module.ts文件修改如下:

import {HttpModule} from "@angular/http";

imports: [

    HttpModule

  ]

==注意:http请求不是由get方法触发的,是由subscribe方法触发的,所以只写get方法不会在网络中有请求==

构建和部署

  • 构建:编译和合并(ng build)
  • 部署:与服务器整合

部署时有一个坑(不加的话刷新页面的话就找不到路由了),需要在app.module.ts配置如下代码

import {HashLocationStrategy, LocationStrategy} from "@angular/common";

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]

另令如果后台接口和前台项目开发的时候不在同一个端口,还需要配置代理文件:新建 proxy.conf.json:

{

  "/api": {

    "target": "http://localhost:8000"

  }

}

并且在package.json文件修改如下:

"start": "ng serve --proxy-config proxy.conf.json",

  • 多环境:一套代码,支持多种环境

至此, angular的一个入门操作已完成,可以入坑向更高的阶段进发了。

打赏作者
如果文章对您有所帮助请打赏支持本站发展。

您的支持将鼓励我们继续创作!

[微信] 扫描二维码打赏

[支付宝] 扫描二维码打赏

标签:

给我留言

您必须 登录 才能发表留言!

Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: