RSS

תגית: AngularJS

תמונה

Angular in Jerusalem

Angular Course in Jerusalem

עדכונים:

1. הקורס בירושלים בתאריכים 23,29,30 לדצמבר ו-5 לינואר מלא.

2. נפתח מחזור נוסף בירושלים בתאריכים 25,27 לינואר ו-1,3 לפברואר.

לרישום וקבלת פרטים לחצו כאן.

=====================================================

 

בעקבות בקשות רבות לבצע קורס בירושלים, אני שמח להודיע שהקורס ng-course

יהיה בתאריכים 23,29,30 לדצמבר. ו-5 לינואר.

לרישום לקבלת פרטים נוספים לחצו כאן.

לקהל הצפוני, אני מתכנן בתחילת שנת 2016 לעשות קורס בחיפה.

מודעות פרסומת
 
השארת תגובה

פורסם ע"י ב- אוקטובר 19, 2015 ב- Uncategorized

 

תגים: , ,

AngularJS Tips 1–Directive TemplateURL

במספר פרויקטים שהייתי מעורב עלה הצורך לתבניות דינמיות ל- Directives. למשל לבחור תבנית ע"פ שפה,

אם אתה בשפה עברית אתה רוצה להביא מהשרת את הקובץ directiveTemplate.heb-il.html ואם אתה באנגלית את הקובץ directiveTemplate.en-us.html. ע"י כך אתה חוסך מאנגולר את ההתעסקות בבעיית השפות ומשפר את הביצועים.

רוב המפתחים חושבים שעם TemplateUrl אפשר לתת רק string של URL ואי אפשר להוסיף לוגיקה שתשנה את ה-URL ע"פ איזה חיווי של שרות, משתנה גלובאלי או כל דבר אחר. כאן בדיוק הטעות שלהם, אפשר לעשות את זה כי TemplateUrl ו- Template יכולים לקבל פונקציה. ראו קוד בקובץ Angulr.js: ( כאן וכאן ).

דוגמת קוד מה אפשר לעשות:

(function(angular) {

    'use strict';

    //////////////// AngularJS //////////////

    angular.module('demo', [])

    //.constant('language', 'heb-il')

    .constant('language', 'en-us')

    .directive('hello',helloDirective);

 

    //////////////// JavaScript //////////////

 

    function helloDirective(language) {

        var ddo = {

            templateUrl: function($compileNode, templateAttrs) {

                return 'hello.'+ language +'.html';

            },

            replace: true,

            restrict : 'EA'

        };

 

        return ddo;

    }

})(angular);

במקרה של השפה ככל הנראה נצטרך קודם לעשות log-in ואז לקבל את השפה של המשתמש ורק אז להריץ את אנגולר ע"י הפקודה bootstrap או resumeBootstrap. בלינק הזה כתבתי על זה: https://eyalvardi.wordpress.com/2014/03/29/angularjs-bootstrap/

מקווה שזה עזר לכם J

שנה טובה וחג שמח !!!

 
5 תגובות

פורסם ע"י ב- ספטמבר 25, 2014 ב- Uncategorized

 

תגים:

Error Messages in AngularJS

פוסט זה נועד לכל האנשים שמתחילים לפתח Angular ולא מבינים את ההודעות השגיאה שלו. החלטתי לבחור את ההודעות השגיאה הכי פופולריות שראיתי שיש לאנשים במהלך הקורסים שלי ולהסביר מה הבעיה.

1. אין הודעת שגיאה, אך Angular לא עובד.

אם שוכחים לשים את ה- ng-app, אז כאשר Angular לא מוצא אותו הוא לא עושה כלום, כלומר לא יוצר את ה- Injector, ולכן הוא גם לא מקמפל את הדף. אפשר להפעיל את Angular ידנית ע"י המתודה bootstrap. ראו פוסט בנושא.

2. Uncaught ReferenceError: angular is not defined

שכחתם להוסיף את הקובץ angular.js לדף, ולכן אין משתנה גלובלי בשם angular. ( תאמינו לי גם זה קורה J )

 

3. Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined

השם שנתתם בדרקטיב ng-controller לא נמצא בשרות $controller, כלמור ב- $injector. בדר"כ זה קורה מהסיבות הבאות:

א. השם שברישום של הcontroller לא אותו דבר כמו השם ב ng-controller.

// script file
angular.module('myApp'
, [])

            .controller('Ctrl', function($scope) {/*Code*/});

       

// html file

<div ng-controller="MainCtrl">…</div>

 

ב. המודול שבו מוגדר הקונטרולר לא חובר למודול הראשי ולכן הוא לא נטען וכתוצאה
                מכך אנגולר לא מכיר אותו.

ג. שכחתם להוסיף את הקובץ JS שבו מוגדר הקונטרולר לדף ה-HTML.

 

4. Uncaught Error: [$injector:modulerr] Failed to instantiate module

אנגולר לא הצליח לטעון את כל המודולים. אנגולר מוצא את המודול הראשי ( ng-app ) ואז הוא רץ על כל המודולים שרשומים ב- requires של המודול הראשי. במילים פשוטות אנגולר רץ על העץ וטוען קודם את הילדים ואחרי זה את ההורים. כאשר אנגולר מגיע לשם של מודול שהוא לא מצליח לטעון הוא זורק את הטעות הזאת.

דוגמא : angular.module('myApp', ['myModule']);

בדוגמא שלפנינו אין בכלל מודול בשם 'myModule' או שיש אך שכחתם לחבר את קובץ ה-JS של המודול לדף ה- HTML, ולכן הוא לא נטען.

 

5. Error: [$injector:unpr] Unknown provider:

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

angular.module('myApp', [])

        .controller('Ctrl',function($scope, noService) {

           

        });

