Angularjs 特性快速浏览记录

https://github.com/preboot/angularjs-webpack

https://www.npmjs.com/package/react-infinite-scroller

https://cassetterocks.github.io/react-infinite-scroller/

https://sroze.github.io/ngInfiniteScroll/

https://github.com/sroze/ngInfiniteScroll

https://www.bluepiit.com/blog/angularjs-infinite-scroll-pagination/

https://medium.com/%40charleeli/do-we-really-need-at-and-amp-bindings-in-angularjs-1dd65d99d2d9

https://medium.com/%40jdxcode/best-practices-for-building-angular-js-apps-266c1a4a6917

https://github.com/jdxcode/ng-async

https://github.com/thijsw/angular-medium-editor

https://yabwe.github.io/medium-editor/

https://yabwe.github.io/medium-editor/demo.html

/*--------------------------------分割线---------------------------*/

http://www.runoob.com/angularjs/angularjs-application.html

https://www.w3schools.com/angular/angular_htmldom.asp

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

ngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

AngularJS 指令

ng-init 指令初始化 AngularJS 应用程序变量。

AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 应用

AngularJS 模块（Module） 定义了 AngularJS 应用。

AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

ng-app指令指明了应用, ng-controller 指明了控制器。

<div ng-app="myApp" ng-controller="myCtrl">
 
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 服务(Service)

AngularJS 中你可以创建自己的服务，或使用内建服务。

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

AngularJS API

AngularJS Bootstrap

AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

AngularJS 包含

在 AngularJS 中，你可以在 HTML 中包含 HTML 文件。

客户端包含

通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。

通常我们使用 http 请求 (AJAX) 从服务端获取数据，返回的数据我们可以通过 使用 innerHTML 写入到 HTML 元素中。

跨域包含

默认情况下， ng-include 指令不允许包含其他域名的文件。

如果你需要包含其他域名的文件，你需要设置域名访问白名单：

此外，你还需要设置服务端允许跨域访问

AngularJS 动画

AngularJS 提供了动画效果，可以配合 CSS 使用。

AngularJS 使用动画需要引入 angular-animate.min.js 库。

AngularJS 依赖注入

wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

一句话 --- 没事你不要来找我，有事我会去找你。

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

• value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

• factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。

通常我们使用 factory 函数来计算或返回值。

• service

• provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

• constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

AngularJS 路由

本章节我们将为大家介绍 AngularJS 路由。

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。

通过 AngularJS 可以实现多视图的单页 Web 应用（single page web application，SPA）。

通常我们的 URL 形式为 http://runoob.com/first/page，但在单页 Web 应用中 AngularJS 通过 #! + 标记 实现，例如：

http://runoob.com/#!/first

http://runoob.com/#!/second

http://runoob.com/#!/third

注意 Angular1.6 之前的版本是通过 # + 标记 实现路由。

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。 因为 #! 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 #! 号后面内容的功能实现。 AngularJS 路由就通过 #! + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

后续研究:

https://ng-bootstrap.github.io/#/components/typeahead/examples

https://angular-ui.github.io/bootstrap/#!#accordion

https://blog.csdn.net/n_fly/article/details/52920384

https://github.com/beginor/learning-angular2

https://github.com/Hygens/UsersRegistrationSPA

https://blog.csdn.net/shenlei19911210/article/details/50848087

https://blog.csdn.net/watersevenmmfx/article/details/50327843