1. 程式人生 > >認識 angularjs 及 angularjs 簡單實用

認識 angularjs 及 angularjs 簡單實用

scope 功能 cti spa 過濾器 pac -c 開發 oct

Angular.js中,引入了專門的ViewModel(視圖模型)來實現View和Model的粘合,讓View和Model的進一步分離和解耦。

優勢:
   1、低耦合
   2、可重用性
   3、獨立開發
   4、可測試性

MVC
  model view controller
  模型-視圖-控制
  數據-頁面-業務處理
  視圖:直接用戶操作的頁面
  模型:參與運算的所有數據(對數據進行過濾、篩選、排序、crud等操作)
  控制:數據傳遞

angular.js的核心功能模塊
  1、數據的綁定
  2、過濾器
  3、路由
  4、作用域
  5、指令集
  6、模板
  7、依賴註入

使用 angular.js

 1 <!DOCTYPE html>
 2 <html ng-app="myApp" ng-controller="myCtrl">
 3 <!--
 4     描述:在 HTML 頭部引入  ng-app="myApp" ng-controller="myCtrl"
 5 -->
 6     <head>
 7         <meta charset="utf-8" />
 8         <title>Angular.js的指令</title>
 9     </
head> 10 <body> 11 <script src="js/angular.js"></script> 12 <script> 13 /* 14 * 在 js 代碼中引入 下列代碼即可使用 Angular.js 15 */ 16 angular.module("myApp", []).controller("myCtrl", function($scope) { 17 //
Angular.js 處理 函數 "myApp" 對應的是 ng-app 的值; "myCtrl" 對應的是 ng-controller 的值; 18 }); 19 </script> 20 </body> 21 </html>

ng-app 指令初始化一個 AngularJS 應用程序。

ng-controller 指令用於為你的應用添加控制器。

認識 angularjs 及 angularjs 簡單實用