LoginSignup
3
3

More than 5 years have passed since last update.

dotinstallでAngular.jsを勉強しようとしてハマったこと

Last updated at Posted at 2015-04-17

はじめに

Angular.jsの勉強をはじめました。

その学習サイトとしてdotinstall を利用していますが、バージョンの差異があり、サンプルコードが動きません。なので、勉強と並行して、ここに正誤表みたいなものを作りたいと思います。
主に公式のこのページを参考にしてます
また、自分自身も初心者なので、間違い等がございましたら、ご指摘いただけたらと思います。

なお、なぜそう動くのかは自分把握していないので誰か教えてくださいよろしくお願いします。

ちなみに、英語できるよって人は、以下のサイトも利用すればいいと思います。
code school

バージョン

この記事の執筆開始日(2015年4月17日)のAngularJSの最新バージョンは1.3.15です。
また、dotinstallで扱われているバージョンは1.0.1です。

正誤表記事で、さらにバージョンの差異にハマらないようにご注意ください。

#03

htmlもjavascriptも、変更が要ります。

htmlの方は、アプリの名前を設定してます。
絶対必要なのかどうかはわかりませんが、myscript.jsのなかで指定しているので、多分必要だと思います。

index.html
<!-- この一行を変える(必要ないかもだけど)
<html lang="ja" ng-app="myApp">
-->
<html lang="ja" ng-app="myApp">

myscript.jsの方は結構変えないといけないです。
一回モジュールとしてやらないといけないみたいです。

myscript.js
/**
 * dotinstall

 var mainCtrl = function($scope) {
   $scope.users = [
     {"name": "taguchi", "score":52.22},
     {"name": "tanaka", "score": 38.22},
     {"name": "yamada", "score": 11.11}
   ];
 };
 */


/**
 *新しい方
 */
var myApp = angular.module('myApp', []);

  //myApp.controller('myCtrl', function($scope) {
  //amrmorik83さんからのアドバイス
  //コードを圧縮した時におかしくなることを防ぐため。
  myApp.controller('MyController', ['$scope', function($scope) {
  $scope.users = [
    {"name": "taguchi", "score":52.22},
    {"name": "tanaka", "score": 38.22},
    {"name": "yamada", "score": 11.11}
  ];
}]);

#07

4,5,6はそのままのコードで良かったです。
コントローラーのネストについてですが、#03と同様に、以下のように書く必要があります。

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

myApp.controller('myCtrl', ['$scope',function($scope) {
  //略
}]);

myApp.controller('userItemCtrl', ['$scope', function($scope) {
  $scope.increment = function() {
    $scope.user.score++;
  };
}]);

どうも、myAppのコントローラーに追加してあげる感じでいいみたいですね。
追加したものを識別しているのが、第一引数っぽい?(key,value)みたいな。

終わりに

以上です。
最初につまずいたので、めちゃくちゃ違いがあるのかなと思いましたが、本当に基本的なことは上記に書いてある事以外なさそうです。

ですが、やはり細部は結構違うっぽいので、流れをつかむための膨大な過去バージョンのサンプルプログラムと公式ドキュメントを併用しながら、なんか色々かけていけたらと思います♪

3
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3