Angular1 Ngcourse

angular1

// Angular 1 - ngCourse:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8"/>
    <meta http-equiv="X-UA-Compatible" content="IE-edge"/>
    <meta name="viewport" content="width-device-width, initial-scale=1.0, maximum-scale=1"/>
    <title>...</title>
  </head>
  <body>
    <div>Hello World!</div>
  </body>
</html>

angular.module('ngCourse', []);
angular.element(document).ready(
  () => angular.bootstrap(document, ['ngCourse'])
);

Angular 1 - Directives:

In Angular 1, directives are the building blocks of our application.  Directives 
can be described as markers on the DOM tree that allows us to define custom 
behavior and or transformation on that DOM element.  To define a directive:

var app = angular.module('ngCourse',[]);
app.directive('ngcMain', () => ({
  restrict: 'E', // vs 'A', 'AE'
  replace: true,
  scope: {}, // vs 'true', 'null'
  template: '<span>Hello world</span>'
}));

Now, we can use the above directive in our HTML:

<body>
  <ngc-main></ngc-main>
</body>

Notice that we used camelCase when we defined the directive, but we used 
hyphen when inserting them into the HTML.

What does the above directive accomplish?  What are the meaning of the restrict 
attribute and the scope attribute?

The way that we defined our directive as above will throw away anything that 
we included between the <ngc-main> start tag and its end tag.  In some situation 
we would like to preserve this content and show it on the page.  To achieve 
this, we need to add transclude:true when we define the directive.

To add behavior to our directive, define a controller class:

class MainDirectiveCtrl {
  primvate useDisplayName;
  constructor() {
    this userDisplayName = 'Mike Tyson';
  }
}

and add:

controller: MainDirectiveCtrl,
controllerAs: 'ctrl',
bindToController: true

to where we defined the directive.  We also modify the template string to be:

<span>Hello, {{ ctrl.userDisplayName }}.</span>

The double curly-brace / moustach is used to bind the controller's property to 
the template.

The template is just an HTML snippet defining a view that represent this 
directive.  Template have access to any properties or functions defined on the 
directive's controller scope.

The template / HTML should be in a file named such as main-component.html.  The 
controller class should be in a file named such as main-component.ts

export class MainComponent {
  private username;
  private numberOfTasks;

  static selector = 'ngcMain';

  static directiveFactory: ng.IDirectiveFactory = () => {
    return {
      restrict: 'E',
      scope: {},
      template: require('./main-component.html'),
      controller: MainComponent,
      controllerAs: 'ctrl',
      bindToController: true
    }
  };

  constructor() {
    this.username = 'alice';
    this.numberOfTasks = 0;
  }
}

If we are not familiar with TypeScript and the fat arrow syntax, the line 
containing directiveFactory above can look pretty scary, but basically, we just 
declare a static variable named directiveFactory of type ng.IDirectiveFactory 
and assign to it an anonymous function that returns a JSON object.

Notice that the Directive Definition Object is defined inside the controller 
class, and the controller class is referenced right inside itself.

Components in Angular 2 share many of important similarities with component 
directives from Angular 1.  Now, change our app.ts to let Angular know about our 
component via the .directive() function:

angular.module('ngcourse')
  .directive(
    MainComponent.selector,
    MainComponent.directiveFactory
  );

Remember that the .directive function takes two parameters.  The first parameter 
is a string, which is the name of the directive.  The second parameter is a 
function implementing the behavior of the directive.  And now, we can use this 
component in our index.html:

<body>
  <ngc-main></ngc-main>
</body>

To implement event handling, add the event-handling function to the component 
class:

export class MainComponent {
  ...
  public addTask() {
    this.numberOfTasks += 1;
  }
};

and modify our component's template:

<div>
  <span>
    Hello, {{ ctrl.username }}!
    You've got {{ ctrl.numberOfTasks }} tasks.
    <button ng-click="ctrl.addTask()">Add task</button>
  </span>
</div>

Now, lets take a look at dependency injection:

export class MainComponent {
  ...
  static $inject = ['$log', '$scope']
  ...
  constructor(private $log, private $scope) {
  }
}

The private variables declared on the constructor function is automatically 
created and point to the objects that are injected in.

<div>
  <div ng-hide="ctrl.isAuthenticated">
    Username: <input ng-model="ctrl.username"/><br/>
    Password: <input type="password" ng-model="ctrl.password"/><br/>
    <button ng-click="ctrl.login()">Login</button>
  </div>
  div ng-show="ctrl.isAuthenticated">
    Hello, {{ ctrl.username }}!
    You've got {{ ctrl.numberOfTasks }} tasks<br/>
    <button ng-click="ctrl.addTask()">Add task</button>
  </div>
</div>

We can create the file app/src/components/index.ts and put the following lines 
in there:

export * from './task-list/task-list-component';
export * from './main/main-component';

Now, in our app.ts file, we can change our import statement:

import {MainComponent, TaskListComponent} from './components/index';

ES6's module system is smart enough to figure out that index.ts is the default 
file in the directory, so we can simplify this event further:

import {MainComponent, TaskListComponent} from './components';

angular.module('moduleName',[])
  .constant('API_BASE_URL', 'https://someserver.com');

An angular app is basically just an angular module.

Each module can define a .config() and a .run() sections.  The .run() method is 
essentially our module's equivalent of the main block.

app.run($log => $log.info('All ready'));

We can use $q.when(value) to create a promise that resolve to value, and 
$q.reject(error) to create a promise that rejects with error.
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License