Maison > Article > interface Web > Que devez-vous savoir lorsque vous découvrez AngularJS pour la première fois ? Un tutoriel incontournable pour démarrer avec Angularjs en 2018 (avec exemples)

Que devez-vous savoir lorsque vous découvrez AngularJS pour la première fois ? Un tutoriel incontournable pour démarrer avec Angularjs en 2018 (avec exemples)

寻∝梦original: 2018-09-08 14:07:441039parcourir

Cet article présente la compréhension de base de angularjs, afin que les étudiants qui souhaitent apprendre Angularjs puissent bénéficier d'un meilleur cours d'introduction. Jetons un coup d'œil à cet article maintenant.

Introduction à AngularJS

AngularJs est un framework front-end, une bibliothèque écrite en JavaScript. Les utilisateurs peuvent utiliser ce cadre pour effectuer une liaison de données bidirectionnelle dans le front-end afin de réaliser l'affichage des données MVC sur le front-end.

Lorsque vous utilisez le framework AngularJs, il vous suffit d'introduire le fichier AngularJs dans le HTML front-end. Très facile à utiliser.

Opérations de base d'AngularJs

Avant d'expliquer les instructions de base, introduisons quelques concepts de base. Une fois que l'utilisateur a introduit le fichier AngularJs dans la page, il peut créer la WebApp et le contrôleur. Dans AngularJs, chaque page est considérée comme une WebApp indépendante. Chaque WebApp peut inclure plusieurs parties de traitement indépendantes, que nous appelons contrôleurs. Chaque contrôleur a son propre contexte et sa propre logique de traitement. AngularJs délimite la portée de cette WebApp via l'instruction ng-app Habituellement, cette ng-app peut être écrite directement sur la balise html ou sur un élément. Par exemple :

html:<p ng-app="myApp">
    <p ng-controller="myController">
    <h3>{{data}}</h3>
    </p></p>

Initialisation de l'application : La directive ng-app indique à AngularJS que l'élément

est le "propriétaire" de l'application AngularJS.
Lier les données : La directive ng-model lie la valeur du champ de saisie au nom de la variable d'application. ---Lier à la propriété. Également disponible : Fournissez une validation de type pour les données de candidature (numéro, e-mail, obligatoire). Fournissez le statut (invalide, sale, touché, erreur) pour les données d'application. Fournit des classes CSS pour les éléments HTML. Liez les éléments HTML aux formulaires HTML.
Lier les données en HTML : La directive ng-bind lie le nom de la variable d'application au innerHTML d'un paragraphe. Équivalent à l'écriture de {{variable name}} en html——Lier au texte
Initialiser les données : La directive ng-init initialise les variables d'application AngularJS.
Cloner les données : La directive ng-repeat clone l'élément HTML une fois pour chaque élément de la collection (tableau). Par exemple :ng-repeat="x in arrays"
Directive personnalisée : Ajoutez des directives personnalisées en utilisant la fonction .directive. Pour appeler une directive personnalisée, le nom de la directive personnalisée doit être ajouté à l'élément HTML. Utilisez camelCase pour nommer une directive, runoobDirective, mais vous devez la séparer par - lorsque vous l'utilisez, runoob-directive.

eg:<body ng-app="myApp">
    <runoob-directive></runoob-directive>
    <script>
        var app = angular.module("myApp", []);
        app.directive("runoobDirective", function() {
            return {                //restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
                restrict : "A",//限制使用--E 作为元素名使用。A 作为属性使用。C 作为类名使用。M 作为注释使用
                template : "<h1>自定义指令!</h1>"
            };
        });    </script></body>

Contrôleurs : La directive ng-controller définit les contrôleurs d'application.
Filtres : Des filtres peuvent être ajoutés aux expressions via un caractère barre verticale (|) suivi d'un filtre.
service : Dans AngularJS, vous pouvez créer votre propre service ou utiliser des services intégrés. Un service est une fonction ou un objet qui peut être utilisé dans votre application AngularJS. AngularJS possède plus de 30 services intégrés. Voici quelques services intégrés couramment utilisés. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Manuel de développement AngularJS pour en savoir)

1，$location:类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性。2，$http:AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据。3,$timeout:AngularJS $timeout 服务对应了 JS window.setTimeout 函数。4,$interval:AngularJS $timeout 服务对应了 JS window.setInterval  函数。5,用户可以根据自己的需求来创建自定义服务。

http : Un service de base dans AngularJS, utilisé pour lire les données du serveur distant. Notez que les méthodes de réussite et d'erreur de $http sont obsolètes dans la version 1.5. Utilisez la méthode then au lieu de la

