夜の歌

プログラミング、音楽、本について緩く書いていきます。

昨日もAngularJSでござい（５月１０日）

昨日もAngularJSを、いじいじした一日でしたね。

index.html

<html ng-app>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
        <script src="admin.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="top">テスト</div>
        <div id="second" ng-controller="t">
            <ul>
                <li><a href={{link}} target="_blank">Home</a></li>
                <li>採用情報</li>
                <li>Map</li>
            </ul>
        </div>
    </body>
</html>

admin.js

function t($scope){
    var link_number = 1;
    var s = Math.floor(Math.random () * 10) + 1;
    if(link_number===s){
        $scope.link = "http://google.com";
    }else{
        $scope.link = "http://senahate.com";
    }
}

スタイルシートは後で。
index.htmlのbodyタグ内の、２番目のdivタグ内にcontrollerを設定。controllerの中身は、admin.jsに書かれている。

まだ、controller内に使う$scopeの意味とか、よう分かってないな。今日もやっていこう。

style.css

#top{
    text-align: center;
    background-color:red;
    width: 50%;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
}
#second{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
li{
    float: left;
    width:140px;
}