AngularJS学习笔记

Posted 2022-12-10 海鲜小王子

AngularJS在加载启动时，会做3件事情：
1.依赖注入
2.创建 root scope作为整个模型的上下文
3.从ngApp开始编译DOM，处理后续的指令和绑定

当它启动后，它会等待浏览器的输入事件（鼠标、HTTP请求等），若输入事件改变了model，那么AngularJS会通过更新绑定，将model的改变反应到view上。

AngularJS中指令都是带有短划线(-)的，自定义的属性都是驼峰命名的
1.ng-app:
2.ng-controller:定义了一个叫做PhoneListController的控制器，并且向module（phonecatApp）注册。model模型（手机的数据）在controller中，model由controller实例化，controller函数就是一个简单的构造函数。参数scope在该controller范围内都是有效的。scope是template、model、controller之间的联系纽带（template可以理解为是view中的一部分，包括数据绑定、展示逻辑）。
我们在scope下分配参数，可以在其他页面（使用相同的controller）使用该参数，这样交互就会显得比较灵活。但是这种方法只适用于小型的系统，若在大型系统上，紧耦合就会成为一个问题。
3.ng-repeat:
PS：不要搞错module模块和model模型，MVC里的M是指model。

// Define the `phonecatApp` module
var phonecatApp = angular.module('phonecatApp', []);

// Define the `PhoneListController` controller on the `phonecatApp` module
phonecatApp.controller('PhoneListController', function PhoneListController($scope) 
  $scope.phones = [
    
      name: 'Motorola XOOM™ with Wi-Fi',
      snippet: 'The Next, Next Generation tablet.'
    , 
      name: 'MOTOROLA XOOM™',
      snippet: 'The Next, Next Generation tablet.'
    
  ];
);

component

相对于上述例子，还有一些地方我们可以改进：
1.如果我们要复用template和controller，在上面的例子中，我们需要把他们都复制到复用的地方，这样容易出错。
2.我们把变量都赋值到scope下面，这样会造成混乱。

//组件greetUser向模块myAPP注册
angular.
  module('myApp').
  component('greetUser', 
    template: 'Hello, $ctrl.user!',
    controller: function GreetUserController() 
      this.user = 'world';
    
  );

我们可以在html中使用标签<greet-user></greet-user>，然后AngularJS会用template去替换它。$ctrl在默认情况下，代表着controller。我们在controller的构造函数中用this代替了在scope下赋值。标签<greet-user></greet-user>可以自任何地方使用，也实现了最大限度的解耦。我们也不用担心component会在其他地方被修改，因为template、controller都在component里面。
避免直接使用scope，这是一条最佳实践。

文件组织的最佳实践

1.一个特性一个文件

不要把controller都放在一个js文件里，不要把component都放在一个js文件里。比如上述的componentgreetUser，需要放在greetUser.component.js里，那么在这js文件里就不要放其他东西了。

2.按特性组织

按照1中的方法，一个文件放置一个特性，那么在app/目录下会产生许多文件，我们需要将这些文件按特性组织成文件夹。如果在许多的地方都会用到同一个特性，那么我们就把这个特性文件夹放到aap/core/里面。

app/
  phone-list/
    phone-list.component.js
    phone-list.component.spec.js(test)
  core/
    feature1/
      xxx.js
      xxx.spec.js
  app.js

// phone-list.component.js
// Register `phoneList` component to module 'phonecatApp'
angular.
  module('phonecatApp').
  component('phoneList',...)

// app.js
// Define the `phonecatApp` module
// 模块phonecatApp没有依赖其他模块，只有它本身
angular.module('phonecatApp', []);

3.模块化

如果现在有其他应用要用到phone-list，我们不需要重复发明轮子，只需要把目录phone-list/复制到新应用下。但是我们发现，原来在phone-list/中，componentphoneList是向modulephonecatApp注册的，在新的应用中，应用名就不叫phonecatApp了，这时我们需要把phonecatApp都改为当前的应用名。显然，这样的改动容易出错且重复劳动。我们有更好的方法去做这件事。引用一句最近在《Head first 设计模式》上看到的话，对改动关闭，对扩展开放，我们不要去改动已有代码，这样可能在修改一个bug的同时代入另外一个bug，我们应该是封装、抽象、扩展我们已有的代码。
1.新建一个phone-list.module.js文件，把component提高到module层次。
2.在新的应用newApp中，添加phonecatApp依赖

app/
  phone-list/
    phone-list.module.js
    phone-list.component.js
    phone-list.component.spec.js
  core/
    feature1/
      xxx.js
      xxx.spec.js
  app.js

//app/phone-list/phone-list.module.js:
// Define the `phonecatApp` module
angular.module('phonecatApp', []);

// phone-list.component.js
// Register `phoneList` component to module 'phonecatApp'
angular.
  module('phonecatApp').
  component('phoneList',
    template:
      '<ul>' +
        '<li ng-repeat="phone in $ctrl.phones">' +
          '<span>phone.name</span>' +
          '<p>phone.snippet</p>' +
        '</li>' +
      '</ul>',
      ...
  )

