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 myDist2.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关联起来。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/103324.html
摘要:此属性包含了本项目中所有的子项目的配置信息。稍后单独拿这个属性详细讲解其注意点。 angular2.0 笔记 1.angular-cli 之 angular.json 配置表参数说明 简单创建一个demo项目 ng new project-demo { $schema: ./node_modules/@angular/cli/lib/config/schema.json, ve...
摘要:关于的,网上的资料也不多,刚好项目需要用到,就自己去查阅各种资料,自己整理了出来,分享下出来给大家吧。 关于angular2的i18n,网上的资料也不多,刚好项目需要用到,就自己去查阅各种资料,自己整理了出来,分享下出来给大家吧。废话不多说!直接上代码: 首先我们肯定要新建一个文件,叫aaa(网上angular-cli教程很多),cmd打开命令进入到随便一个目录底下: ng new a...
阅读 1223·2021-09-22 15:18
阅读 2553·2021-09-22 15:17
阅读 2188·2019-08-30 15:55
阅读 1516·2019-08-30 15:54
阅读 1000·2019-08-30 13:12
阅读 585·2019-08-30 13:12
阅读 1631·2019-08-29 11:33
阅读 1400·2019-08-26 17:04