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
          • ~/.nvm/nvm.sh; nvm use 8.9
          • node -v (v4.x.x)
        • npm
          • npm -v (3.x.x)
        • Angular (ng) (globally)
          • npm install -g @angular/cli
        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
        		ng build [-prod]
        ng serve
        ng serve --host 0.0.0.0





    • 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ó: 20 d'agost de 2020 / Last update: 20th August 2020

Valid HTML 4.01!

Cap a casa / Back home