recherche

Maison  >  Article  >  interface Web  >  Bases d'AngularJS_AngularJS

Bases d'AngularJS_AngularJS

WBOY
WBOYoriginal
2016-05-16 16:25:23982parcourir

Définition et fonctionnalités d'angularJS

1.google framework open source front-end

2. Modèle de conception MVVM (model view view-model) : le modèle interagira avec ViewModel (via l'objet $scope) et surveillera les modifications apportées au modèle. Ceux-ci peuvent être envoyés et rendus via View, en utilisant HTML pour afficher votre code

3. REPOS pratique

4. Liaison de données et injection de dépendances

5. Vous pouvez utiliser HTML tout comme XML. AngularJS complète les paramètres associés via son propre compilateur et ses propres directives

6. Les modèles sont transmis au compilateur Angular en tant qu'éléments DOM

7.AngularJS étend le HTML via des directives et lie les données au HTML via des expressions.

Créer une application angulaireJS

Ajouter la balise <script> d'Angular à la balise <head> </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="63312" class="copybut" id="copybut63312" onclick="doCopy('code63312')">Copier le code<u></u></a> Le code est le suivant :</span></div> <div class="codebody" id="code63312"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>

Ajouter la directive ng-app à la balise

Copier le code Le code est le suivant :
ng-app="guetonline"
ng-controller="MainController"
>


Créez un nouveau script de répertoire et des fichiers app.js, définissez et configurez tous les modules et dépendances dans app.js

Copier le code Le code est le suivant :
var app = angulaire.module('guetonline', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);


Définissez les contrôleurs, les services et les instructions dans l'application du module

Copier le code Le code est le suivant :
app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //Contrôleur
app.service( 'MainSevicel', function() {} ) //Service
app.directive( 'dragToDismiss', function() {} ) //Directive


Définir des itinéraires dans l'application module

Copier le code Le code est le suivant :
app.config(function($routeProvider) {
$routeProvider.when('/', {templateUrl : 'index/home', reloadOnSearch : false});
$routeProvider.when('/scroll', {templateUrl : 'scroll.html', reloadOnSearch : false}); $routeProvider.when('/toggle', {templateUrl : 'toggle.html', reloadOnSearch : false}); $routeProvider.when('/tabs', {templateUrl : 'tabs.html', reloadOnSearch : false}); $routeProvider.when('/accordion', {templateUrl : 'accordion.html', reloadOnSearch : false}); $routeProvider.when('/overlay', {templateUrl : 'overlay.html', reloadOnSearch : false}); $routeProvider.when('/forms', {templateUrl : 'forms.html', reloadOnSearch : false});
$routeProvider.when('/dropdown', {templateUrl : 'dropdown.html', reloadOnSearch : false});
$routeProvider.when('/drag', {templateUrl : 'drag.html', reloadOnSearch : false});
$routeProvider.when('/carousel', {templateUrl : 'carousel.html', reloadOnSearch : false});
$routeProvider.when('/news/official_view', {templateUrl : '/news/official_view', reloadOnSearch : false});
});



A suivre. . La prochaine étape consiste à en savoir plus sur les étapes 4,5 et les filtres
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：Méthodes natives de manipulation de chaînes javascript_Connaissances de baseArticle suivant：Méthodes natives de manipulation de chaînes javascript_Connaissances de base

Articles Liés

Voir plus