Angular Tutorial (1)

1. Template

ng-app -> angular.module('...',[])

ng-controller -> moduleApp.controller('..',function($scope){})

{{variable.attribute}} or ng-model="xxx"-> $scope.variable.attribute

App Scope -> Controller Scope -> function Scope(eg : ng-repeat)

2.Component

Since this combination (template + controller) is such a common and recurring pattern, Angular provides an easy and concise way to combine them together into reusable and isolated entities, known as components

angular.module('myTestApp').component('myTest',{

    template: 'html',

    controller : function XXController(){

        ...

    }

})

<my-test></my-test>

3. Organization

app/
  phone-list/
    phone-list.component.js
    phone-list.component.spec.js
    phone-list.module.js
    phone-list.template.html
  app.css
  app.module.js
  index.html

app/app.module.js

angular.module('phonecatApp', [
  'phoneList'
]);

app/phone-list/phone-list.module.js

angular.module('phoneList', []);

app/phone-list/phone-list.component.js

angular.
module('phoneList').
component('phoneList', {
  templateUrl: 'phone-list/phone-list.template.html',
  controller: ...
});

app/phone-list/phone-list.component.spec.js

describe('phoneList', function() {
  beforeEach(module('phoneList'));
});