Una guida di base per iniziare con Angular JS

Sono confuso per iniziare durante la creazione della mia app.Una guida di base per iniziare con Angular JS

Quando faccio clic sul pulsante Aggiungi sto per mostrare un modulo - Aggiungo un div a quel pulsante?

Come si attacca questo?

Codice:

<body> 
<div id="wrap"> 

    <!-- Begin page content --> 
    <div classa="container"> 
    <div class="page-header"> 
     <h1>Birthday Reminders</h1> 
    </div> 
     <p>Data Here</p> 
    </div> 

    <div id="push"></div> 
</div> 

<div id="footer"> 
    <div class="container"> 
    <a href="#">Add</a> 
    </div> 
</div> 
    <script type="text/javascript" src="js/cordova-2.5.0.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body>

fonte

2013-03-15 Jess McKenzie

Sono un po 'confuso; Non vedo alcun codice AngularJS. Stai eseguendo manualmente il bootstrap della tua app? –

@JoshDavidMiller Non ho ancora scritto alcun codice perché non sono sicuro che iniziasse. Sto usando Twitter BS –

ottimo punto di partenza è passare attraverso il tutorial nei documenti – charlietfl

Va bene, dall'alto! :-)

Prima di tutto, devi dire ad AngularJS da qualche parte che lo stai usando. Il tag body è il posto migliore: <body ng-app="myApp">. This indica ad AngularJS di utilizzare un modulo chiamato myApp come root dell'applicazione. Quindi definiamolo subito:

// app.js 

var app = angular.module('myApp', []);

Il secondo argomento è un array di dipendenze. Non ci preoccuperemo di questo ora. Quindi ora abbiamo un module. AngularJS è un framework MVC, quindi dobbiamo anche definire un controller da qualche parte. Aggiungiamo questo al nostro file app.js:

app.controller('MainCtrl', function($scope) { 
    // we control our app from here 
});

La variabile $scope è come incolliamo la nostra logica di controllo alla vista. A proposito del punto di vista, dobbiamo dire ad AngularJS di usare questo controller da qualche parte. Diamo modificare il tag body ancora una volta:

<body ng-app="myApp" ng-controller="MainCtrl">

Boom! La nostra app funziona. Quindi ora AngularJS è tutto configurato e funzionante, così possiamo affrontare la tua domanda.

Si desidera far apparire qualcosa su una certa azione. C'è una direttiva per quello chiamato ngShow. Mostrerà qualunque di all'interno di esso quando la condizione è vera:

<form ng-show="visible">

Che cosa è visible? Questo è un expression. In questo caso, è solo una variabile. Definito dove? Sul nostro campo di applicazione!

app.controller('MainCtrl', function($scope) { 
    $scope.visible = false; 
});

Ok, ora inizia come false; come lo cambiamo in true quando clicchiamo su un pulsante? C'è una direttiva per questo chiamato ngClick che prende anche l'espressione:

<a class="btn" ng-click="visible = true">Show the Form</a>

In questo caso, la nostra espressione cambia la variabile visible a true. E subito, viene mostrata la forma! Ecco un Plunker completato: http://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview

Benvenuti in AngularJS!

Ecco alcune risorse supplementari si dovrebbe Grok:

Il Tutorial: http://docs.angularjs.org/tutorial
La Guida: http://docs.angularjs.org/guide/
Migrazione da jQuery: "Thinking in AngularJS" if I have a jQuery background?

E anche partecipare noi sul Mailing List! Siamo brave persone.

fonte

2013-03-15 21:00:59

wow grazie Josh - Ho appena visto http://www.youtube.com/watch?v=WuiHuZq_cg4 quindi sto entrando nel frame della mente –

I video di John sono fantastici. Consulta anche i tutorial [AngularJS YouTube channel] (http://www.youtube.com/angularjs) e [Egghead.io] (http://egghead.io/). –

hey sto capendo il concetto molto bello ma .. erano e come testare il mio esempio .. non ho mai trovato questo nel mio video tutorial – saikiran

Sembra che tu stia appena iniziando a testare Angular. L'ho usato solo da circa una settimana. Le cose vanno bene quando ti rendi conto di come funzionano. Vorrei che ci fosse meglio/più documentazione su di esso però. Ho elaborato un rapido JSFiddle example come suonava. Fammi sapere se è un po 'quello che stavi cercando. Dovrebbe funzionare completamente.

<div ng-controller="bdayCtrl"> 
<h3>Birthday Reminders</h3> 
<table border="1"> 
    <tr ng-repeat="bday in bdays"> 
     <td>{{bday.name}}</td> 
     <td>{{bday.date}}</td> 
    </tr> 
</table> 

<a class="btn" ng-click="visible = true">Add new</a><br> 

<form class="form-horizontal" ng-show="visible" ng-submit="newDate()"> 
    <input type="text" ng-model="bdayname" placeholder="Name"><br> 
    <input type="text" ng-model="bdaydate" placeholder="Birthdate"> 
    <button class="btn" type="submit"><i class="icon-plus"></i>Add</button> 
</form> 
</div>

E lo script:

var app = angular.module('myApp', []); 

function bdayCtrl($scope) { 
$scope.bdays = [{ 
     "name": "Jamal", 
     "date": "Jan 1, 1980" 
}, { 
     "name": "Paula", 
     "date": "Jan 1, 2000" 
}, { 
     "name": "Damon", 
     "date": "Jun 30, 1800" 
}]; 

$scope.newDate = function() { 
    $scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate}); 
    $scope.bdayname = ''; 
    $scope.bdaydate = ''; 
}; 
}

fonte

2013-03-15 22:40:44 EnigmaRM

Si può trovare una semplice e un esempio più coinvolto di creazione di applicazioni angolari senza alcuna conoscenza preliminare:

Formatting an html element

Adding a data edit facility

Essi dovrebbero contribuire a facilitare la familiarizzazione.

fonte

2014-03-17 19:30:40

Benvenuti in SO! Le risposte qui dovrebbero essere autosufficienti, il che significa che dovrebbero avere senso ed essere utili anche se si rompono eventuali collegamenti. Purtroppo questa risposta non sarà molto utile se quei collegamenti si interrompono. Forse puoi ** modificarlo per risolvere questo **? Successivamente, quando hai abbastanza reputazione per commentare, puoi dare link come questo come commenti. – hyde

Una guida di base per iniziare con Angular JS

risposta

Problemi correlati