AngularJs的語法介紹

實例一：簡單的表達式

實例二：時間

<!doctype html>
<html ng-app="AngularDemo" ng-controller="AnagularCtrl" ng-init="AccountId=1;AccountName='Tom';Location='CHINA'">

    <head>
        <!--聲明當前頁面的編碼集：charset=gbk,gb2312(中文編碼),utf-8國際編碼-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--當前頁面的三要素-->
        <title>AngularJs的語法介紹!</title>
        <meta name="Keywords" content="關鍵詞,關鍵詞">
        <meta name="description" content="描述">
        <link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
        <link type="text/css" href="iconfont/iconfont.css" rel="stylesheet" />
        <link type="text/css" href="css/matrix.css" rel="stylesheet" />
        <!--css,js-->
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 12px;
                font-family: "微軟雅黑";
                background: linear-gradient(90deg, #1d3746, #4D3648);
                height: 2205px;
            }

            a {
                text-decoration: none;
            }

            .wrapper {
                width: 500px;
                height: 500px;
                margin: 100px auto;
            }

            #showButton {
                display: inline-block;
                padding: 8px 69px;
                background: #C2A84A;
                color: #fff;
                font-size: 12px;
                border-radius: 5px;
            }

            #showButton:hover {
                background: #EDE176;
                color: #000;
                transition: all 0.3s linear;
            }

            #showButton2 {
                display: inline-block;
                padding: 8px 69px;
                background: #C2A84A;
                color: #fff;
                font-size: 12px;
                border-radius: 5px;
            }

            #showButton2:hover {
                background: #EDE176;
                color: #000;
                transition: all 0.3s linear;
            }

            input[type="text"] {
                background: #252525;
                outline: none;
                border-radius: 5px;
                border: 1px solid #252525;
                padding: 6px 18px;
            }

            ul li {
                margin: 10px 0px;
                color: #EDE176;
                list-style: none;
            }
        </style>
    </head>

    <body>

        <div class="wrapper">
            <ul>
                <li>直接輸出在html標籤中定義的ng-init的變量的值</li>
                <li>{{Now}}</li>
                <li>{{AccountId +','+AccountName+','+Location}}</li>
                <li>{{AccountId}}</li>
                <li>{{AccountName}}</li>
                <li>{{Location}}</li>
            </ul>
        </div>

        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/angular-1.0.1.min.js"></script>
        <script type="text/javascript">
            // 定義一個Angular的模塊
            var app = angular.module("AngularDemo",[]);
            // 定義一個Angular的控制器
            app.controller("AnagularCtrl",function($scope){
                var now = new Date();
                $scope.Now = now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
            });

        </script>
    </body>

</html>

實例三：數組

<!doctype html>
<html ng-app="AngularDemo" ng-controller="AnagularCtrl" ng-init="AccountId=1;AccountName='Tom';Location='CHINA';Week=['Mon','Tue','Wen','Thu','Fri','Sat','Sun']">

    <head>
        <!--聲明當前頁面的編碼集：charset=gbk,gb2312(中文編碼),utf-8國際編碼-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--當前頁面的三要素-->
        <title>AngularJs的語法介紹!</title>
        <meta name="Keywords" content="關鍵詞,關鍵詞">
        <meta name="description" content="描述">
        <link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
        <link type="text/css" href="iconfont/iconfont.css" rel="stylesheet" />
        <link type="text/css" href="css/matrix.css" rel="stylesheet" />
        <!--css,js-->
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 15px;
                font-family: "微軟雅黑";
                background: linear-gradient(90deg, #1d3746, #4D3648);
                height: 2205px;
            }

            a {
                text-decoration: none;
            }

            .wrapper {
                width: 500px;
                height: 500px;
                margin: 100px auto;
            }

            #showButton {
                display: inline-block;
                padding: 8px 69px;
                background: #C2A84A;
                color: #fff;
                font-size: 12px;
                border-radius: 5px;
            }

            #showButton:hover {
                background: #EDE176;
                color: #000;
                transition: all 0.3s linear;
            }

            #showButton2 {
                display: inline-block;
                padding: 8px 69px;
                background: #C2A84A;
                color: #fff;
                font-size: 12px;
                border-radius: 5px;
            }

            #showButton2:hover {
                background: #EDE176;
                color: #000;
                transition: all 0.3s linear;
            }

            input[type="text"] {
                background: #252525;
                outline: none;
                border-radius: 5px;
                border: 1px solid #252525;
                padding: 6px 18px;
            }

            ul li {
                margin: 10px 0px;
                color: #EDE176;
                list-style: none;
            }
        </style>
    </head>

    <body>

        <div class="wrapper">
            <ul>
                <li>直接輸出在html標籤中定義的ng-init的變量的值</li>
                <li>{{Now}}</li>
                <li>輸出定義的數組</li>
                <li style="color:#c30">{{Week[0]+','+Week[1]}}</li>
                <li>{{AccountId +','+AccountName+','+Location}}</li>
                <li>{{AccountId}}</li>
                <li>{{AccountName}}</li>
                <li>{{Location}}</li>
            </ul>
        </div>

        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/angular-1.0.1.min.js"></script>
        <script type="text/javascript">
            // 定義一個Angular的模塊
            var app = angular.module("AngularDemo",[]);
            // 定義一個Angular的控制器
            app.controller("AnagularCtrl",function($scope){
                var now = new Date();
                $scope.Now = now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
            });

        </script>
    </body>

