AngularJS // BootStrap / typescript / TypeLite / Font awesone / ASP.NET Web API 2

• Readme
• Download source - 134 Mb

Components

jQuery - Version 2.2

jQuery JavaScript library is a free, cross-platform created to facilitate client-side scripting in the HTML code of web pages

Bootstrap v3.3.6

bootstrap is a collection of useful tools for creating websites and web applications. This is a set that contains HTML and CSS codes, forms, buttons, navigation and other interactive elements, as well as JavaScript extensions Optional

Police are-awesome

Font Awesome is a vector icons toolkit available online. It allows us to quickly and easily add icons on our own website. Here are some icons present

AngularJS

AngularJS is built around key concepts. Understand that Shyam Seshadri, when he created Angular, invented nothing. He simply used wisely concepts and best practices essential in today's world of web development.

• Architecture MVC (Model-View-Controller): if you know the development, you may have heard of this type of architecture that essential is to have a strict separation between data (Model), presentation of data ( view), and the actions that can be performed on these data (Controller)
• Data Binding: with this concept, the links between your HTML and JavaScript will only be stronger
• .
• Dependency Injection: as the MVC architecture, when we talk about dependency injection, we speak of a leading concept in all development. With this, the modules that you develop will not have to worry instantiate their dependencies.
• The DOM manipulation through directives: DOM manipulation often leads to the creation of easily maintainable and easily testable code. We will see that with Angular, this is not the case at all!

typescript

Platform for the development of large-scale web applications. She permits

• Static typing allowing to type the return values ​​of functions.
• Classes and declaration files acting as interfaces.
• Support functionality from ECMAScript 6.
• full compatibility with JavaScript

TypeLite

TypeLite is a utility to generate the typescript script from .NET classes.

Books STPVideoPlayer.DataLayer

Provides classes to allow entities to communicate with the Web API communication layer. This library is automatically generated via TypeLite

stpvideoplayer

typescript Application to generate the necessary AngularJS app. The application includes

• The guidelines (HTML interface)
• The controllers needed to implement the behavior required by the directives
• The DataService service to access data via the API Web communication layer.

Project Type

Folder Tree

• Controllers: The folder containing the class that provides us the necessary API Service
• fonts contains the font files
• js / app: contains the application
• Scripts: contains basic script files how angular, bootstrap, jquery
• Scripts / TypeLite.Net4.tt contains the statements necessary for our mapping

The js / app

js / app helps contain all typescript files necessary for the application. It contains the following sub-folders

• Controllers: receive all the guidance controllers
• Guidelines: AngularJS under a directive to load a template Html, to associate it with a controller and provide basic behaviors required. This folder will contain all the instructions required for the application
• Services class to provide reusable services by different controllers
• Templates contains the HTML templates used by our instructions
• Interfaces contains the interfaces exposed by the services and controllers

Minimum Implementation

Although it is not mandatory by AngularJS, but we advise you to have the following components

The Scope object

An object that allows sharing of data at either the application or the $ rootScope at the controller $ scope. Scope does not impact the DOM and can be attached to it

• Properties
• Methods
• Event

The application scope is unique $ rootScope application. For more information: https://docs.angularjs.org/guide/scope

Interfacing a Scope

Although it is not mandatory, because the default AngularJS kind Scope: any, it is advisable to strongly typed the scope via an interface. This interface will be stored in the interfaces directory and will be named <Application> _ iScope.

Default Variables in a rootScope

• Url: url web api
• $ servicename: instance of the Data Access Service

The file references _references.ts

_references.ts reference file is used to declare the files to be imported into all of your ts files without having to declare each time. We advise you to segment your file references using regions.

// # Region "global"
...
// # Endregion "global"

The Data Access Service

Interface <Application> _ Idataservice.ts

It is recommended to use an interface to describe the methods exposed by the service. This interface will be stored in the js / app / interfaces and will be named <Application> _I <Service> .ts

The class Service <Application> _dataservice.ts

dataService.ts service provides access to data. It provides CRUD behavior to the application.

• If there are multiple classes, we will name as follows
  : <Application> _Dataservice_ <Object> .ts
  example: app_Dataservice_order.ts for order management and app_Dataservice_customer.ts for managing customer
• Otherwise: <Application> _dataservice.ts example stpvideoplayer_dataservice.ts

