Le contenu de cet article concerne l'introduction de base à angularjs. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer.
Framework JS front-end : il encapsule l'utilisation de JS pour développer des fonctions répétitives front-end, étend le HTML et est principalement utilisé pour le fonctionnement et l’affichage de la page.
Core : MVC, modularisation, liaison de données bidirectionnelle, injection de dépendances, balises sémantiques, expressions, etc. [Tutoriels vidéo associés recommandés : Tutoriel vidéo AngularJs]
Introduction des fichiers js pertinents
<!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>Copier après la connexion |
ng-app=””Module d'application anonyme, nécessite généralement d'écrire un nom pour faciliter l'initialisation ultérieure ng -model : Liez automatiquement la valeur de l'élément de formulaire
à la variable interne Angularjs.
ng-bind : La fonction est équivalente à l'expression, mais l'utilisation est différente. Généralement utilisé pour lier des éléments non-formulaires et afficher des variables. La différence entre
Basé sur MVC modularisé (MVVM)
Vue : fait principalement référence aux balises de données de page statiques HTML, principalement utilisées pour l'affichage.
Modèle : ne remplit principalement que certaines données de la vue et du traitement logique. Par exemple, json, variable
contrôle : du code js, écrire une logique. Principalement pour obtenir le modèle, remplir la vue, obtenir les données de la vue et remplir le modèle.
Conversion entre m et vm :
var username=”XiaoQi”; $scope.username=username;
La variable de vm est en fait liée à l'attribut dans la variable globale $scope.
Sur la page : {{username}}Remarque : les variables Angularjs ne peuvent pas être ajoutées à $scope sur la page.
Si la variable est modifiée par des js internes tels que timer, alors par défaut Angularjs ne peut pas implémenter l'affichage bidirectionnel de liaison de données, et vous devez utiliser $.digest pour forcer la notification (actualisation)
<!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>Copier après la connexion |
<!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>Copier après la connexion |
<!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>Copier après la connexion |
|
Mécanisme de routage 
Avant : include inclut les pages, qui réutilisent uniquement les pages, mais les pages réutilisées sont également rafraîchies dans leur ensemble.
Grâce au routage angulaire js, un rafraîchissement partiel peut être obtenu, et des têtes et des queues répétées peuvent être réalisées sans rafraîchissement. Et effet de page unique multi-vue.
Implémentation sous-jacente : implémentée via # (ancre) en html.
<!--引入路由模块-->
<script type="text/javascript" src="../js/angular-route.min.js" ></script>Copier après la connexion |
<!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>Copier après la connexion |
ng-view : utilisé pour afficher le contenu des résultats de routagequand : déclaration de jugement
modèle : le résultat du HTML, prend en charge les balises htmltemplateUrl : prend en charge le chargement d'autres pages
Recommandations associées : Téléchargez toutes les versions d'AngularJSRésumé d'apprentissage d'AngularJSLa différence entre angulairejs et angulaire4. Pourquoi utiliser angulaire4tutoriel d'introduction angulaireCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment acheter et vendre du Bitcoin sur okex
Le rôle du masque de sous-réseau
L'Apple Store ne peut pas se connecter
Utilisation de la liste déroulante
Le rôle de Vulkan
Comment intercepter les appels harcelants
Comment fermer la bibliothèque de ressources d'application
Processus d'achat et de vente de Bitcoin sur Huobi.com
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
