LoginSignup
2
4

More than 5 years have passed since last update.

AngularJS 1.5 componentベースの作業手順まとめ

Last updated at Posted at 2016-08-15

久しぶりに触ると、もう忘れてる

忘れると、動かないのでメモメモ
AngularJSの本家のチュートリアルは1stepずつ教えてくれて親切だが、手順・記法・設計の最終形をまとめてくれると超ありがたいのに…(天下のGoogleさん!お願いします)

module用のフォルダを作る

  • module-name.component.js
  • module-name.module.js
  • module-name.template.html
  • module-name.component.spec.js (unit test)

ファイルの命名は、小文字をハイフンつなぎだ

moduleを上位のmoduleに登録する

moduleParent-name.module.js
angular.module('moduleParent', [
    'ngRoute', etc,
    'moduleName'
]);

#ここで、moduleNameは、moduleChildNameと同じ意味

moduleの命名規則はcamelCaseだ

moduleの呼出タグを、上位のモジュールのhtmlに組み込む

parentmodule-name.template.html
<module-name></module-name>

タグの命名規則は、ハイフンつなぎだ

module用のフォルダにあるjsファイルを、<head>を読み込むindex.htmlのようなレイアウト大元のhtmlで読み込む

index.html
<head>
  <script src="module-name/module-name.module.js"></script>
  <script src="module-name/module-name.component.js"></script>
</head>

これを忘れがちだ(忘れてた)

2
4
0

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
2
4