קורס Front-End Web Development שיעור מבוא לאנגולר

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/html5-web-development/lessons/angular-intro
#2

הפתרון שלי לתרגיל שהופיע בתחתית הדף:


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
  <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
  <title>CodePen - Angular Clicks Counter</title>
  
</head>

<body translate="no" >

  <div ng-app="myApp">
  <div ng-controller="mainController as vm">
    <p>Clicks: 
      <span ng-bind="vm.clicks"></span>
    </p>
    <button ng-click="vm.click()">Click Me</button>
    <p ng-bind="vm.congrat()"></p>
  </div>
</div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js'></script>

  

    <script >
      angular.module('myApp', []);

angular.module('myApp').controller('mainController', MainController);

function MainController() {
  this.clicks = 0;
  this.click = function() {
    this.clicks++;
  };
  this.congrat = function() {
    return this.clicks >= 10 ? "Bravo!" : "";
  };
  
}
</script>
</body>

</html>

ועכשיו את אותו תוכנית רק בתחביר של JAVASCRIPT:

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
  <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
  <title>CodePen - Angular Clicks Counter</title>
  
</head>

<body translate="no" >

  <div>
  <div>
    <p>Clicks: 
      <span class="showClicks"></span>
    </p>
    <button >Click Me</button>
    <p class="bravo"></p>
  </div>
</div>
    <script>
            let span = document.body.querySelector(".showClicks");
            let p = document.body.querySelector(".bravo");
            let button = document.body.querySelector('button');
            span.textContent=0;
            function click(){
                this.click=function (){
                this.clicks++;
                }
                this.click();
                span.textContent=this.clicks;
                if(this.clicks===10){
                    p.textContent=this.clicks >= 10 ? "Bravo!" : "";
                }
            }
            button.clicks=0;
            button.addEventListener("click",click);
  </script>
</body>

</html>
לייק 1
#3

Blockquote

למה צריך להגדיר את המודל וגם את ה- VIEW(CONTROLER) , השאלה היא מבחינת מפתחי ה-FW , למה הם עשו את זה כך ?

#4

ניסיתי להוסיף פונקציה נוספת ב- JS כך שתשנה את הערך חיצונית מאנגולר - ולראות אם המשתנה באנגלור מקבל את הערך החדש , וזה לא עבד

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

angular.module('myApp').controller('mainController', function() {});

var btn=document.getElementById("btnTest");
var p= document.querySelector("p");

btn.addEventListener('click',function(){p.value=100;});
#5

כשחילקת את הקוד אנגולר לכמה קבצים - שמת את הפונקציות בתוך סוגריים.

  1. למה ?
  2. איך אנגולר יודע מה להריץ ראשון ? ומי בכלל קורא לפונקציות הללו ?
#6

לגבי המשימה - זה הפתרון שלי

#7

  1. למה אתה מתכוון כשאתה כותב ״מודל״? באנגולר יש משהו שנקרא Controller שלפעמים מכנים אותו גם ViewModel - זה הרכיב שמחזיק את המידע. חוץ ממנו יש עוד כל מיני סוגים של רכיבים עליהם אני מדבר בשיעורים הבאים. אין שם רכיב שנקרא Model.

  2. מדויק - אנגולר מזהה רק את השינויים שקורים דרכו. יש אפשרות לספר לאנגולר שעשית שינויים מבחוץ ואני מדבר עליהן בשיעורים הבאים.

  3. כתיבת קוד בתוך סוגריים היא פרקטיקה שנקראת Self Invoking Functions. אפשר לקרוא עליה בהרחבה כאן:
    https://sarfraznawaz.wordpress.com/2012/01/26/javascript-self-invoking-functions/

#8
  1. אני מתכוון למה צריך גם angular.module , וגם angular.module(‘myApp’).controller ?
    2.זאת בדיוק השאלה - הרי מדובר בקובץ JS רגיל אז איך הוא יכול להעלים את הפקודות שאני כותב - או שזה לא קובץ JS רגיל ורק האנגולר מריץ אותו ?
    3.אוקי הבנתי עכשיו שאפשר להריץ את הפונקציה בעצמה - אבל איך הוא יודע מה ירוץ ראשון ? אם הם בקבצים נפרדים?
#9

  1. זה בשביל להשאיר את האופציה שיהיו כמה Applications שונים באותו דף (תזכור שלכל controller יש שם אז אולי יש פה חשש מהתנגשות בשמות שלהם)

  2. בדיוק בגלל שזה קובץ JS רגיל-
    אנגולר לא מעלים את הפקודות שאתה כותב אלא המצב הוא הפוך: זה אנגולר שמפעיל את הפקודות. כלומר כשאתה מתוך אנגולר מעדכן משתנה ב Controller אנגולר מזהה את השינוי ומפעיל פקודה שלו כדי לעדכן את ה DOM לערך החדש. אבל אם אתה עושה בדיוק את אותו דבר ״מחוץ״ לאנגולר אז לא יהיה מי שיפעיל את הפקודה לעדכון העמוד. ה Controller כן התעדכן פשוט העדכון שלו לא משפיע ויזואלית.

אני חושב שזה יהיה יותר ברור בשיעורים הבאים כשנלמד איך כותבים פקודות אנגולר כמו ng-bind. פקודות אלה נקראות Directives והן שיוצרות את הקשר בין ה DOM למשתנים על ה Controller

#10

אני נכנסתי לאתר של ANGULAR ועובר אויתם צעד צעד של בניית קובץ לדוגמא מהאתר https://angular.io/guide/quickstart
מה שמוזר שאין בכלל בשום מקום את ההגדרה הזו של

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

angular.module('myApp').controller('mainController', function() {});
#11

מה זה ה- @ כאשר מייצרים קוד דרך ה- angular cli

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';
}
#12

כמו כן כאשר אני עובד עם angular cli אני לא מצליח להגיע למשתנים של האנגולר דרך הconsol?

angular.element(document.querySelector('p')).scope().vm.clicks

אני מקבל שגיאה שלא מוגדר בכלל משתנה angular

#13

נדמה לי שדיברנו על זה במקום אחר - שים לב שיש שתי גירסאות, אתר angular.io זה לגירסא החדשה. כל מה שמופיע פה בקורס זה לגירסא הישנה. אלה די שתי ספריות שונות לגמרי…

#14

היי,
האם לומדים פה angular.JS ? או אנגולר רגיל?

#15

הי מלכה בקורס זה לומדים Angular.JS הישן יותר. באופן כללי שימי לב שלקורס זה גירסה חדשה יותר (בלי אנגולר) כאן:
https://www.tocode.co.il/bundles/frontend/toc