Angular JS 学习笔记（入门）

Angular JS 学习笔记

实习的第一个项目，是angularjs。。。angular可是升级到angular8了啊.。。

Angular Router 添加了向后兼容模式，以降低大型项目的升级成本。Angular Router 可以使用 $route APIs 延迟加载部分 AngularJS 应用程序，从而更容易地升级到 Angular。

对于大型angularjs开发团队来说，现在正是升级的好时机！

虽然angular js时代已经过去，但是很多企业，尤其是老企业还在用angular js，在其位谋其政，以前都是vue开发，现在有机会接触到angular 基础，还是要好好学习一下。

Angular JS 框架
他是开发动态web应用的框架，可以使用html语言或者通过拓展的html语言来使组件更方便清晰。
强大的指令功能：

• {{}}数据绑定
• html组件化
• 支持表单验证
• DOM控制结构

新标记
1.directive 指令
通过html属性或元素来为页面添加特定的行为。

2.{{expression | filter}} 双括号
其中expression不是代表全局变量，是作用域Scope中的变量，代表了model。
filter 是过滤器，可以修改显示的样式，不是css样式。
实现了动态绑定，view和model的双向数据绑定

ng-app = “model as name” 推荐使用模块，在模块中写入controller，创建model实例，并且把这个实例赋值给当前scope中的name变量

Service服务和依赖注入
如果要创建大型应用的话，我们最好把与控制器和视图无关的逻辑都放入到服务中去，我们写入factory，如下：

angular.module('calcu', [])
  .factory('calcuServer', function() {
    var type= ['USD', 'EUR', 'CNY'],
   usdToForeignRates = {
      USD: 1,
      EUR: 0.74,
      CNY: 6.09
    };
    return {
      type: type,
      convert: convert
    };
 
    function convert(amount, inCurr, outCurr) {
      return amount * usdToForeignRates[outCurr] * 1 / usdToForeignRates[inCurr];
    }
  });

那么我们怎么使用呢？
angular中每一样东西都是使用依赖注入的方式来创建或使用的,要想注入依赖，
你必须先把这些需要协同工作的对象和函数注册到model模块中，

1. 模板中ng-app绑定模块
2. model中注入依赖
   angular.module('invoice', ['finance']) .controller('InvoiceController', ['currencyConverter', function(currencyConverter) { }]);

把数组当作参数传入，使用服务

初始化
先找到模块，再通过ng-app为根节点，来遍历DOM树。