Events

You can propagate events relating to the $ rootScope and using the $ broadcast or $ emit method see above
We will use the event to allow videoReceived to notify receiving a video

Make an event from the service

• $ broadcast - transmits the event to all child scopes
• $ emit - transmits the event by respecting the hierarchy of scope

$ and $ digest Apply

$ apply to manually launch the $ digest cycle. If you change a variable directly in the scope, you do not need to use this method. AgularJS will directly detect the change, because it is programmed to do. If you change a variable outside of the framework, it will not. For example, a change made in an Ajax request with JQuery will not be detected by the framework. That's when you need to use $ apply. $ Apply launches $ digest cycle framework, and allows the integration of changes made by methods not managed by the framework

Call a web service API

To call a web service API must use the service $ http: ng.IHttpService
The service exposes two methods

• Get for Appellate http method get
• Post to post the form to http post method

These two methods are called asynchronous and returns a IPromise where T is the expected type
q $ can be used to ensure synchronization at the binding interface with the DOM is going to do well.
Here's how to use

In the Service

this.GetGeneric = (): ng.IPromise <Any> => {
var = this wsurl $ rootScope.url + "/ videoPlayerServer / GetGeneric".
var = $ q.defer deferred ();
return $ http.get (wsurl) .then (
function (response) {
deferred.resolve (response.data);
deferred.promise return;
}, Function (response) {
deferred.reject (response);
deferred.promise return;
});
};

In the controller

this. $ stpvideoplayer_dataservice.GetGeneric (). then (function (result) {

$ Timeout (function () {
$ Scope. $ Apply (function () {
$ Scope.video = result;
$ $ RootScope broadcast ( "videochanged", result).
});
}, 0);

}, Function (error) {
$ Log.error (error.statusText);
});

The directive container

The basic guideline for any application, it is not an obligation of AngularJS but I strongly advise you. It is this directive to be used in the index.html file to embed your application. I advise you to associate with html template file main.tpl.html and a controller <Application> mainCtrl.ts

Tip To subscribe to the ready event for the document object and execute a method when the document is ready, you can:

Example:

var ctrl = this;

angular.element (document) .ready (function () {
ctrl.getnextvideo ();
});

To calculate the duration, jquery offers no features, but you can implement a method in the application and attach it to $ rootscope

Associate a directive and a controller

When reporting a directive, we can associate a controller and a directive, for this we use Property controller

Associate Controller and template

To allow us to access from the HTML template to our controller we need to give him an alias that will be used in our template. For this we use the property controllerAs

Manage scope for the controller and the

It is possible to tell AngularJS whether or not to create a scope for the directive. For this we will use the Scope: true or Scope: false
When asked to create a new Scope, AngularJS creates a new scope of inheriting parent.
For more information: http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

Extending our principal objects

To add certain properties to basic items like our entities serialized by typeLite, it may be necessary to expand our basic purpose entity. AngularJS why we provided the extend method. This method expects two parameter

• Property name
• Subject to overload

Example of use

Application.ts

Each application must have a ts file named Application.ts that will reference the services, controllers and guidelines for use

Statement objects

Declare objects in the following order
 

1. Services
2. Controller
3. Directions

The run () method

Run () block - or is executed after the injector created and is used to start the application. Only instances and constants can be injected into the exploited blocks. This is to prevent further system configuration during the time of the application execution.
We can compare the Run block () to main () method of a .NET console program.

ng-switch: Condition his template depending on the data to display

The switch-ng is a conditional structure switch type that is used directly in the template. It can display a particular element on the value of the expression it evaluates.
Why use ng-switch?

• Offer a different interface depending on the status of the user (administrator / contributor / visitor).
• But that does not stop to check its free server-side
• Manage different display modes of your webapp, (full screen / compact mode / ...)
• In general, present a different visual depending on the context

Use Ng in rule-switch is used how an attribute on the div.
Example

<div ng-switch = "someVar">
<div ng-switch-when = "hey">
</ div>
<div ng-switch-when = "hi">
</ div>
<div ng-switch-default>
</ div>
</ div>

Additional Tip One may need to use a switch-ng without adding to the DOM a div, in this case it can be used directly as a component.

 

 

<ng-switch on = "video.type">
<localplayer ng-switch-when = "local"> </ localplayer>
</ ng-switch>