Oppimistehtävä 4: AngularJs

Oppimistehtävässä 4 näpyttelin videon Introduction to Angular.js in 50 Exampes (part 1) esimerkit 1 - 32 omin pikku kätösin, tulokset alla. Esimerkkitehtäviin ei ole juuri tehty omia muutoksia. Tällä index.html-sivulla on käytetty esimerkeissä käsiteltyjä asioita, lähinnä tietojen hakuja jsonista sekä tietojen näyttämistä ng-repeat -direktiivin kautta.

Huomioita

Json-tiedoston ongelma eri selaimilla
  • Kun sivuja muokataan omalla työasemalla ja tietoja haetaan erillisestä json-tiedostosta (esimerkiksi tehtävä 26), jsonin perusteella luotu listaus toimii vain Firefox-selaimella.
    • Chromen konsoliin tulee virheilmoitus "XMLHttpRequest cannot load file:///C:/xampp/htdocs/angular32jsuus/files.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource."
    • IEn konsoli ilmoittaa Error: Käyttö estetty.
  • Mutta, kun sivut on siirretty www-palvelimelle http://vessel.kapsi.fi/angularjs32/, niin jsonin perusteella luotu listaus toimii kaikilla selaimilla (ks. esimerkiksi http://vessel.kapsi.fi/angular32jsuus/example26.html
Json-tiedoston ongelma http-funktio kanssa Angularin eri versioilla (1.2.1 & 1.6.1)
  • Videolla Introduction to Angular.js in 50 Exampes (part 1) viitataan AngularJS:n versioon 1.2.1. Omalle koneelleni olin ladannut version v1.6.1, johon viittasin alkupään esimerkeissä muodossa <script src="js/angular.min.js"></script> kuten esimerkissä 12. Tämän viittauksen kanssa tuli ongelmia esimerkeissä, joissa käsiteltiin json-tiedostosta lukua http-funktion kautta. Firefox ilmoitti konsolissa virheeksi Error: $http.get(...).success is not a function. Ongelma liittyy http-funktioon, jonka käsittelyssä ilmeisesti tapahtunut jokin muutos versioiden välillä. Ongelman sai ratkaistua siirtymällä viittamaan Angularin versioon 1.2.1 kuten videollakin oli tehty, virheilmoitusta ei enää tullut.
Muuta
  • Videon Introduction to Angular.js in 50 Exampes (part 1) esimerkeissä AngularJS-tiedostoon viitattiin ilman http:-alkua, katso esim. Example 23. Mutta omalla työasemalla ainakin Chrome ei tykkää jos toisella palvelimella sijaitsevaan js-tiedostoon viitataan urlilla <src="://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"> vaan eteen pitää lisätä http, jotta AngularJS-toiminnallisuudet toimii.