// app.js
// Define the `newApp` module
angular.module('newApp', [
  // ...which depends on the `phonecatApp` module
  'phonecatApp'
]);

4.使用外部模板

在3中，component里面的template是内嵌式的html，这样不易于维护和模块化，我们把内嵌式的html改为外部的html。这里有一个点需要注意：当AngularJS解析到templateUrl时，会发起一个HTTP请求，虽然AngularJS使用了延时加载和缓存技术，但随着外部模板变多，HTTP请求也不可避免的变多。详细可以参阅$templateRequest和$templateCache这两项服务。

// phone-list.component.js
angular.
module('phoneList').
component('phoneList', 
  // Note: The URL is relative to our `index.html` file
  templateUrl: 'phone-list/phone-list.template.html',
  controller: ...
);

// phone-list.template.html
<ul>
  <li ng-repeat="phone in $ctrl.phones">
    <span>phone.name</span>
    <p>phone.snippet</p>
  </li>
</ul>

//最终的目录
app/
  phone-list/
    phone-list.component.js
    phone-list.component.spec.js
    phone-list.module.js
    phone-list.template.html
  app.css
  app.js
  index.html

第六节.双向数据绑定

双向数据绑定是指view和model在两个方向上都绑定住了。如果我们在浏览器上改变view，那么就会反应到model里面，进而改变model。如果我们在代码里面改变model，那么就会向外反应到view上。

第七节.依赖注入

使用内置的http服务为例子。
$http服务会让AngularJS在客户端发起一个http请求，在下面的例子中，http去请求一个json文件，路径是相对于index.html来说的。服务的名字需要作为参数传入到controller的构造函数中。服务的名字很重要，不能写错，注入器就是依靠名字去寻找依赖的。注入器在加载一个服务时，会分析这个服务会依赖其他哪几个服务，然后依次去加载服务。

angular.
  module('phoneList').
  component('phoneList', 
    templateUrl: 'phone-list/phone-list.template.html',
    controller: function PhoneListController($http) 
      var self = this;//this对象在闭包中会发生变化，在这里将this保存成一个变量，该变量在闭包中的含义不会发生变化
      self.orderProp = 'age';
      //phone的数据不像之前被写死，而是由http请求去json文件里面读取
      $http.get('phones/phones.json').then(function(response) 
        self.phones = response.data;
      );
    
  );

AngularJS内置的服务都是带有$前缀的，如果我们要定义自己的服务，就不要带$前缀。而且我们会看到在Scope下面，有些变量是带有$$前缀的，那说明这个变量是私有的，虽然我们还是可以去访问，但不建议这么做。

JS在发布前都会经过压缩混淆，混淆其中有个步骤就是替换局部变量，如果$http这个变量被替换了，AngularJS就识别不出来使用了内置的http服务，所以针对混淆，代码要换个结构。有以下两种方法：
1.创建$inject属性
$inject后面跟一组字符串，字符串就不会被js混淆替换掉，这些字符串就是要依赖的服务。

function PhoneListController($http) ...
PhoneListController.$inject = ['$http'];
...
.component('phoneList', ..., controller: PhoneListController);

2.使用内联的注解
在controller后面跟一组字符串。

function PhoneListController($http) ...
...
.component('phoneList', ..., controller: ['$http', PhoneListController]);

2.1使用内联的注解
当我们使用方法2时，一般都是把构造函数也内联进来。（在刚接触AngularJS时，经常看到这种形式的内联，当时就感觉JS代码一层套一层好复杂，一句话好长，而且对$http出现2次感到不解）

.component('phoneList', ..., controller: ['$http', function PhoneListController($http) ...]);

对本例代码使用2.1的注解形式：

//app/phone-list/phone-list.component.js
angular.
  module('phoneList').
  component('phoneList', 
    templateUrl: 'phone-list/phone-list.template.html',
    controller: ['$http',
      function PhoneListController($http) 
        var self = this;
        self.orderProp = 'age';

        $http.get('phones/phones.json').then(function(response) 
          self.phones = response.data;
        );
      
    ]
  );

第九节.路由和多视图

依赖注射器做以下3件事：
1.加载定义的module
2.注册所有在module后面定义的Providers
3.当要使用服务了，这些服务和他们的依赖，就会通过他们的Providers被传入注射依赖函数
Providers是一个对象，这个对象可以创建相应的服务。
在url上加前缀!是一个最佳实践，如urlhttp://127.0.0.1:8000/#!/phones

关于自模块的依赖：

// app/app.js
angular.module('phonecatApp', [
  'ngRoute',
  'phoneDetail',
  'phoneList'
]);

// app/phone-detail/phone-detail-module.js
angular.module('phoneDetail', [
  'ngRoute'
]);

顶层模块phonecatApp和子模块phoneDetail都包含ngRoute服务，如果我们把phoneDetail中的ngRoute去掉，程序也是可以工作的，但不建议这么做，因为这样会破坏模块化，子模块不应该依赖由父模块继承下来的服务。假如phoneDetail模块被放到其他地方，这个顶层模块没有ngRoute，那么phoneDetail模块就不能正常工作。我们不用担心多个模块包含了多份一样的服务会造成多余的浪费，AngularJS只会加载一份服务。