angular2.0 笔记 - 01

AnthonyHan 发布于2019-08-23 16:48 / 1660人阅读

angular2.0 学习笔记

### 1.angular-cli 常用命令记录

详细教程 angular cli官网 有，这里不详细说明,感兴趣的可以自行到官网看，一下仅记录本人到学习过程常用到的命令

1.创建项目 ng new

  ng new project-name 

  exp:
  ng new my-app

2.启动项目 ng serve

参数名	类型	默认值	作用	exp
--port	number	4200	自定义端口	ng serve --port 4201

3.创建module

  ng generate module module-name

  // 简写：
  ng g m moduleName

  // 新建带对应路由的module
  ng generate module my-module-name --routing

  // 简写 
  ng g m my-module --routing

  // 检查创建时检查module是否存在
  ng g m my-module --spec

4.创建 component

  ng generate component component-name (options)

  // 简写
  ng g c component-name

  // options exp 
  // 在src/app 目录下生成component-name 组件
  ng g c component-name --flat true

以下是components options说明

参数	类型	默认值	作用
--flat	boolean	false	在src/app目录下生成 component 文件，而不是在当前目录下
--inline-template	boolean	false	使用 inline template 而不是独立的 html template 文件
--inline-style	boolean	false	使用 inline style，而不是独立的style 文件
--spec	boolean	false	是否生成component对应的 spec 单元测试ts文件

5.创建指令 ng directive

  ng generate directive my-directive (options)

  // 简写
  ng g d my-directive

  // options exp 
  // 在src/app 目录下生成 my-directive 指令
  ng g d my-directive --flat true

ng directive 指令 options 参数 说明

参数	类型	默认值	作用
--flat	boolean	false	在src/app目录下生成 derective 文件，而不是在当前目录下
--spec	boolean	false	是否生成directive对应的 spec 单元测试ts文件

6.创建service

  ng generate service service-name (options)

  // 简写
  ng g s service-name

ng service options 说明

参数	类型	默认值	作用
--flat	boolean	false	在src/app目录下生成 service 文件，而不是在当前目录下
--spec	boolean	false	是否生成service对应的 spec 单元测试ts文件

7.构建 ng build

  ng build

  // 设置 输出文件位置 为 myDist 文件夹
  ng build --output-path myDist

2.angular(简称ng) 笔记一下

此笔记不会从0到1讲解，仅做为记录本人学习angular2.x以上版本到学习笔记，如有问题可以提问，希望我遇到到问题可以帮助到你到学习，如有一切不理解到问题，请移步到angular官方文档 或 angular中文文档 查看更详细的说明

由于本人原先是使用vuejs和reactjs为主，所以有很多时候都是以vue作为对比例子理解，如有说得不清楚的，欢迎提bug。

ng 架构主要由4大部分组成

ng 架构
模块	组件	服务与依赖注入	路由

2.模块
ng的模块，理解起来跟我以前理解的模块还真不一样。ng模块需要通过NgModule去定义，而且ng的模块在我的理解概念上是一个相对独立的集合体，模块声明了当前模块使用到的相关组件、指令、管道、服务和一些编译配置。对比与vue的组件理解，ng模块显得略为有点麻烦，但也更为清楚的表达了模块和组件的关系，组件和模块不是一个意思。vue的模块，更多时候是vue工程已经帮开发者处理好了，不用自己去定义模块，只需要关注组件业务开发即可。当然，vue的组件也是需要注册到vue对象里面到，可以在全局注册，也可以注册到当前使用到组件，在组件注册这里，vue和ng都是一样需要手动注册。

  import {NgModule} from "@angular/core";
  import {BrowserModule} from "@angular/platform-browser";
  @NgModule({
    imports: [BrowserModule], // 本模块需要注入的其他模块‘
    /*
    * export
    * 本模块导出的组件、指令、管道，如果其他模块引入了本模块，在其他模块可以直接使用本模块输出的组件、指令和管道
    */
    exports: [],
    // providers本模块向全局服务中贡献的服务创建器，本人暂时也不知道是啥，后期研究明白了再多带带写一篇补上吧
    providers: [Logger], 
    // bootstrap 指定了本模块启动时，应该启动的组件
    bootstrap: [],
    // id 模块ID,用于使用getModuleFactory区分模块
    id: "myApp"
  })
  export class AppModule {}

以上注解有部分借鉴于石头皮的ANGULAR2_NGMODULE模块详解

3.组件
ng的组件，就是但存的组件，跟vue的组件是类似的东西。只不过ng的组件需要@Component装饰器定义一些组件配置，包括 selector, template/templateUrl, providers, styles/styleUrls等。然后组件保安有模版、指令、数据绑定、管道(filter)、事件/属性绑定、

4.服务与依赖注入
这个其实与angularjs差别不大，服务还是可以用于组件之间的数据通讯，注入让服务更灵活，需要时注入。

5.路由
定义导航的规则，并且把导航与组件或module关联起来。

服务器托管私有云 php01 Beta01 java01++ database01

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103324.html

angular2.0 笔记 - 02

摘要：此属性包含了本项目中所有的子项目的配置信息。稍后单独拿这个属性详细讲解其注意点。 angular2.0 笔记 1.angular-cli 之 angular.json 配置表参数说明简单创建一个demo项目 ng new project-demo { $schema: ./node_modules/@angular/cli/lib/config/schema.json, ve...

tain335 2019-08-23 16:49 评论0 收藏0
angular入门

摘要：学习入门第一课步骤创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置文件创建文件编译 angular2 学习入门第一课步骤 Install Node.js 创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置 Create the app’s Angular root component Add main.ts, identifying the root componen...

Yangder 2019-08-20 10:11 评论0 收藏0
angular入门

摘要：学习入门第一课步骤创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置文件创建文件编译 angular2 学习入门第一课步骤 Install Node.js 创建应用程序的项目文件夹和定义包的依赖关系和特殊项目设置 Create the app’s Angular root component Add main.ts, identifying the root componen...

Gu_Yan 2019-08-01 15:33 评论0 收藏0
关于angular2.0的i18n国际化的解决方法，分享一下给大家，有错大家指出来互相学习哈。。。

摘要：关于的，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。关于angular2的i18n，网上的资料也不多，刚好项目需要用到，就自己去查阅各种资料，自己整理了出来，分享下出来给大家吧。废话不多说！直接上代码：首先我们肯定要新建一个文件，叫aaa（网上angular-cli教程很多），cmd打开命令进入到随便一个目录底下： ng new a...

娣辩孩 2019-08-20 18:13 评论0 收藏0