※ng-app、ng-init、ng-model、ng-bind
ng-app：angularJS的啟始點ng-init：初始值
ng-model：設定變數
ng-bind：挷定變數
<html>
<script type="text/javascript" src="angular.js"></script>
<body ng-app>
<p>test1: <input ng-model="xxx1"></p>
<p ng-bind="xxx1"></p>
<p>test2: <input ng-model="xxx2"></p>
<p>{{xxx2}}</p>
<div ng-init="ooo1='bruce'">
<p>test3:<span ng-bind="ooo1"></span></p>
</div>
<div data-ng-init="ooo2='bruce'">
<p>test4:<span data-ng-bind="ooo2"></span></p>
</div>
<div ng-init="xox='00FF00'">
<input style="color:{{xox}}" ng-model="xox" value='{{xox}}' />
</body>
<script>
window.onload = () => {
console.log(angular.version.full);
}
</script>
</html>
※ng-app會針對設定的範圍啟作用，如上是在body設置，所以整個body都會啟作用，假設設定在第一個p標籤，那只有第一個標籤會啟作用
※可以用「data-ng-」開頭取代「ng-」開頭，也可以一起使用
※ng-init、ng-model 就沒有範圍了，例如test2的{{xxx2}}改成{{xxx1}}是抓的到的
※angular.version是取版本用的
※xxx1和xxx2是有差別的，xxx2在網路較慢時，或按F5不放，有時會看到{{xxx2}}出現；xxx1不會
※ng-init 多個變數
<html>
<script type="text/javascript" src="angular.js"></script>
<body ng-app>
<div ng-init="xxx='x';ooo='o'">
<p>test1: <span ng-bind="xxx + ' ' + ooo"></span></p>
</div>
<div ng-init="init={xxx:'x',ooo:'o'}">
<p>test2: <span ng-bind="init.ooo"></span></p>
</div>
<div ng-init="zzz=[0,1,2,3]">
<p>test3: {{zzz[2]}}</p>
</div>
<div>
<p>test4: <span ng-bind="zzz[2]"></span></p>
</div>
</body>
</html>
※ng-init可設定多個變數；但ng-model不行
※module、ng-controller
module：設定模組ng-controller：設定控制器的範圍
<html>
<script type="text/javascript" src="angular.js"></script>
<body ng-app='xxx'>
<div ng-controller='ooo'>
p1: <input type='number' ng-model='p1'><br />
p2: <input type='number' ng-model='p2'><br />
<span>number:{{p1 + p2}}</span>
</div>
</body>
</html>
<script>
var app = angular.module('xxx', []);
app.controller('ooo', ($scope) => {
$scope.p1= 1;
$scope.p2= 2;
});
</script>
※設定完p1和p2變數，可以重覆用很多次，如上但直接寫{{p1}}和ng-model="p1"都抓的到
※<script>那一段也可以寫在一支(或兩支)js，然後用<script src>加載進來
※var app可寫成一行
※angular.module 第一個參數為 module 名稱，第二個參數為依賴哪一些module，這個例子為沒有依賴
※ng-app取得設定的module
※設定好ng-controller的範圍後，就可以在裡面取得設定的變數，其中「$scope」是不能改的
※{{}}裡面是可以四則運算的，所以寫死的數字也是可以運行的
※angulars也有MVC：
M：scope，可在V和C使用
V：HTML
C：Javascript
※module 的依賴
<html>
<script type="text/javascript" src="angular.min.js"></script>
<body ng-app='xxx'>
<div ng-controller='ooo'>
p1: <input type='number' ng-model='p1'><br />
p2: <input type='number' ng-model='p2'><br />
<span>number:{{p1 + p2}}</span><br /><br />
p3: <input type='number' ng-model='p3'><br />
p4: <input type='number' ng-model='p4'><br />
<span>number:{{p3 + p4}}</span><br /><br />
p5: <input type='number' ng-model='p5'><br />
p6: <input type='number' ng-model='p6'><br />
<span>number:{{p5 + p6}}</span>
</div>
</body>
</html>
<script>
var app = angular.module('xxx', ['xxx2', 'xxx3']);
app.controller('ooo', ($scope, zzz, yyy) => {
$scope.p1= 1;
$scope.p2= 2;
$scope.p3 = zzz.zzzMultiply2(20);
$scope.p4 = zzz.zzzMultiply2(100);
$scope.p5 = yyy.yyyAdd2(20);
$scope.p6 = yyy.yyyAdd2(100);
});
angular.module('xxx2', []).service('zzz', function() {
this.zzzMultiply2 = (x) => {
return x + x;
}
});
angular.module('xxx3', []).service('yyy', function() {
this.yyyAdd2 = (x) => {
return x + 2;
}
});
</script>
※sevice的功能是定義的字串可以在controller裡用，並且使用裡面的方法
※此例還可寫成xxx只依賴 xxx2 ，xxx2 又依賴 xxx3 ，此時的 xxx 還是能抓的到 yyy
※scope範圍
<html>
<script type="text/javascript" src="angular.min.js"></script>
<body ng-app='xxx'>
<div ng-controller='ooo1'>
<p>p1+p2:{{p1 + p2}}</p>
<p>p3:{{p3}}</p>
<p>number:{{p4 + p5}}</p>
<p>p6:{{p6}}</p>
</div>
------------------------------
<div ng-controller='ooo2'>
<p>p1+p2:{{p1 + p2}}</p>
<p>p3:{{p3}}</p>
<p>number:{{p4 + p5}}</p>
<p>p6:{{p6}}</p>
</div>
</body>
</html>
<script>
var app = angular.module('xxx', []);
app.controller('ooo1', ($scope, $rootScope) => {
$scope.p1= 1;
$scope.p2= 2;
$rootScope.p3=3;
});
app.controller('ooo2', ($scope, $rootScope) => {
$scope.p4= 4;
$scope.p5= 5;
$rootScope.p6=6;
});
</script>
※定了兩個controller，ooo1和ooo2，第一個div使用ooo1；第二個div使用ooo2，個別使用不同的範圍
※$scope 只能使用在 ng-controller 設定的範圍；而 $rootScope 沒有這種限制，哪裡都能使用
※如果$scope 和 $rootScope 都設一樣的變數，會以 $scope 為主
沒有留言:
張貼留言