AngularJs1.5.0-ngController

查看Angularjs的ngController的API 文档，发现官方提供的示例跟平时我的使用是不一样的。

API传送门：https://docs.angularjs.org/api/ng/directive/ngController

Plunker地址：http://plnkr.co/edit/b07kfAvLtUhVYtxYUYky?p=preview

官方是怎么解释ng-controller使用的方法呢——两种声明方法：

1. one binds methods and properties directly onto the controller using this:

ng-controller = ‘SettingsController1 as settings‘

粗略的翻译一下,如有错误，请指正：直接在一个使用this的controller上绑定方法和属性的，在html页面上作如下声明： ng-controller = ‘SettingsController1 as settings‘。

个人认为这里定义的SettingsController1其实相当于JavaScript的类。

2. one injects $scope into the controller: ng-controller = "SettiongsController2"

把$scope作为值传入Controller中就使用ng-controller = "SettiongsController2"。

所以，ng-controller的第二种用法，就是可以使用一个JavaScript的类来作为个controller。

代码如下：

1. 首先在js文件中声明一个类，并且使用angular.module.controller来定义一个controller。

function SettingsController1() {
  this.name = "John Smith";
  this.contacts = [
    {type: ‘phone‘, value: ‘408 555 1212‘},
    {type: ‘email‘, value: ‘[email protected]‘} ];
}

SettingsController1.prototype.greet = function() {
  alert(this.name);
};

angular.module(‘controllerAsExample‘, [])
  .controller(‘SettingsController1‘, SettingsController1);

2. 在html中使用ng-app 和ng-controller。

<div id="ctrl-as-exmpl" ng-controller="SettingsController1 as settings">

<label>Name: <input type="text" ng-model="settings.name"/></label>

<button ng-click="settings.greet()">greet</button><br/>

</div>