Angular入門知識點總結

知識點總結html

1.Angular入門angularjs

    (1) ng-app是AngularJS應用程序運行的入口( ng-app="myApp")app

    (2)當AngularJS程序要運行時,找到了ng-app開始運行
    (3)運行開始,加載主要模塊:myApp模塊(var app = angular.module("myApp", []);)雙向綁定

    (4)將一個標籤和控制器進行綁定,控制器中的數據,就能夠使用在這個標籤的內部了htm

    標註:ng-model用來將表單元素的數據和變量雙向綁定ip

                雙大括號中,能夠直接寫變量名稱,和變量的數據綁定,變量的數據發生改變,頁面的數據會同時改變開發

<!DOCTYPE html>
<!--
    入門程序第一彈:
    |-- ng-app="myApp"   程序運行入口,加載myApp模塊
        |-- angular.module("myApp", []);
            |-- angular.controller("myCtrl", function(){});
                |-- function($scope) {}
                    |-- $scope.hello = "值";


    <html ng-app="myApp">
        ....
        <div ng-controller="myCtrl">
            ....
            {{hello}}
-->
<!--
    ng-app是AngularJS應用程序運行的入口
        當AngularJS程序要運行時,找到了ng-app開始運行
            運行開始,加載主要模塊:myApp模塊
-->
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Hello World!</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
    <!-- 將一個標籤和控制器進行綁定,控制器中的數據,就能夠使用在這個標籤的內部了-->
    <div ng-controller="myCtrl">
        <!-- ng-model用來將表單元素的數據和變量雙向綁定 -->
        <input type="text" ng-model="hello"><br />
        <input type="text" ng-model="hello"><br />
        <input type="text" ng-model="hello"><br />
        <input type="text" ng-model="hello"><br />
        <input type="text" ng-model="greeting"><br />
        <input type="text" ng-model="greeting"><br />
        <input type="text" ng-model="greeting"><br />
        <!-- 雙大括號中,能夠直接寫變量名稱,和變量的數據綁定,變量的數據發生改變,頁面的數據會同時改變 -->
        {{hello}}<br />
        {{greeting}}
    </div>
<script>
    /*定義一個Angular模塊*/
    var app = angular.module("myApp", []);


    app.controller("myCtrl", function($scope){
        $scope.hello = "hello angularjs!今天開始,要進行JS高級開發部分"
        $scope.greeting = "hello angularjs!今天開始,要進行JS高級開發部分"
    });
</script>
</body>
</html>
input