Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

AngularJSに挑戦!入門 その1

More than 5 years have passed since last update.

はじめに

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>

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

おわりに

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

village
気が付いたら、フリーランスのエンジニアになりました。 PHP + Laravel + Vue.js + Node.js = 今の仕事 python + 機械学習 = 勉強中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away