1. 程式人生 > >AngularJs第一天

AngularJs第一天

display sco static ssi pla live module apple 參考

  http://www.runoob.com/angularjs/angularjs-tutorial.html(參考文檔)。

  下載AngularJs的js包 https://github.com/angular/angular.js/releases,也可以點擊http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js復制內容,粘貼到新的記事本中再重命名。

AngularJS簡介:

  AngularJS 是一個 JavaScript 框架。它可通過 <script> 標簽添加到 HTML 頁面。

  AngularJS 通過 指令

擴展了 HTML,且通過 表達式 綁定數據到 HTML。

AngularJS 應用:

  AngularJS模塊(module)定義了AngularJS的應用

  AngularJS控制器(controller)用於控制AngularJS應用

  ng-app指令定義了應用,ng-controller定義了控制器

  

技術分享
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
 6
</head> 7 <body> 8 <div ng-app="myApp" ng-controller="myCtrl"> 9 名: <input type="text" ng-model="firstName"><br> 10 姓: <input type="text" ng-model="lastName"><br> 11 <br> 12 姓名: {{firstName + " " + lastName}} 13 </div> 14
15 <script> 16 var app = angular.module(‘myApp‘, []); 17 app.controller(‘myCtrl‘, function($scope) { 18 $scope.firstName= "John"; 19 $scope.lastName= "Doe"; 20 }); 21 </script> 22 </body> 23 </html>
View Code

AngularJS 模塊定義應用:var app = angular.module(myApp, []);

  AngularJS 控制器控制應用:

  app.controller(myCtrl, function($scope) {
  $scope.firstName= "John";
  $scope.lastName= "Doe";
  });

   

AngularJs第一天