知識點總結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