suchen

Heim  >  Artikel  >  Web-Frontend  >  AngularJS-Grundlagen_AngularJS

AngularJS-Grundlagen_AngularJS

WBOY
WBOYOriginal
2016-05-16 16:25:23983Durchsuche

AngularJS-Definition und -Funktionen

1.Google Front-End-Open-Source-Framework

2. MVVM-Entwurfsmuster (Model View View-Model): Das Model interagiert mit ViewModel (über das $scope-Objekt) und überwacht Änderungen im Model. Diese können über View gesendet und gerendert werden, wobei HTML zur Anzeige Ihres Codes verwendet wird

3. Bequeme RUHE

4. Datenbindung und Abhängigkeitsinjektion

5. Sie können HTML genauso bedienen, wie AngularJS entsprechende Einstellungen über seinen eigenen Compiler und seine eigenen Anweisungen ausführt.

6. Vorlagen werden als DOM-Elemente an den Angular-Compiler übergeben

7.AngularJS erweitert HTML durch Anweisungen und bindet Daten durch Ausdrücke an HTML.

AngularJS-Anwendung erstellen

Fügen Sie das <script>-Tag von Angular zum <head>-Tag hinzu </p> <p></p> <div class="codetitle"><span><a style="CURSOR: pointer" data="63312" class="copybut" id="copybut63312" onclick="doCopy('code63312')">Code kopieren<u></u></a> Der Code lautet wie folgt:</span></div> <div class="codebody" id="code63312"> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>

NG-App-Direktive zum -Tag hinzufügen

Code kopieren Der Code lautet wie folgt:
ng-app="guetonline"
ng-controller="MainController"
>

Erstellen Sie ein neues Verzeichnisskript und app.js-Dateien, definieren und konfigurieren Sie alle Module und Abhängigkeiten in app.js

Code kopieren Der Code lautet wie folgt:
var app = angle.module('guetonline', [
'ngRoute',
'mobile-angular-ui',
'mobile-angular-ui.gestures'
]);

Controller, Dienste und Anweisungen in der Modul-App definieren

Code kopieren Der Code lautet wie folgt:
app.controller( 'MainCtrl', function( $rootScope, $scope, $http ) {} ) //Controller
app.service( 'MainSevicel', function() {} ) //Service
app.directive( 'dragToDismiss', function() {} ) //Directive

Routen in der Modul-App definieren

Code kopieren Der Code lautet wie folgt:
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});
});



Fortsetzung folgt. . Der nächste Schritt besteht darin, mehr über 4,5 Schritte und Filter zu erfahren
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Native Methoden zur Manipulation von Javascript-Strings_GrundkenntnisseNächster Artikel：Native Methoden zur Manipulation von Javascript-Strings_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen