Démarrage rapide avec AngularJS_AngularJS
怎么样快速了解AngularJS？
相信很多初学者都有过或者类似的疑问，其实这个问题没有标准的答案，每个人的技术背景、工作经验等等都不经相同，所以学习AngularJS的切入点肯定也就不同，我之前初略使用过knockoutjs，当我第一眼看到AngularJS的Helloworld案例后，顿时就被声明式的语法和强大的双向绑定特性所吸引。
其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性，下面我就从几个例子一步一步的讲解AngularJS吸引人的东西并且实际项目中是怎么使用ng的。
首先还是从第一个经典的Hello world 案例说起，如下HTML（如果你在墙外，可以直接访问https://angularjs.org ，右边就有运行效果）。
<!doctype html>
<html ng-app>
<head>
<script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
会一点HTML的人都知道，这个界面有个input输入框，下面有个
的标题，内容是 Hello {{yourName}}!。
实现的效果是：当用户在input输入框输入内容时，下面的h1标题内部实时显示 ”Hello 输入的内容!"
与普通的HTML不同之处有以下几点：
html标签上加了一个 ng-app属性，意思是整个HTML都属于AngularJS控制；
input输入框加了一个 ng-model="yourName"，这样就表明input的value与内存中的变量yourName是双向绑定的，在输入框输入”world“，内存中的yourName变量就变成了”world“，反之亦然；
h1标签内部有个{{yourName}}，这个表示内存中的yourName属性和h1节点的内容实现了双向绑定，yourName为”world“后，h1的内容就会变成”Hello world!“，"{{}}"是ng的表达式。
传统的做法：
在input上添加change事件，当触发change事件后，获取input输入框的内容，再组合字符串，通过DOM操作修改h1的innerHTML，前提可能要给 input和h1加上id或者name属性。
通过这个例子.
大家应该能够很明显的感觉到AngularJS的优势了，不用写一行JS代码，就能实现一个很完美的功能。
上面的例子只是展示了一个简单的双向绑定功能，AngularJS既然是一个MV*框架，上面说的yourName是Model，HTML是View，那么*（Controller或者ViewModel）去哪了？我稍微修改下上面的例子:
<!doctype html>
<html ng-app>
<head>
<script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script>
</head>
<body>
<div ng-controller="testCtrl">
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<button ng-click="clearInputValue()">Clear Input Value</button>
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
<script>
function testCtrl($scope) {
$scope.yourName = "world";
$scope.clearInputValue = function () {
$scope.yourName = "";
}
}
</script>
</body>
</html>
可以看到我修改的地方：
在div上加了一个ng-controller="testCtrl"，表示这个DIV内部所有元素都属于testCtrl管辖；
同时script加了一个函数testCtrl，这个函数有个$scope的参数，并且函数内给$scope.yourName赋了一个”world“的值，而且还有个clearInputValue函数，这个$scope大家可以理解为ViewModel，ng Model的载体（或者说上下文），所有模板中使用的ng变量都在$scope上，初始化给$scope.yourName赋值说明input输入框的Value默认就为”world“；
界面上多了一个Button，button上有个ng-click="clearInputValue()"，ng-click表示给这个Button绑定了一个click事件，点击Button执行clearInputValue函数，这个函数给$scope.yourName赋值了空字符串，清空了输入框的值。
从这个例子中大家可以清楚的看到AngularJS是怎么样实现MV*的，具体传统的做法大家可以自行在脑海中想想，ng的实现方式是不是更加的简单，至此你有没有被ng所吸引？？？
大家看了上面的例子后，或许有些人就开始疑问了，每个controller绑定一个函数，这个函数的第一个参数是$scope，所有的数据和方法都在$scope上下文里面，而且这个函数是全局函数，如果界面上有很多controller呢？不会有很多个全局函数吧？（注意：这种全局函数的方式在1.3.x版本后已经被取消了）
哈哈，其实ng早就想到了这一步，ng有自己的一套模块加载机制，而且还引入了依赖注入。
我再次修改了上面的例子：
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8"/>
<style>
ul {
list-style : none;
clear : both;
}
ul > li {
list-style : none;
float : left;
margin-left : 15px;
display : block;
}
.active {
background : #1f292e;
color : #FFFFFF;
}
a {
color : #000066;
}
.active > a {
color : #FFFFFF;
}
[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}.ng-animate-start{border-spacing:1px 1px;-ms-zoom:1.0001;}.ng-animate-active{border-spacing:0px 0px;-ms-zoom:1;}
</style>
</head>
<body ng-cloak>
<div ng-controller="testCtrl">
<ul>
<li ng-class="{'active':currentMenu == 'menu1'}"><a href="javascript:;" ng-click="selectMenu('menu1')">菜单1</a>
</li>
<li ng-class="{'active':currentMenu == 'menu2'}"><a href="javascript:;" ng-click="selectMenu('menu2')">菜单2</a>
</li>
</ul>
<br><br>
<div ng-if="currentMenu == 'menu1'">
我是菜单1里面的内容
</div>
<div ng-if="currentMenu == 'menu2'">
我是菜单2里面的内容
</div>
</div>
<script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script>
<script>
angular.module("app", []);
angular.module("app").controller("testCtrl", ["$scope", function ($scope) {
$scope.currentMenu = "menu1";
$scope.selectMenu = function (menu) {
$scope.currentMenu = menu;
}
}]);
</script>
</body>
</html>
我给ng-app指定了一个名称叫”app“，同时js代码使用angular.module("app", []);定义了一个名称为”app“的module，同时用这个app module 的controller方法定义了一个testCtrl；定义module函数是angular对象上的静态方法，第一个参数传名称，第二个参数是一个数组，这个数组表示这个module所引用的其他module，在这个例子中我们没有使用任何其他的module，所以传入一个空的数组，如果第二个参数不传，表示获取名称为”app“的module；
这个例子是大家在项目中经常遇见的菜单模块，页面共有2个菜单，默认选中菜单1，当选择哪个菜单，下面的内容区域就显示选中菜单的内容，同时菜单的样式需要修改为选中状态；
关于显示哪个内容区域我使用了ng-if="currentMenu == 'menu1'"和ng-if="currentMenu == 'menu2'",顾名思义，ng-if意思是如果表达式为真编译并且显示ng-if内部的模板元素，如果为假，不显示任何内容；
至于选中菜单的样式，我使用了ng-class="{'active':currentMenu == 'menu1'}",意思就是currentMenu 为menu1时添加class ”active“，否则没有任何样式。
上面的3个例子，很好的展示了如何开启一个ng的web，并且如何模块化的使用ng，如果你都看懂了,说明你已经掌握了如何使用ng-controller、数据的双向绑定，写模板，并且初步接触了很多内置的指令（如：ng-app,ng-controller,ng-model,ng-if,ng-class,ng-click）。
说实话，你已经会了很多了。
当然ng还是有很多东西等你慢慢发觉，如：
用ngRoute模块写SPA（单页程序）；
还有更多丰富的指令，学会自己封装自定义指令；
ng的过滤器功能（Filter）；
ng的表单验证功能；
使用ng的服务功能（service、provider和factory）；
ng scope树形结构，并且在不同控制器之间通过事件发布订阅机制通信；
$http和$resource模块与服务端API进行交互操作；
使用animate模块做一些动画特效；
单元测试。
说明：上面的例子为了展示方便，所有的js css 都写在了html页面里面，实际项目中应该分开写在独立的文件中。
最后的例子
大家可以根据上面学到的知识，自己做个todolist的例子，默认界面上有2个todo，一个完成一个未完成，每个todo前面有个checkbox表示是否已完成，下面有个输入框和添加按钮，输入内容点击添加则列表上会多一个todo。大家可以先不用看下面的代码，自己尝试做一下，这个例子需要用到的几个directive：
代码如下：
<!DOCTYPE html>
<html ng-app="todoApp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
</style>
</head>
<body>
<h2>Todo</h2>
<div ng-controller="TodoController">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
<script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script>
<script>
angular.module('todoApp', [])
.controller('TodoController', ['$scope', function($scope) {
$scope.todos = [
{text:'learn angular', done:true},
{text:'build an angular app', done:false}];
$scope.addTodo = function() {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
};
$scope.remaining = function() {
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1;
});
return count;
};
$scope.archive = function() {
var oldTodos = $scope.todos;
$scope.todos = [];
angular.forEach(oldTodos, function(todo) {
if (!todo.done) $scope.todos.push(todo);
});
};
}]);
</script>
</body>
</html>
上面的输入框和按钮其实用下面的代码也能实现
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="button" value="add" ng-click="addTodo()">
之所以官方的示例中用了
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Apprentissage Python : Comment installer la bibliothèque pandas dans le système
Jan 09, 2024 pm 04:42 PM
Démarrage rapide : comment installer la bibliothèque pandas dans Python nécessite des exemples de code spécifiques 1. Présentation Python est un langage de programmation largement utilisé avec un puissant écosystème de développement qui comprend de nombreuses bibliothèques pratiques. Pandas est l'une des bibliothèques d'analyse de données les plus populaires. Elle fournit des structures de données et des outils d'analyse de données efficaces, facilitant le traitement et l'analyse des données. Cet article explique comment installer la bibliothèque pandas en Python et fournit des exemples de code correspondants. 2. Installez Py
Démarrage rapide avec la bibliothèque d'animation Mojs : un guide du module Explosion
Sep 02, 2023 pm 11:49 PM
Nous commençons cette série en apprenant à animer des éléments HTML à l'aide de mojs. Dans ce deuxième tutoriel, nous continuons à utiliser le module Shape pour animer les formes SVG intégrées. Le troisième didacticiel couvre d'autres façons d'animer des formes SVG à l'aide de ShapeSwirl et du module stagger. Nous allons maintenant apprendre à animer différentes formes SVG en rafales à l'aide du module Burst. Ce tutoriel dépendra des concepts que nous avons abordés dans les trois premiers tutoriels. Si vous ne les avez pas encore lus, je vous recommande de les lire d'abord. Création d'une animation en rafale de base La première chose que nous devons faire avant de créer une animation en rafale est d'instancier un objet Burst. Ensuite, nous pouvons spécifier différentes propriétés
Démarrage rapide : utilisez les fonctions du langage Go pour implémenter un service de streaming audio simple
Jul 29, 2023 pm 11:45 PM
Démarrage rapide : utilisez les fonctions du langage Go pour implémenter un service de streaming audio simple Introduction : Les services de streaming audio sont de plus en plus populaires dans le monde numérique d'aujourd'hui, ce qui nous permet de lire des fichiers audio directement sur le réseau sans effectuer de téléchargement complet. Cet article explique comment utiliser les fonctions du langage Go pour implémenter rapidement un service de streaming audio simple afin que vous puissiez mieux comprendre et utiliser cette fonction. Étape 1 : Préparation Tout d'abord, vous devez installer l'environnement de développement du langage Go. Vous pouvez le télécharger sur le site officiel (https://golan
Recommandez cinq frameworks couramment utilisés en langage Go pour vous aider à démarrer rapidement
Feb 24, 2024 pm 05:09 PM
Titre : Démarrez rapidement : cinq cadres de langage Go courants recommandés Ces dernières années, avec la popularité du langage Go, de plus en plus de développeurs ont choisi d'utiliser Go pour le développement de projets. Le langage Go a reçu une large attention pour son efficacité, sa simplicité et ses performances supérieures. Dans le développement du langage Go, le choix d'un framework approprié peut améliorer l'efficacité du développement et la qualité du code. Cet article présentera cinq frameworks couramment utilisés dans le langage Go et joindra des exemples de code pour aider les lecteurs à démarrer rapidement. Framework Gin Gin est un framework Web léger, rapide et efficace.
Démarrage rapide : utilisez les fonctions du langage Go pour implémenter des fonctions simples de reconnaissance d'images
Jul 30, 2023 pm 09:49 PM
Démarrage rapide : utilisez les fonctions du langage Go pour implémenter des fonctions simples de reconnaissance d'images. Dans le développement technologique actuel, la technologie de reconnaissance d'images est devenue un sujet brûlant. En tant que langage de programmation rapide et efficace, le langage Go a la capacité d'implémenter des fonctions de reconnaissance d'images. Cet article fournira aux lecteurs un guide de démarrage rapide en utilisant les fonctions du langage Go pour implémenter des fonctions simples de reconnaissance d'images. Tout d’abord, nous devons installer l’environnement de développement du langage Go. Vous pouvez télécharger la version appropriée sur le site officiel de Go Language (https://golang.org/)
Apprenez à démarrer rapidement en utilisant cinq outils de visualisation Kafka
Jan 31, 2024 pm 04:32 PM
Démarrage rapide : un guide d'utilisation de cinq outils de visualisation Kafka 1. Outils de surveillance Kafka : Introduction Apache Kafka est un système de messagerie distribué de publication-abonnement qui peut gérer de grandes quantités de données et fournir un débit élevé et une faible latence. En raison de la complexité de Kafka, des outils de visualisation sont nécessaires pour faciliter la surveillance et la gestion des clusters Kafka. 2.Outils de visualisation Kafka : cinq choix majeurs KafkaManager : KafkaManager est une communauté web open source
Les 5 derniers tutoriels Angularjs en 2022, de l'entrée à la maîtrise
Jun 15, 2017 pm 05:50 PM
Javascript est un langage tout à fait unique. Il est unique en termes d'organisation du code, de paradigme de programmation du code et de théorie orientée objet. La question de savoir si Javascript est un langage orienté objet a été débattue depuis un certain temps. Il y a évidemment une réponse depuis longtemps. Cependant, même si Javascript est dominant depuis vingt ans, si vous souhaitez comprendre les frameworks populaires tels que jQuery, Angularjs et même React, il suffit de regarder le « Black Horse Cloud Classroom JavaScript Advanced Framework ». Tutoriel vidéo de conception".
Démarrage rapide : utilisez les fonctions du langage Go pour implémenter un affichage simple de graphiques linéaires de visualisation de données
Jul 30, 2023 pm 04:01 PM
Démarrage rapide : utilisez les fonctions du langage Go pour implémenter un affichage simple de graphiques linéaires de visualisation de données Introduction : Dans le domaine de l'analyse et de la visualisation des données, les graphiques linéaires sont un type de graphique couramment utilisé qui peut montrer clairement la tendance des changements de données au fil du temps ou d'autres variables. Cet article expliquera comment utiliser les fonctions du langage Go pour implémenter un affichage simple de graphique linéaire de visualisation de données et fournira des exemples de code pertinents. 1. Avant de commencer le travail de préparation, vous devez vous assurer des conditions suivantes : installer l'environnement linguistique Go et définir les variables d'environnement pertinentes. Installer les dépendances nécessaires