</html>

實例四：對象

demo-v1.0.html

    <head>
        <!--聲明當前頁面的編碼集：charset=gbk,gb2312(中文編碼),utf-8國際編碼-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--當前頁面的三要素-->
        <title>AngularJs的語法介紹!</title>
        <meta name="Keywords" content="關鍵詞,關鍵詞">
        <meta name="description" content="描述">
        <link rel="Shortcut Icon" href="images/favicon.ico" type="image/x-icon" />
        <link type="text/css" href="iconfont/iconfont.css" rel="stylesheet" />
        <link type="text/css" href="css/matrix.css" rel="stylesheet" />
        <!--css,js-->
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-size: 15px;
                font-family: "微軟雅黑";
                background: linear-gradient(90deg, #1d3746, #4D3648);
                height: 2205px;
            }

            a {
                text-decoration: none;
            }

            .wrapper {
                width: 500px;
                height: 500px;
                margin: 100px auto;
            }

            #showButton {
                display: inline-block;
                padding: 8px 69px;
                background: #C2A84A;
                color: #fff;
                font-size: 12px;
                border-radius: 5px;
            }

            #showButton:hover {
                background: #EDE176;
                color: #000;
                transition: all 0.3s linear;
            }

            #showButton2 {
                display: inline-block;
                padding: 8px 69px;
                background: #C2A84A;
                color: #fff;
                font-size: 12px;
                border-radius: 5px;
            }

            #showButton2:hover {
                background: #EDE176;
                color: #000;
                transition: all 0.3s linear;
            }

            input[type="text"] {
                background: #252525;
                outline: none;
                border-radius: 5px;
                border: 1px solid #252525;
                padding: 6px 18px;
            }

            ul li {
                margin: 10px 0px;
                color: #EDE176;
                list-style: none;
            }
        </style>
    </head>

    <body>

        <div class="wrapper">
            <ul>
                <li>直接輸出在html標籤中定義的ng-init的變量的值</li>
                <li>{{Now}}</li>
                <li>輸出定義的對象</li>
                <li>{{ AccountInfo.AccountId }}</li>
                <li>{{ AccountInfo.AccountName }}</li>
                <li>{{ AccountInfo.Location }}</li>
            </ul>
        </div>

        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/angular-1.0.1.min.js"></script>
        <script type="text/javascript">
            // 定義一個Angular的模塊
            var app = angular.module("AngularDemo",[]);
            // 定義一個Angular的控制器
            app.controller("AnagularCtrl",function($scope){
                var now = new Date();
                $scope.Now = now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
            });
        </script>
    </body>

</html>

AngularJs的語法介紹

AngularJs的語法介紹

實例二：時間

克隆Linux虛擬機之前的配置

01-Shiro初識

ZookeeperAPI的操作

Zabbix分佈式集羣監控

AngulaJs中的簡單數據綁定

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結