LoginSignup
25

More than 5 years have passed since last update.

AngularJSに挑戦!入門 その1

Last updated at Posted at 2014-10-31

はじめに

AngularJSを知ったのは、1年ぐらい前でしたが、
なんとなくとっつきにくく、今までほったらかしにしてました。
がんばって勉強しようと自分を奮い立たせるつもりで、
少しずつ書き続けようと思います。

AngularJSをダウンロード

AngularJS
の”ダウンロード”ボタンからダウンロードできます。

なにはともあれHello World!から

どんな言語でも最初はHello World!からですね。
AngularJSでは、Hello XXXX!(XXXXは入力した文字列)とします。

HelloWorld.html
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <title>Hello World!</title>
</head>
<body ng-app>
    <div>
        <label>Name:</label>
            <input type="text" ng-model="name" value=""/>
            <h1>Hello {{name}}!</h1>
    </div>
</body>
</html>

<body ng-app>ng-appAngularJSのお作法の1つ。
AngularJSアプリケーションを自動で起動させる指定です。
<input type="text" ng-model="name" value=""/>
ng-modelがディレクティブです。このコードでは、Javascriptを
書いていませんが、Javascript内のモデル・コントローラーとの
橋渡し役になります。
<h1>Hello {{name}}!</h1>が、表示です。mg-Modelに指定した
変数を表示します。ここでは、inputタグに入力した文字列を
Helloの後に表示します。

qiita02.jpg

味気ないのでBootstrapで飾り付け

Bootstrapで飾り付けします。

NewHelloWorld.html
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <title>Hello World!</title>
</head>
<body ng-app>
    <div class="container">
        <div class="jumbotron">
            <label>Name:</label>
            <input type="text" ng-model="name" value=""/>
            <h1>Hello {{name}}!</h1>
        </div>
    </div>
</body>
</html>

少しは、よくなりました。

おわりに

まだまだ、これからですが少しずつ勉強していきましょう!

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
25