הסבר:
 אנגולר לא מצליח להבין מה הוא צריך להזריק בארגומנט השני, ה- $injector לא מכיר את השם ‘noService’. יש מספר סיבות שזה יכול לקרות לכם:

א. טעות בשם

ב. שכחתם לטעון את המודול שבו מוגדר השרות.

ג. שכחתם לחבר את המודול למודול הראשי ולכן הוא לא נטען.

ד. השתמשתם ב- סוגרים מרובעים או ב- $inject, ויש לכם טעות הקלדה או אי התאמה עם מספר
    הארגומנטים. ראו דוגמא:

angular.module('myApp', [])

   .controller('Ctrl',['$scope','$log','noService',function($scope, noService) {

}]);

 

לסיכום:

ממליץ לכם בחום לבקר באתר של אנגולר ולראות את כל סוגי השגיאות. (https://docs.angularjs.org/error )

בנוסף מי שרוצה לקרוא ולהבין איך בדיוק אנגולר מתחיל לעבוד, יוצר את ה- Injector ומקמפל את הדף יכול לקרוא את הפוסטים שלי באתר http://ng-course.org/ .

אם עדין יש לכם רעב לעוד… אתם מוזמנים לקורסים שלי. הקורס הקרוב נפתח בשבוע הבא ה-15 ליולי. פרטים נוספים לחצו כאן.

 
השארת תגובה

פורסם ע"י ב- יולי 12, 2014 ב- AngularJS, ng-course.org

 

תגים:

AngularJS Module on Demand

באפליקציות גדולות עם הרבה מודולים יש צורך לטעון את המודולים ע"פ דרישה. היתרונות בכך שהאפליקציה עולה יותר מהר אך כאשר המשתמש בחור להיכנס למקום שבו צריך את המודול הוא יצטרך לחכות עד שהמודול יטען ( כמובן גם כל המודולים שהוא תלוי בהם ). אנגולר לא תומך באפשרות זו, אך יש מספר דרכים לעשות את זה, להשתמש בפתרון ocLazyLoad שמאפשר זאת. אתם יכולים לראות גם את ההדגמה של ניר בלינק הבא.

אני בחרתי בדרך שונה, לתקן בטיפה את אנגולר שיוכל לבצע את המשימה.

התיקון נמצא במתודה createInjector פשוט תוסיפו לפני ה- return את השורות הבאות:

 

 angular.loadModules = function (modulesToLoad) {

      forEach(loadModules(modulesToLoad), function (fn) {

          instanceInjector.invoke(fn || noop);

      });

  };

דוגמאת קוד:

 

app.js file:

(function () {

    var app = angular.module('myApp', []);

 

    app.controller('Ctrl', function ($scope, loadMe, $injector) {

        $scope.isSubModuleLoaded = false;

                      // Execute on click event.

        $scope.loadModule = function () {

            loadMe(function () {

                $scope.isSubModuleLoaded = true;

                var v = $injector.get('test');

                console.log(v);

                $scope.$apply();

            });

 

        };

    }

    );

 

    app.factory('loadMe', function () {

        returnfunction (callback) {

            $script('subModule.js', callback);

        };

    });

})();

 

subModule.js file:

(function () {

    var subModule = angular.module('subModule', []);

   

    subModule.provider('test', { $get: function () {

return'123456789'; } });

   

    subModule.controller('subModCtrl', function ($scope) {

        $scope.moduleName = "subModule";

    });

 

    // Must call this method.

    angular.loadModules(['subModule']);

})();

 

כמובן שאפשר להשתמש בזה בצורות נוספות ע"פ בחירתכם.

אשמח לקבל תגובות.

 
4 תגובות

פורסם ע"י ב- פברואר 23, 2014 ב- AngularJS, Uncategorized

 

תגים:

AngularJS A to Z Course

לכל מי שרוצה ל”הכנס” לספריה של גוגל AngularJS בצורה מהירה ולקבל טיפים איך לעשות את הדברים נכון.

אני מזמין אותו לקורס של יום אחד על AngularJS. הקורס מיועד לאנשים בעלי רקע בתכנות ב-JavaScript ו-HTML.

לפרטים נוספים מלאו את הטופס ואני אחזור אליכם עם התאריך המדויק, מחיר ומקום הקורס.

לינק לדף עם הרבה חומר על הנושא.

AngularJS A to Z Course

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Out of the box, it eliminates much of the code you currently write through data binding and dependency injection.

Module 1: AngularJS Overview

This module gives a quick overview of the main angular components and how they work together.

  •  The Challenge with Web Apps (SPA)
  •  Directives
  •  Filters
  •  Model, View & Controller
  •  Modules
  •  Routes
  •  Factories

Module 2: AngularJS Conceptual Overview

  •  AngularJS Startup Process
  •  AngularJS Runtime
  •  Communication Between Controllers
  •  Scope
  •  Injector Service
  •  Module API

Module 3: AngularJS Filters

  •  Filter Syntax
  •  AngularJS Filters
  •  Custom Filter

Module 4: AngularJS Services

  •  AngularJS Services Overview
  • $http Service:
    • Headers
    • Transforming Requests & Responses
    • Caching
    • Response Interceptors
  •  $resource Service
  •  $q Service
  • $provide Service:
    • Custom Service
    • Custom Factory
    • Custom Provider

Module 5: AngularJS Directives

  •  Overview
  •  AngularJS Directives
  •  Directives Types
  •  Directive Internal
  •  Custom Directive:
    • Scope Prototypal Inheritance
    • Transclude

Module 6: Forms in AngularJS

  •  Overview
  •  Data-binding
  •  CSS update
  •  Value formatting and parsing
  •  Validation
 
3 תגובות

פורסם ע"י ב- מאי 12, 2013 ב- Uncategorized

 

תגים: , , , ,