Angular

Index

General

  • Angular (AngularJS >= 2.0)
    • Languages
      • JavaScript
        • TypeScript
        • Dart
      • Basics
        1. Overview
        2. Architecture
        3. Displaying data
        4. User input
        5. Forms
        6. Dependency injection
        7. Template syntax
        8. Angular cheat sheet
        9. Style guide
        10. Glossary
      • Buiding blocks



        • description
          properties




          HTML template




          Modules boxes for:
          Components class to manage templates



          Services application logic



          types:
          Angular modules (@NgModule)

          • declarations: the view classes that belong to this module
          • exports: the subset of declarations that should be visible and usable in the component templates of other modules.
          • imports: other modules whose exported classes are needed by component templates declared in this module
          • providers: creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app
          • bootstrap: the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.
          app/app.module.ts

          import { NgModule }      from '@angular/core';
          import { BrowserModule } from '@angular/platform-browser';
          @NgModule({
            imports:      [ BrowserModule ],
            providers:    [ Logger ],
            declarations: [ AppComponent ],
            exports:      [ AppComponent ],
            bootstrap:    [ AppComponent ]
          })
          export class AppModule { }

          app/main.ts

          import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
          import { AppModule } from './app.module';

          platformBrowserDynamic().bootstrapModule(AppModule);










        • name
          app
          one root module
          AppModule
          several featured modules



        • view classes
          components
          directives
          pipes

        • Modules
        • Components
        • Templates
        • Metadata
        • Data binding
          • direction


            example
            DOM
            <-
            component
            {{value}}
            interpolation
            <li>{{hero.name}}</li>
            <-
            [property] = "value"
            property binding
            <hero-detail [hero]="selectedHero"></hero-detail>
            ->
            (event) = "handler"
            event binding
            <li (click)="selectHero(hero)"></li>
            <->
            [(ng-model)] = "property"
            two-way data binding
            <input [(ngModel)]="hero.name">
        • Directives
          • kind
            description
            examples
            component a decorator function that takes a metadata object as argument
            • @Component({
                selector: 'my-app',
                template: '<h1>My First Angular 2 App</h1>'
              })
            • @Component({
                selector:    'hero-list',
                templateUrl: 'app/hero-list.component.html',
                directives:  [HeroDetailComponent],
                providers:   [HeroService]
              })

            structural alter layout by adding, removing, and replacing elements in DOM
            • <li *ngFor="let hero of heroes"></li>
            • <hero-detail *ngIf="selectedHero"></hero-detail>
            attribute alter the appearance or behavior of an existing element
            • ...
            • <input [(ngModel)]="hero.name">

        • Services
        • Dependency injection
          • "An injector maintains a container of service instances that it has previously created."
          • provider (registration)
            • at general level: app/main.ts (bootstrap)
              • bootstrap(AppComponent, [BackendService, HeroService, Logger]);
            • at component level (@Component metadata): app/hero-list.component.ts (providers)
              • @Component({
                    ...
                    providers:   [HeroService]
                })
          • usage
            • app/hero-list.component.ts
              • constructor(private my_service: HeroService) { }
        • Other
      • Quick start


        • TypeScript JavaScript
          Prerequisites

          • Node.js
            • node -v (v4.x.x)
          • npm
            • npm -v (3.x.x)
          Step 1: Create and configure the project
          Create the project folder
          • mkdir angular2-quickstart
          • cd angular2-quickstart
          Add package definition and configuration files
          • package.json
          • tsconfig.json
          • typings.json
          • systemjs.config.js
          • package.json
          Install packages npm install
          Step 2: Our first Angular component
          Create an app subfolder
          mkdir app
          Create the component file
          app/app.component.ts
          • import { Component } from '@angular/core';

            @Component({
              selector: 'my-app',
              template: '<h1>My First Angular 2 App</h1>'
            })

            export class AppComponent { }

          app/app.component.js
          • (function(app) {
              app.AppComponent =
                ng.core.Component({
                  selector: 'my-app',
                  template: '<h1>My First Angular 2 App</h1>'
                })
                .Class({
                  constructor: function() {}
                });
            })(window.app || (window.app = {}));

          Step 3: Add main

          app/main.ts
          • import { bootstrap } from '@angular/platform-browser-dynamic';

            import { AppComponent } from './app.component';

            bootstrap(AppComponent);

          app/main.js
          • (function(app) {
              document.addEventListener('DOMContentLoaded', function() {
                ng.platformBrowserDynamic.bootstrap(app.AppComponent);
              });
            })(window.app || (window.app = {}));

          Step 4: Add index.html



          Step 5: Build and run the app








      • Tutorial
    • AngularJS (Google) (wp)
    • Info
    • Tutorials
    • Exemples / Examples
    • UI
    • Upload
    • Mobile
    • Javascript tools
      • Karma (JavaScript test runner)
      • Jasmine (test framework)
      • Grunt (task runner)
      • Bower (package manager for client-side JavaScript components, dependencies)
      • Yeoman
        • components
          • Grunt
          • Bower
          • Yo (scaffolding)

      Bastida / Scaffolding

      • AngularJS best practices: directory structure
      • Yo
        • generators
        • examples
        • usage
          • mkdir my_project
          • cd my_project
          • yo angular
          • grunt serve
        • troubleshooting
          • yo creates files in wrong dir
            • search for file .yo-rc.json and remove it
        • Estructura / Structure
          • bower.json
          • .bowerrc
          • .editorconfig
          • .gitattributes
          • .gitignore
          • Gruntfile.js
          • .jscsrc
          • .jshintrc
          • package.json
          • README.md
          • .yo-rc.json
          • app/
            • index.html
            • robots.txt
            • images/
              • yeoman.png
            • scripts/
              • app.js
              • controllers/
                • about.js
                • main.js
            • styles/
              • main.css
            • views/
              • about.html
              • main.html
          • test/
          • (bower_components/)
          • (node_modules/)
      • angular-seed
        • Instal·lació / Installation
          • git clone --depth=1 https://github.com/angular/angular-seed.git my_project
          • cd my_project
          • npm install
            • will install (according to bower.json):
              • node_modules
              • app/bower_components
          • npm start
          • http://localhost:8000/app/index.html

      Editors

      Debug

      Django Rest Framework

      Video

      • What I learnt about HTML5 video and AngularJS
      • AngularJS video source directive
      • Problemes / Problems
        • ngSrc doesn't work properly with HTML5 Video Source tag #1352
        • HTML5 Video is not working with AngularJS ng-src tag
        • videojs + hls
          • Si video es troba dins de ng-view, cal afegir la directiva vjs-video. Si no, no fa cas de class="video-js vjs-default-skin" i els controls són del video HTML5 per defecte.
          • mp4
            • per a poder fer servir {{}}, cal posar html5vfix i vsrc directament a l'etiqueta video. Si la posem a l'etiqueta source, no funciona.
          • hls
            • no funciona si posem una src fixa dins de l'etiqueta video
            • sí que funciona si posem una src fixa dins de l'etiqueta source
            • no funciona amb html5vfix



          • directive




            -
            vjs-video
            static



            mp4

            <video class="video-js vjs-default-skin">
              <source src="...mp4">
            ok (però no fa autostart)
            ok (però no fa autostart)
            <ng-view>
            <video class="video-js vjs-default-skin">
              <source src="...mp4">
            html5 video bàsic (fa autostart)
            ok (fa autostart)
            hls

            <video class="video-js vjs-default-skin">
              <source src="...m3u8">
            ok (fa autostart) ok (fa autostart)
            <ng-view>
            <video class="video-js vjs-default-skin">
              <source src="...m3u8">
            ok (fa autostart) ok (fa autostart)
            dynamic







            mp4



            <video class="video-js vjs-default-skin">
              <source vsrc="...mp4" html5vfix>
            ok (fa autostart) x
            video src="undefined"
            source vsrc="...mp4" src="...mp4"
            <video class="video-js vjs-default-skin" vsrc="...mp4" html5vfix>
            ok (fa autostart) ok (fa autostart)
            <ng-view>
            <video class="video-js vjs-default-skin">
              <source vsrc="...mp4" html5vfix>
            html5 video bàsic (fa autostart)
            (però si algun altre al pare ha posat vjs-video, va bé)
            si té un id, la primera vegada ho fa bé (però sense autostart), però si es recarrega ja torna a html5 video bàsic
            x
            video src="undefined"
            source vsrc="...mp4" src="...mp4"
            <ng-view>
            <video class="video-js vjs-default-skin" vsrc="...mp4" html5vfix>
            ok (fa autostart) ok (fa autostart)
            hls



            <video class="video-js vjs-default-skin">
              <source vsrc="...m3u8" html5vfix>
            ok (fa autostart) negre (no fa start)
            video
            source vsrc="...m3u8" src="...m3u8"
            <video class="video-js vjs-default-skin" vsrc="...m3u8" html5vfix> x
            video vsrc="...m3u8" src="...m3u8"
            x
            video vsrc="...m3u8" src="...m3u8"
            <ng-view>
            <video class="video-js vjs-default-skin">
              <source vsrc="...m3u8" html5vfix>
            ok (fa autostart) negre (no fa start)
            video
            source vsrc="...m3u8" src="...m3u8"
            <ng-view>
            <video class="video-js vjs-default-skin" vsrc="...m3u8" html5vfix>
            x
            video vsrc="...m3u8" src="...m3u8"
            x
            video vsrc="...m3u8" src="...m3u8"

      • Reproductors de vídeo HTML5 / HTML5 Video players
        • Videogular
        • ngVideo
        • ngMedia
        • Video.js
          • Alternative Setup for Dynamically Loaded HTML
          • angular single page app, videoJS ready function only fires on page load
          • Directive on same element as ng-repeat, need ng-repeat to run first and use its value
          • AngularJs and VideoJs problem: Video only loaded on hard refresh, not on switching page
          • Solution
            • directives.js
              • angular.module('myProject.directives', [])

                .directive('html5vfix', function() {
                    return {
                        restrict: 'A',
                        link: function(scope, element, attr) {
                            attr.$set('src', attr.vsrc);
                            attr.$set('type', attr.vtype);
                        }
                    }
                })

                .directive('myvideojs', function () {
                    var linker = function (scope, element, attrs){

                            var setup = {
                                'techOrder' : ['html5', 'flash'],
                                'controls' : attrs.controls=="" || false,
                                'loop' : attrs.loop || false,
                                'preload' : 'auto',
                                'autoplay' : attrs.autoplay || false,
                                'height' : attrs.height || 180,
                                'width' : attrs.width || 320
                            };

                            element.attr('id', attrs.id);
                            var player = videojs(attrs.id, setup, function(){
                            });
                           
                            scope.$on('$destroy', function () {
                                player.dispose();
                            });
                        }
                    return {
                        restrict : 'A',
                        link : linker
                    };
                });

            • index.html
              • <!DOCTYPE html>
                <html>
                <head>
                  <title>My Title</title>
                  <link href="styles/app.css" rel="stylesheet" type="text/css">

                    <!-- videojs css -->
                    <link href="http://vjs.zencdn.net/5.6.0/video-js.css" rel="stylesheet">
                </head>

                <body ng-app="myProjectApp">
                    <h1>My Project</h1>
                   
                    <ng-view></ng-view>
                   
                    <!-- angular.js -->
                    <script src="bower_components/angular/angular.js"></script>
                    <script src="bower_components/angular-route/angular-route.js"></script>

                    <!-- video.js -->
                    <script src="http://vjs.zencdn.net/5.6.0/video.js"></script>
                    <!-- hls for video.js -->
                    <script src="scripts/videojs.hls.js"></script>
                 
                    <!-- app -->
                    <script src="scripts/app.js"></script>
                    <script src="scripts/services/services.js"></script>
                    <script src="scripts/controllers/controllers.js"></script>
                    <script src="scripts/directives/directives.js"></script>
                   
                </body>
                </html>

            • my_partial.html
              • <li ng-repeat="my_video in my_videos">
                  <video myvideojs id="{{my_video.id}}" class="video-js vjs-default-skin" preload="auto" autoplay="true" controls>
                    <source vsrc="{{myvideo.url}}" type="{{myvideo.mime_type}}" html5vfix/>
                  </video>
                </li>

          • vjs-video

      Desenvolupament / Development

      • Examples
        • Add some control
          • index.html
            todo.js
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
            <script src="todo.js"></script>

            ng-app="todoApp"
                angular.module('todoApp', [])
                  .controller('TodoListController', function() {
                    var todoList = this;
                    todoList.todos = [
                      {text:'learn angular', done:true},
                      {text:'build an angular app', done:false}];
                
                    todoList.addTodo = function() {
                      todoList.todos.push({text:todoList.todoText, done:false});
                      todoList.todoText = '';
                    };
                
                    todoList.remaining = function() {
                      var count = 0;
                      angular.forEach(todoList.todos, function(todo) {
                        count += todo.done ? 0 : 1;
                      });
                      return count;
                    };
                
                    todoList.archive = function() {
                      var oldTodos = todoList.todos;
                      todoList.todos = [];
                      angular.forEach(oldTodos, function(todo) {
                        if (!todo.done) todoList.todos.push(todo);
                      });
                    };
                  });


            ng-controller="TodoListController as todoList"
            <li ng-repeat="todo in todoList.todos">
                <input type="checkbox" ng-model="todo.done">
            <form ng-submit="todoList.addTodo()">

      i18

      http://www.francescpinyol.cat/angularjs.html
      Primera versió: / First version: 10.II.2016
      Darrera modificació: 13 de setembre de 2017 / Last update: 13th September 2017

      Valid HTML 4.01!

      Cap a casa / Back home