私は長い間何も書いていません、そして、私は物事を書くことをどこから始めればいいのかわからないように感じます。今、私は最初に技術的なものを書いたほうがいいです。 Angularjs、私の兄弟はそれを「私の兄弟js」と呼びました
1。ダウンロード
コードコピーは次のとおりです。
官方网址:https://angularjs.org/
CDN:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js
2。1.ng-appを使用する簡単な紹介
Angularjsの範囲を決定すると、次のように使用できます
コードコピーは次のとおりです。
<html ng-app>
…
</html>
Angularjsがページ全体をレンダリングしてもらい、それを使用することもできます
コードコピーは次のとおりです。
<div ng-app = 'myApp'>
...
</div>
その一部をレンダリングします。
2.ng-model
ng-model、データモデルが変更されると、たとえばng-model = 'test'など、このテストの値が変更されます。{{test}}の値も変更されます。つまり、NG-Modelに接続されたテストも変更されます。
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<スクリプトsrc = "angular.min.js" type = "text/javascript"> </script>
<title> argularjs-widuu </title>の学習
</head>
<body ng-app>
<入力ng-model = 'test'> {{test}}
</body>
</html>
3.Angular.module
これは、主にモジュールの登録、作成、インデックスに使用されます。たとえば、これをサービスとして登録する場合は、インデックスを参照するときに使用する必要があります。また、インデックスを参照するときにも使用する必要があります。
コードコピーは次のとおりです。
angular.module(name、[requess]、[configfn]);
#NAMEタイプ文字列によって作成された検索モジュールの名前
#簡単な理解は、ngrouteルーティングモジュールなど、含める必要がある使用モジュールです
#configfnオプションの関数モジュール、関数はmodule.configに似ています
4.コントローラー
コントローラーはメソッドコントローラー(名前、コンストラクター)です。名前がコントローラーの名前である場合、コンストラクターはコントローラーコンストラクターです。コードを使用して説明します
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<スクリプトsrc = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module( 'myApp'、[]);
app.controller( 'mytest'、function($ scope){
$ scope.test = "hello word";
});
</script>
<title> argularjs-widuu </title>の学習
</head>
<body ng-app = 'myApp' ng-controller = 'mytest'>
<入力ng-model = 'test'> {{test}}
</body>
</html>
5.Value
値もメソッド値(名前、オブジェクト)です。ここで、名前はサービスの名前であり、オブジェクトはサーバーインスタンスオブジェクトです。この時点で、上記のコードを変更してこのように修正できます
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<スクリプトsrc = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module( 'myApp'、[])
.Value( 'testValue'、 'word');
app.controller( 'mytest'、function($ scope、testValue){
$ scope.test = "hello"+ testValue;
});
</script>
<title> argularjs-widuu </title>の学習
</head>
<body ng-app = 'myApp' ng-controller = 'mytest'>
<入力ng-model = 'test'> {{test}}
</body>
</html>
5.ファクトリー
工場はメソッドファクトリー(名前、ProviderFunction);;名前がサービスの名前である場合、ProviderFunctionは新しいサーバーオブジェクトを作成するために使用される関数です。この時点で、上記のコードを変更してこのように修正できます
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<スクリプトsrc = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module( 'myApp'、[])
.Value( 'testValue'、 'widuu'))
.Factory( 'testFactory'、function(testValue){
戻る{
lable:function(){
「これは出力できます:hello」+ testValue;
}
}
});
app.Controller( 'myTest'、function($ scope、testValue、testFactory){
$ scope.test = "hello"+ testValue;
$ scope.output = testfactory.lable();
});
</script>
<title> argularjs-widuu </title>の学習
</head>
<body ng-app = 'myApp' ng-controller = 'mytest'>
<入力ng-model = 'test'> {{test}}
</p>
{{出力}}
</body>
</html>
6.プロバイダー
プロバイダーは、Angular.moduleプロバイダー(name、providertype)のメソッドプロバイダーでもあります。ここで、名前はサービスの名前であり、ProviderFunctionは新しいサーバーオブジェクトを作成するために使用される関数です。これは工場に似ています。現在、プロバイダーで書き直しています。
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<スクリプトsrc = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module( 'myApp'、[])
.Value( 'testValue'、 'widuu'))
.Provider( 'testProvider'、
関数(){
this.lable = "これは出力:hello widuu";
this。$ get = function(){
これを返します。
}
}
);
app.Controller( 'myTest'、function($ scope、testValue、testProvider){
$ scope.test = "hello"+ testValue;
$ scope.output = testprovider.lable;
});
</script>
<title> argularjs-widuu </title>の学習
</head>
<body ng-app = 'myApp' ng-controller = 'mytest'>
<入力ng-model = 'test'> {{test}}
</p>
{{出力}}
</body>
</html>
7.サービス
サービスもメソッドサービス(名前、コンストラクター)です。名前がサービスの名前である場合、コンストラクターはインスタンス化されるコンストラクターです。これは工場に似ています。私たちは今、それをサービスで書き直しています
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<スクリプトsrc = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module( 'myApp'、[])
.Value( 'testValue'、 'widuu'))
.Service( 'testService'、
function(testValue){
this.lable = function(){
return "これは出力:hello"+testValue;
}
}
);
App.Controller( 'myTest'、function($ scope、testValue、testService){
$ scope.test = "hello"+ testValue;
$ scope.output = testservice.lable();
});
</script>
<title> argularjs-widuu </title>の学習
</head>
<body ng-app = 'myApp' ng-controller = 'mytest'>
<入力ng-model = 'test'> {{test}}
</p>
{{出力}}
</body>
</html>
8.コンセント
定数もメソッド定数(名前、オブジェクト)です。名前は定数の名前であり、オブジェクトは定数の値です、私たちはそれをこのように書くことができます
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<スクリプトsrc = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module( 'myApp'、[])
.Value( 'testValue'、 'widuu'))
.constant( 'count'、23)
.Service( 'testService'、
function(testValue、count){
this.lable = function(){
return "これは出力:hello"+testValue+"、年齢は「+count;
}
}
);
App.Controller( 'myTest'、function($ scope、testValue、testService){
$ scope.test = "hello"+ testValue;
$ scope.output = testservice.lable();
});
</script>
<title> argularjs-widuu </title>の学習
</head>
<body ng-app = 'myApp' ng-controller = 'mytest'>
<入力ng-model = 'test'> {{test}}
</p>
{{出力}}
</body>
</html>
それは今日すべてであり、後でそれを続けます。