angular编程的一些基础知识都有哪些？

对于程序员来说，除了需要了解不同的编程语言的特点以外，同时对于编程语言的使用都有自己的风格。今天，电脑培训就一起来了解一下，angular编程的派逗一些基础知识都有哪些。

一、指令的简介

指令其实就是angularjs对html的一个扩展，实现自定义html元素

angularjs其自身封装了一些常用的系统指令，我们也可以根据需要自定义指令

二、自定义指令简介

自定义指令的基本格式

app.directive("指令名称"高链,function(){

restrict:'指令匹配格式',

replace:true,是否自定义元素替代指令申明

template:'百度一下'

})

自定义指令关键词说明：

指令名称说明:名字一般采用驼峰命名，及字母小写其余单词大写

在调用时，要将大写字母转换为小写并加上-

举例：myDirectiveTest调用为：my-directive-test

restrict有四种枚举值：

E：指令按照元素来匹配

使用：

C：按照class来匹配

使用：

A：按照属性来匹配

使用：

M：按照注释来尘念卖匹配

1、安装node, yarn,网上对应的都有安装教程

2、执行yarn global add @angular/cli，安装angular的脚手架,运行ng version查看是否安装成功

3、执行ng new projectName --style=less 创建样式语法为less的项目

可用选项

--dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件

--verbose: boolean, 默认为 false

--link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包

--skip-install: boolean, 默认为 false, 表示跳过 npm install

--skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库

--skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件

--skip-commit: boolean, 默认为 false, 表示不进行初始提交

--directory: string, 用于设置创建的目橘汪录名，默认与应用程序的同名

--source-dir: string, 默认为 'src', 用于设置源文件目录的名称

--style: string, 默认为 'css', 用于设置选用的样式语法 ('css', 'less' or 'scss'纤指)

--prefix: string, 默认为 'app', 用于设置创建新组件时，组件选择器使用的前缀

--mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序

--routing: boolean, 默认为 false, 表示新增带有路由信息的模块，并添加到根模块中

--inline-style: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联样式

--inline-template: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联模板

4、运行项目

   ng serve  命令启动项目

   ng serve --open 启动完毕会自动打开浏览器，可以简写成 ng serve --o

5、打包项目

执行ng build--prod--build-optimizer命令打包

6、运行打包文件

mac电脑进入dist文件下的打包文件，运行python -m SimpleHTTPServer 8080命令后，在浏览器输入localhost:8080即可展示项目页面

windows，运行yarn global add http-server或者npm install http-server -g安装http-server插件，进入打包文件根目录，执行http-server，即可运行打包项目圆竖仔

在本文中，我们从550个使用 Angular1.x 和 Angular 2 构建的项目中精选了前18个，与大家分享。（Angular 1.x 与 Angular 2 项目各占一半）

开发者们，一起来 Enjoy 吧！

1. Soundnode

使用 NW.js，Node.js，Angular.js 与 Soundcloud API 构建的 Soundcloud 桌面版（Mac，Windows和Linux）

感谢 Michael Lancaster 提供 [2442 Stars]

2. Angular Bootstrap管理面板框架

感谢 @smartapant 提供 [3584 Stars]

3. ProtonMail

使用 Angular 构建的加密 Webmail 界面。

感谢 @ProtonMail 提供 [1102 Stars]

4. Taiga

使用 Angular 和 Django 构建的适用于敏捷开发者和设计人员的项目管理 APP。

感谢 Taiga.io 提供 [1970 Stars]

5. Viktor NV-1

使用 AngularJS 和 WebAudio API 构建的开源乐器。

感谢 @NikolayTsenkov 提供 [191 Stars]

6. Malhar-angular-dashboard

AngularJS 构建的通用面板及窗口部件功能。 [545 Stars]

7. DuckieTV

一款由 AngularJS 构建的 Web APP. 它可以通过半自动集成 torrent 客户端来跟踪您含稿喜爱的电视节目。 [373 Stars]

8. 使用 AngularJS 开发的鼓点机

感谢 Doug Johnston 提供 [46 Stars]

9. Aisel

用 AngularJS 和 Symfony3 构建的电商凳老纯市场。

感谢 Ivan Proskuryakov 提供 [189 Stars]

1. Angular 2 开发的管理面板框架 [907 Stars]

2. 使用枣咐 RxJS 和 Angular 2 开发的一个聊天应用的程序示例

感谢 Nate Murray 提供 [634 Stars]

3. 用 AngularJS 2.0 制作的 HackerNews

感谢 Harry Wolff 提供 [103 Stars]

4. Angular 2 开发的回声播放器

感谢 Oren Farhi 提供 [74 Stars]

5. Dribbble Clone

使用 TypeScript 和 SystemJS 加载器的 Angular 2 游乐场。

感谢 Mohammed Zama Khan 提供 [19 Stars]

6. Angular 2 开发的克隆版 Trello [19 Stars]

7. Angular 2 国际象棋游戏

感谢 Shlomi Assaf 提供 [11 Stars]

8. 使用 Angular 2.0 构建的 YouTube 搜索引擎

感谢 Alex Hawkins 提供 [85 Stars]

9. 基于 Angular 2 的钢琴音符训练游戏 [2 Stars]

以上就是 18 个精选的 Angular 开源项目分享，希望你能从中找到喜欢的项目。

如果觉得文章不错，不妨点个赞。 _

注：

---