格式：/ 简单的 GET 请求，可以改为 POST$http({
    method: &#39;GET&#39;,
    url: &#39;/someUrl&#39;}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码});

case de sélection (select) : AngularJS peut créer une liste déroulante d'options à l'aide d'un tableau ou d'un objet.

1,使用ng-options来创建一个对象<p ng-app="myApp" ng-controller="myCtrl">
    <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
    </select></p><script>
    var app = angular.module(&#39;myApp&#39;, []);
    app.controller(&#39;myCtrl&#39;, function($scope) {
        $scope.names = ["Google", "Runoob", "Taobao"];
    });</script>2,使用ng-repeat来创建对象，<select ng-model="selectedSite">
    <option ng-repeat="x in names">{{x}}</option></select>3,区别：ng-options，选择的值是一个对象：也就是当select获取值selectedSite时候，得到的是一个对象。ng-repeat，选择的值是一个字符串:也就是当select获取值selectedSite时候，得到的是一个字符串

Table : La directive ng-repeat dans AngularJs peut parfaitement afficher la table. Vous pouvez également utiliser des filtres lors de l'affichage du tableau.

<p ng-app="myApp" ng-controller="customersCtrl"> 
    <table>
      <tr ng-repeat="x in names | orderBy : &#39;Name&#39;">
        <td>{{ $index + 1 }}</td>//显示序号        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
      </tr>
    </table></p><script>
    var app = angular.module(&#39;myApp&#39;, []);
    app.controller(&#39;customersCtrl&#39;, function($scope, $http) {
        $http.get("/try/angularjs/data/Customers_JSON.php")
        .then(function (result) {
            $scope.names = result.data.records;
        });
    });</script>

HTML DOM： AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。
　　1,ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
　　2,ng-show 指令隐藏或显示一个 HTML 元素。ng-show 指令根据 value 的值来显示（隐藏）HTML 元素。你可以使用表达式来计算布尔值（ true 或 false）:
　　3,ng-hide 指令用于隐藏或显示 HTML 元素。注意在页面中如果使用input type=hidden来做表单传值的时候，是不支持的。
　　4,ng-click 指令定义了 AngularJS 点击事件。
模块： 模块定义了一个应用程序。模块是应用程序中不同部分的容器。模块是应用控制器的容器。控制器通常属于一个模块。
注意： 对于 HTML 应用程序，通常建议把所有的脚本都放置在元素的最底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。在我们的多个 AngularJS 实例中，您将看到 AngularJS 库是在文档的区域被加载。在我们的实例中，AngularJS 在元素中被加载，因为对 angular.module 的调用只能在库加载完成后才能进行。另一个解决方案是在元素中加载 AngularJS 库，但是必须放置在您的 AngularJS 脚本前面：
表单： AngularJS 表单是输入控件的集合。
　　1,Input 控件使用 ng-model 指令来实现数据绑定。
　　2,checkbox 的值为 true 或 false，可以使用 ng-model 指令绑定，它的值可以用于应用中。举个例子：

<body ng-app="myApp" ng-controller="person">
    <form ng-submit="submit()" name="myForm">
        <p>职业:            <input type="checkbox" ng-model="user.jobs.engineer">工程师            <input type="checkbox" ng-model="user.jobs.designer">设计师            <input type="checkbox" ng-model="user.jobs.teacher">教师        </p>
        <input type="submit" value="提交">
        <input type="button" value="选中教师" ng-click="select_teacher()">
    </form></body><script>
    var app = angular.module("myApp", []);
    app.controller("person", function($scope) {
        $scope.user = {
            jobs: {
                engineer: true,
                designer: false,
                teacher: false
            }
        };
        $scope.submit = function() {
            alert(JSON.stringify($scope.user));
        };
        $scope.select_teacher = function() {
            $scope.user.jobs.teacher = true;
        }
    });</script>

　　3,radio：我们可以使用 ng-model 来绑定单选按钮到你的应用中。单选框使用同一个 ng-model ，可以有不同的值，但只有被选中的单选按钮的值会被使用。
　　4,下拉菜单上面已经写过。在此不再复述。
输入验证：　AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

<form  ng-app="myApp"  ng-controller="validateCtrl" name="myForm" novalidate>
    <p>用户名:<br>
      <input type="text" name="user" ng-model="user" required>
      <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
      <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
      </span>
    </p>
    <p>
      <input type="submit"
      ng-disabled="myForm.user.$dirty && myForm.user.$invalid
    </p>
</form>
<script>
    var app = angular.module(&#39;myApp&#39;, []);
    app.controller(&#39;validateCtrl&#39;, function($scope) {
        $scope.user = &#39;John Doe&#39;;
    });
</script>

注意：　我们使用了 ng-show指令， color:red 在邮件的

invalid 都为 true 时才显示。

属性  　描述$dirty 表单有填写记录$valid 字段内容合法的$invalid   字段内容是非法的$pristine  表单没有填写记录

API：　AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：比较对象,迭代对象,转换对象,全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数：

angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString()  判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()  判断给定的对象是否为数字，如果是返回 true。

注意点：
1，HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
2，类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。AngularJS 表达式不支持条件判断，循环及异常。AngularJS 表达式支持过滤器。

好了，本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。

Ce 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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser le contrôleur AngularJs ? Exemples d'utilisation du contrôleur angulairejsArticle suivant：Comment utiliser le contrôleur AngularJs ? Exemples d'utilisation du contrôleur angulairejs

Articles Liés

Voir plus