Der Inhalt dieses Artikels handelt von der grundlegenden Einführung in angularjs. Jetzt kann ich ihn mit Ihnen teilen.
Front-End-JS-Framework: Es kapselt die Verwendung von JS zur Entwicklung repetitiver Front-End-Funktionen, erweitert HTML und ist hauptsächlich Wird für die Seitenbedienung und -anzeige verwendet.
Kern: MVC, Modularisierung, bidirektionale Datenbindung, Abhängigkeitsinjektion, semantische Tags, Ausdrücke usw. [Empfohlene verwandte Video-Tutorials: AngularJS-Video-Tutorial]
Einführung relevanter js-Dateien
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!--匿名应用模块-->
<p ng-app="">
<input ng-model="username" name="username"/>
<input ng-model="username"/>
<p>{{username}}</p>
<p ng-bind="username"></p>
</p>
</body>
</html>Nach dem Login kopieren |
ng-app=““Anonymes Anwendungsmodul, im Allgemeinen muss ein Name geschrieben werden, um die spätere Initialisierung zu erleichtern ng -model: Binden Sie den Wert des
-Formularelementsautomatisch an die interne Variable von Angularjs.
ng-bind: Die Funktion entspricht dem Ausdruck, die Verwendung ist jedoch unterschiedlich. Wird im Allgemeinen zum Binden von Nicht-Formularelementen und zum Anzeigen von Variablen verwendet. Der Unterschied zwischen
Basierend auf modularisiertem MVC (MVVM)
Ansicht: Bezieht sich hauptsächlich auf statische HTML-Seitendaten-Tags, die hauptsächlich zur Anzeige verwendet werden.
Modell: Füllt hauptsächlich nur einige Daten der Ansicht und der logischen Verarbeitung aus. Zum Beispiel JSON, Variable
Steuerung: Etwas JS-Code, Schreiblogik. Hauptsächlich, um das Modell abzurufen, die Ansicht zu füllen, Daten aus der Ansicht abzurufen und das Modell zu füllen.
Konvertierung zwischen m und vm:
var username=”XiaoQi”; $scope.username=username;
Die Variable von vm ist tatsächlich an das Attribut in der globalen Variablen $scope gebunden.
Auf der Seite: {{username}}Hinweis: Angularjs-Variablen können nicht zu $scope auf der Seite hinzugefügt werden.
Wenn die Variable durch interne JS wie den Timer geändert wird, kann Angularjs standardmäßig keine bidirektionale Datenbindungsanzeige implementieren und $.digest muss verwendet werden, um eine Benachrichtigung (Aktualisierung) zu erzwingen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!--<p ng-app="myApp" ng-controller="myCtrl" ng-init="username='Jack'">-->
<p ng-app="myApp" ng-controller="myCtrl">
<input ng-model="username"/>
<p>{{username}}</p>
</p>
<!--控制器-->
<script type="text/javascript">
//初始化应用模块
//参数1：应用模块的名字
//参数2：使用扩展模块，这里没有
var myApp=angular.module("myApp",[]);
//初始化控制器：认为控制器绑定了一堆js
//参数1：控制器的名字
//参数2：js函数
myApp.controller("myCtrl",["$scope",function ($scope) {
//初始化变量
$scope.username="XiaoQi";
//可以写任何的js
}]);
</script>
</body>
</html>Nach dem Login kopieren |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!--视图-->
<p ng-app="myApp" ng-controller="myCtrl">
<input ng-model="username"/>
<input type="button" value="清空数据1" ng-click="clearMsg()"/>
<input type="button" value="清空数据2" ng-click="username=''"/>
<p>Hello {{username}}</p>
</p>
<!--控制器-->
<script type="text/javascript">
//初始化应用模块
var myApp=angular.module("myApp",[]);
//初始化控制器
myApp.controller("myCtrl",["$scope",function($scope){
//初始化一个angularjs的事件
$scope.clearMsg=function(){
//清空数据
$scope.username="";
};
}]);
</script>
</body>
</html>Nach dem Login kopieren |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
</head>
<body>
<!--视图-->
<p ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr>
<th>序号</th>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
</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>
<!--控制器-->
<script type="text/javascript">
angular.module("myApp",[])
.controller("myCtrl",["$scope",function($scope){
//json数组
$scope.products=[
{"id":1001,"name":"电视机","price":998},
{"id":1002,"name":"洗衣机","price":988898}
];
}])
</script>
</body>
</html>Nach dem Login kopieren |
|
Routing-Mechanismus 
Vorher: Einschließen schließt Seiten ein, die nur Seiten wiederverwenden, aber die wiederverwendeten Seiten werden auch als Ganzes aktualisiert.
Durch AngularJS-Routing kann eine teilweise Aktualisierung erreicht werden, und wiederholte Head-and-Tail-Operationen können ohne Aktualisierung realisiert werden. Und Multi-View-Einzelseiteneffekt.
zugrunde liegende Implementierung: implementiert durch # (Anker) in HTML.
<!--引入路由模块-->
<script type="text/javascript" src="../js/angular-route.min.js" ></script>Nach dem Login kopieren |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入Angularjs-->
<script type="text/javascript" src="../js/angular.min.js" ></script>
<!--引入路由模块-->
<script type="text/javascript" src="../js/angular-route.min.js" ></script>
</head>
<body>
<p ng-app="myApp">
<p>===========我是头<br />
<a href="#/">首页</a>
<a href="#/computer">电脑分类</a>
<a href="#/money">财务管理</a>
</p>
<!--路由中的包含的页面的显示，只能有一个元素-->
<p ng-view></p>
<p>==========我是脚</p>
</p>
<!--控制器-->
<script type="text/javascript">
angular.module("myApp",['ngRoute'])
//angularjs的配置，在配置中配置路由内容
.config(['$routeProvider', function($routeProvider){
$routeProvider
//template中支持html标签
.when('/',{template:'这是<h1>首页页面</h1>'})
//.when('/computer',{template:'这是电脑分类页面'})
.when('/computer',{templateUrl:'computer.html'})
.when('/money',{template:'这是财务页面'})
//如果都匹配不上，则跳转到一个页面
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>Nach dem Login kopieren |
ng-view: wird verwendet, um den Inhalt der Routing-Ergebnisse anzuzeigenwann: Urteilsaussage
Vorlage:HTML-Ergebnisse, unterstützt HTML-TagstemplateUrl: unterstützt das Laden anderer Seiten
Verwandte Empfehlungen: Alle Versionen von AngularJS herunterladenAngularJS-LernzusammenfassungDer Unterschied zwischen AngularJS und Angular4. Warum Angular4 verwendenAngular-Einführungs-TutorialDas obige ist der detaillierte Inhalt vonEinführung in die Grundlagen von AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
