Heim > Artikel > Web-Frontend > AngularJS-Frontend-Framework
AngularJS-Frontend-Framework
- 零到壹度Original
- 2018-03-30 14:32:101842Durchsuche
Dieser Artikel teilt Ihnen hauptsächlich die Anforderungsmethode des JAngularJS-Front-End-Frameworks mit. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Verwendung:
<script type="application/javascript" src="../js/angular.min.js "></script>
1. Allgemeine Attribute:
ng-app: kann für jedes Element verwendet werden, das Winkel darstellt Der Anwendungsbereich ist auch der Programmeingang von AngularJS, der die Elemente innerhalb des Tags initialisiert
ng-controller: controller
ng-model: Gibt das aktuelle Element und Datenmodell an ($ Bereich) Attributbindung in $scope. bind oder {{attribute name} }: Attributwerte abrufen. 2. Zwei-Wege-Bindung:
Definition: Die Aktualisierung der Ansicht folgt automatisch dem neuen Modell. und durch das Aktualisieren des Modells wird die Ansicht automatisch aktualisiert.3. AngularJS implementiert MVC basierend auf der Modularisierung:
<!-- Angular编程入口 -->
<body ng-app>
<p>
<!-- 模型 -->
<input type="text" name="name" ng-model="name " />
</p>
<p>
Hello,{{name}}!!!
</p>
</body>4 Bindung:ng-click: AngularJS-Klickereignis.
<body>
<!-- Angular编程入口,定义一个模块 -->
<p ng-app="myapp" ng-controller="myctrl">
<p>
<!-- 模型 -->
<input type="text" name="name" ng-model="name " />
</p>
<p>
Hello,{{name}}!!!
</p>
</p>
</body>
<script type="text/javascript">
//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
var myapp = angular.module("myapp",[]);
//定义模块的控制器
/*myapp.controller("myctrl",["$scope",function($scope){
$scope.name="沃德发";
}])*/
//$scope页面与控制器的桥梁
myapp.controller("myctrl",function($scope){
$scope.name="法克鱿";
});
</script>5. AngularJS-Traversal-Sammlung:
ng-repeat: AngularJS wird zum Durchlaufen und Iterieren von Sammlungen verwendet.
<body>
<!-- Angular编程入口,定义一个模块 -->
<p ng-app="myapp" ng-controller="myctrl">
<p>
<!-- 模型 -->
<input type="text" name="name" ng-model="name " />
<input type="button" value="清空" ng-click="clearVal()"/>
</p>
<p>
Hello,{{name}}!!!
</p>
</p>
</body>
<script type="text/javascript">
//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
var myapp = angular.module("myapp",[]);
//$scope页面与控制器的桥梁
myapp.controller("myctrl",function($scope){
$scope.name="嗯嗯啊";
//事件绑定
$scope.clearVal = function() {
$scope.name = "";
}
});
</script>6. AngularJS-Routing:
JS zur Einführung des Routings:
<body>
<!-- Angular编程入口,定义一个模块 -->
<p ng-app="myapp" ng-controller="myctrl">
<table border="1" width="90%">
<tr>
<td>序号</td>
<td>商品编号</td>
<td>商品名称</td>
<td>商品价格</td>
</tr>
<tr ng-repeat="product in products">
<td>{{$index+1}}</td>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
</tr>
</table>
</p>
</body>
<script type="text/javascript">
//初始化模块,第一个参数是对应的模块名称,第二个参数对应的拓展功能插件数组
var myapp = angular.module("myapp",[]);
myapp.controller("myctrl",function($scope){
$scope.products=[
{
id:'A001',
name:'狗子',
price:3306
},{
id:'A002',
name:'啥子哟',
price:8080
}
]
});
</script>ng-view: nach Route aufgerufene Seite anzeigen$routeProvider: Routingsystem
when..when..otherwise: ähnlich wie switch..case..case..default
<script type="text/javascript" src="../js/angular-route.min.js" ></script>
Das obige ist der detaillierte Inhalt vonAngularJS-Frontend-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!