標籤：原理 use parameter 業務 雙向 blog control 代碼 ini
使用初體驗：ng 雙向資料繫結：
最簡單的雙向資料繫結：（使用預設模組控制）
<body ng-app><input type="text" ng-model=‘ngName‘><h1>{{ngName}}</h1></body>
完成對資料的初始化：
//初始化原理：ng-app 初始完之後，就會往在ng-init裡面賦值一個初始值：world , 這個值會自動綁定到下面 ；<body ng-app ng-init="ngName = ‘張三‘"><input type="text" ng-model=‘ngName‘><h1>{{ngName}}</h1></body>
注意：angularJs預設的是雙向資料繫結，單項資料繫結 {{::ngName}}
使用自訂模組控制：（完成對資料的初始化）
<body ng-app="myApp" ng-controller="myAppController"><input type="text" ng-model=‘userName‘><h1>{{userName}}</h1></body><script type="text/javascript">var myApp = angular.module(‘myApp‘,[]);myApp.controller(‘myAppController‘,[‘$scope‘,function($scope){ $scope.userName = ‘李四‘;}]);</script>
還可以這樣：
<body ng-app="myApp" ng-controller="myAppController"><input type="text" ng-model=‘user.name‘><input type="text" ng-model=‘user.age‘><h1>{{user.name}}的年紀是{{user.age}}</h1></body><script type="text/javascript">var myApp = angular.module(‘myApp‘,[]);myApp.controller(‘myAppController‘,[‘$scope‘,function($scope){ $scope.user = {}; $scope.user.name = "張三"; $scope.user.age = 20;}]);</script>
angularJs降低了大量的dom操作：
案例一：實現 點擊增加
<body ng-app><input type=‘number‘ ng-model=‘value‘><input type="button" ng-click=‘value = value+1‘ value="增加"><script type=‘text/javascript‘ src=‘node_modules/angular/angular.js‘></script><script type=‘text/javascript‘ ></script></body>
案例二：實現簡單的加法運算
<body ng-app><input type="number" value="1" ng-model=‘parameter1‘><span>+</span><input type="number" value="2" ng-model=‘parameter2‘><input type="button" value="=" ng-click=‘result = parameter1 + parameter2‘><input type="text" ng-model=‘result‘><script type=‘text/javascript‘ src=‘node_modules/angular/angular.js‘></script></body>
angularJS四大特點：
1、MVC；
2、模組化；
3、自動化雙向資料繫結；
4、指令系統；
angularJS安裝：
1、直接下載angularJS包：
- https://github.com/angular/angularjs.js/releases
2、使用CDN上的angularJS
- http://cdn.code.baidu.com/
3、使用Bower安裝（推薦）
- bower install angular
4、推薦使用 NPM 安裝（推薦）
- npm install angular --save
angularJS 使用總結：
1、angularJS最大程度上降低了頁面上的DOM操作；
2、讓javascript中，專註商務邏輯的代碼；
3、通過自訂指令實現組件化編程；
4、代碼結構更加簡單；
5、angularJs解放了傳統 javascript 中頻繁的DOM操作，同時也還原了javascript的本質；
angularJs初體驗，實現雙向資料繫結！使用體會：比較爽
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
