初対面AngularJS
67856 ワード
<!--
.titleTop{width:98%;margin:0 auto;background:rgb(31112355);border-radius:5 px;color:white;font-family:“マイクロソフトブラック”;font-size:18 px;height:40 px;line-height:40 px;padding-left:10 px;＃13;
-->
月曜日に新しい会社に入社して、AngularJSを使うと聞いたので、今週末はずっとAngularJSの勉強と認識を強化します.
so, let's start...
api:http://docs.angularjs.org/api/ng/function/angular.bootstrap
1 AngularJSの核心はMVCモジュール化自動化双方向データバインドの意味化ラベル依存注入である
上の具体的な使い方はまだよく分かりませんが、まずmarkを降りて、後でゆっくり理解しています.
1 Hello world!
まず公式サイトでangularをダウンロードします.js、それからhtmlファイルを修正しなければなりません
注意しなければならないのは
1 ng-appを指定する必要があります
2 ng-controller区分vmの作用範囲
3関数の最初のパラメータは$scopeでなければなりません
4 ie 7の下で正常ではありませんて、しばらく私はまだ解决方法を探し当てていないで、先に放して、深く理解してから帰って解决して、mark
もう一つの見知らぬ名詞ng-modelを理解してみましょう.私の現在の理解はデータをバインドするために使われています.
例をみる
司徒正美のブログを見てhttp://www.cnblogs.com/rubylouvre/p/3140251.html
2参考生産環境の書き方を勉強する
主な注意点は次のとおりです.
1 ng-app:“text”とmoduleが一致する
3バインドデータ
さらに、ng-bind/ng-bind-html/ng-bind-html-unsafeでデータをバインドしてみましょう.
効果を見る
テストの結果、ng-bindだけがデータを正常にバインドできます.
4サイクル出力
ループ出力
再び正美のことを学ぶ
$timeoutを使用したくない場合は、まずグローバル変数を宣言し、$scopeを割り当て、js原生態の関数を周辺で使用します.
しかし、注意しなければならないのは何かを追加することです.コードを見てください:
この必要なものは
5イベント
まず簡単なclickイベントを作りましょう
コードを見る
6バインド修正スタイル
.titleTop{width:98%;margin:0 auto;background:rgb(31112355);border-radius:5 px;color:white;font-family:“マイクロソフトブラック”;font-size:18 px;height:40 px;line-height:40 px;padding-left:10 px;＃13;
-->
月曜日に新しい会社に入社して、AngularJSを使うと聞いたので、今週末はずっとAngularJSの勉強と認識を強化します.
so, let's start...
api:http://docs.angularjs.org/api/ng/function/angular.bootstrap
1 AngularJSの核心はMVCモジュール化自動化双方向データバインドの意味化ラベル依存注入である
上の具体的な使い方はまだよく分かりませんが、まずmarkを降りて、後でゆっくり理解しています.
1 Hello world!
まず公式サイトでangularをダウンロードします.js、それからhtmlファイルを修正しなければなりません
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="angular.min.js"></script>
<script>
function hello($scope) {
$scope.name = "world";
}
</script>
</head>
<body ng-controller="hello">
<h1>
hello {{name}}
</h1>
</body>
</html>注意しなければならないのは
1 ng-appを指定する必要があります
2 ng-controller区分vmの作用範囲
3関数の最初のパラメータは$scopeでなければなりません
4 ie 7の下で正常ではありませんて、しばらく私はまだ解决方法を探し当てていないで、先に放して、深く理解してから帰って解决して、mark
もう一つの見知らぬ名詞ng-modelを理解してみましょう.私の現在の理解はデータをバインドするために使われています.
例をみる
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="angular.min.js"></script>
<script>
function helloControler($scope) {
$scope.name = "world";
$scope.greet = {name:'Jackey',sex:'male'};
}
</script>
</head>
<body ng-controller="helloControler">
<h1>
<input ng-model="greet.name" />
<p>{{greet.name}},go</p>
</h1>
</body>
</html>司徒正美のブログを見てhttp://www.cnblogs.com/rubylouvre/p/3140251.html
2参考生産環境の書き方を勉強する
<!DOCTYPE html>
<html ng-app="text">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="angular.min.js"></script>
<script>
angular.module("text", []).controller("helloControler", function ($scope) {
$scope.greet = "Jackey";
});
</script>
</head>
<body ng-controller="helloControler">
<h1>
<input ng-model="greet.name" />
<p>{{greet}},go</p>
</h1>
</body>
</html>主な注意点は次のとおりです.
1 ng-app:“text”とmoduleが一致する
3バインドデータ
さらに、ng-bind/ng-bind-html/ng-bind-html-unsafeでデータをバインドしてみましょう.
効果を見る
<!DOCTYPE html>
<html ng-app="text">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="angular.min.js"></script>
<script>
angular.module("text", []).controller("helloControler", function ($scope) {
$scope.htm = "<strong>Jackey</strong>";
});
</script>
</head>
<body ng-controller="helloControler">
<h1></h1>
<input ng-model="htm" />
<p>{{htm}},go</p>
<p ng-bind-html-unsafe="htm"></p>
<p ng-bind-htmle="htm"></p>
<p ng-bind="htm"></p>
</body>
</html>テストの結果、ng-bindだけがデータを正常にバインドできます.
4サイクル出力
ループ出力
<!DOCTYPE html>
<html ng-app="text">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="angular.min.js"></script>
<script>
//angular.module("text", []).controller("helloControler", function ($scope) {
//$scope.htm = "<strong>Jackey</strong>";
//});
angular.module("text", []).controller("eachController", function ($scope, $timeout) {
$scope.friends = [{ name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'JC', age: 1.2}];
$timeout(function () {
$scope.friends.push({ name: 'add', age: 10 });
}, 1000);
});
</script>
</head>
<body ng-controller="eachController">
<!--<div ng-controller="helloControler">
<h1> </h1>
<input ng-model="htm" />
<p>{{htm}},go</p>
<p ng-bind-html-unsafe="htm"></p>
<p ng-bind-htmle="htm"></p>
<p ng-bind="htm"></p>
</div>-->
<div >
<h1> </h1>
<h2>I have {{friends.length}} friends,they are:</h2>
<ul>
<li ng-repeat="friend in friends">
[{{$index+1}}] {{friend.name}} who is {{friend.age}} years old
</li>
</ul>
</div>
</body>
</html>再び正美のことを学ぶ
$timeoutを使用したくない場合は、まずグローバル変数を宣言し、$scopeを割り当て、js原生態の関数を周辺で使用します.
しかし、注意しなければならないのは何かを追加することです.コードを見てください:
<!DOCTYPE html>
<html ng-app="text">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="angular.min.js"></script>
<script>
//angular.module("text", []).controller("helloControler", function ($scope) {
//$scope.htm = "<strong>Jackey</strong>";
//});
var s;
angular.module("text", []).controller("eachController", function ($scope, $timeout) {
$scope.friends = [{ name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'JC', age: 1.2}];
s = $scope;
//$timeout(function () {
//$scope.friends.push({ name: 'add', age: 10 });
//}, 1000);
});
setTimeout(function () {
s.friends.push({ name: 'add', age: 10 });
s.$digest();//
}, 1000);
setInterval(function () {
s.friends.push({ name: 'add', age: 10 });
s.$digest(); //
},1000);
</script>
</head>
<body ng-controller="eachController">
<!--<div ng-controller="helloControler">
<h1> </h1>
<input ng-model="htm" />
<p>{{htm}},go</p>
<p ng-bind-html-unsafe="htm"></p>
<p ng-bind-htmle="htm"></p>
<p ng-bind="htm"></p>
</div>-->
<div >
<h1> </h1>
<h2>I have {{friends.length}} friends,they are:</h2>
<ul>
<li ng-repeat="friend in friends">
[{{$index+1}}] {{friend.name}} who is {{friend.age}} years old
</li>
</ul>
</div>
</body>
</html>この必要なものは
s.$digest(); // 5イベント
まず簡単なclickイベントを作りましょう
コードを見る
<!DOCTYPE html>
<html ng-app="text">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="angular.min.js"></script>
<script>
//angular.module("text", []).controller("helloControler", function ($scope) {
//$scope.htm = "<strong>Jackey</strong>";
//});
var s;
angular.module("text", []).controller("eachController", function ($scope, $timeout) {
$scope.friends = [{ name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'JC', age: 1.2}];
s = $scope;
//$timeout(function () {
//$scope.friends.push({ name: 'add', age: 10 });
//}, 1000);
$scope.name = "Jackey";
$scope.changeName = function () {
$scope.name = "Cassi";
};
});
setTimeout(function () {
s.friends.push({ name: 'add', age: 10 });
s.$digest();//
}, 1000);
//setInterval(function () {
//s.friends.push({ name: 'add', age: 10 });
//s.$digest(); //
//},1000);
</script>
</head>
<body ng-controller="eachController">
<!--<div ng-controller="helloControler">
<h1> </h1>
<input ng-model="htm" />
<p>{{htm}},go</p>
<p ng-bind-html-unsafe="htm"></p>
<p ng-bind-htmle="htm"></p>
<p ng-bind="htm"></p>
</div>-->
<div >
<h1> </h1>
<h2>I have {{friends.length}} friends,they are:</h2>
<ul>
<li ng-repeat="friend in friends">
[{{$index+1}}] {{friend.name}} who is {{friend.age}} years old
</li>
</ul>
<h2> </h2>
<button ng-click="changeName()"> </button>
<p>my name is {{name}} sparrow</p>
</div>
</body>
</html>6バインド修正スタイル
<!DOCTYPE html>
<html ng-app="text">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script src="angular.min.js"></script>
<style>
.row
{
background:yellow;
}
.row-noton
{
background:white;
}
</style>
<script>
//angular.module("text", []).controller("helloControler", function ($scope) {
//$scope.htm = "<strong>Jackey</strong>";
//});
var s;
angular.module("text", []).controller("eachController", function ($scope, $timeout) {
$scope.friends = [{ name: 'Jackey', age: 25 }, { name: 'Cassi', age: 20 }, { name: 'JC', age: 1.2}];
s = $scope;
//$timeout(function () {
//$scope.friends.push({ name: 'add', age: 10 });
//}, 1000);
$scope.name = "Jackey";
$scope.changeName = function () {
$scope.name = "Cassi";
};
$scope.remove = function (index) {
$scope.friends.splice(index, 1);
};
$scope.starting = { begin: 0 };
$scope.needed = 0;
$scope.changeMoney = function () {
$scope.needed = $scope.starting.begin * 10;
};
$scope.show = "noton";
$scope.changeBackground = function (index) {
$scope.selectRow = index;
};
$scope.$watch('starting.begin', $scope.changeMoney); //
}).controller("helloController", function ($scope) {
$scope.name = "Cassi";
});
setTimeout(function () {
s.friends.push({ name: 'add', age: 10 });
s.$digest();//
}, 1000);
//setInterval(function () {
//s.friends.push({ name: 'add', age: 10 });
//s.$digest(); //
//},1000);
</script>
</head>
<body >
<!--<div ng-controller="helloControler">
<h1> </h1>
<input ng-model="htm" />
<p>{{htm}},go</p>
<p ng-bind-html-unsafe="htm"></p>
<p ng-bind-htmle="htm"></p>
<p ng-bind="htm"></p>
</div>-->
<div ng-controller="eachController">
<h1> </h1>
<h2>I have {{friends.length}} friends,they are:</h2>
<ul>
<li ng-repeat="friend in friends" ng-class='{row:$index==selectRow}' ng-click='changeBackground($index)' >
[{{$index+1}}] {{friend.name}} who is {{friend.age}} years old
<button ng-click="remove($index)"> </button>
</li>
</ul>
<h2> </h2>
<button ng-click="changeName()"> </button>
<p>my name is {{name}} sparrow</p>
<h2>change </h2>
<input ng-change="changeMoney()" ng-model="starting.begin"/>
result:{{needed}}
</div>
<div ng-controller="helloController">
<h2> controller</h2>
{{name}}
</div>
</body>
</html>ng-class='{row:$index==selectRow}' row row