A Basic Guide To Starting With Angular JS

Question

I am confused to were to start when creating my app.

When I click the add button I am wanting to show a form - Do I append a div to that button?

How do I attack this?

Code:

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

I'm a little confused; I don't see any AngularJS code. Are you manually bootstrapping your app? — Josh David Miller, Mar 15 '13 at 20:31
@JoshDavidMiller I have not written any code yet as im not sure were to start. I am using the Twitter BS — Jess McKenzie, Mar 15 '13 at 20:37
Check this : https://github.com/jmcunningham/AngularJS-Learning — EpokK, Nov 22 '13 at 15:02
W3Schools Manual is a good way to start: http://www.w3schools.com/angular/ — serge, Oct 27 '15 at 14:18

score 70 · Accepted Answer · edited May 23 '17 at 12:13

Okay, from the top! :-)

First, you have to tell AngularJS somewhere that you're using it. The body tag is as good a place as any: <body ng-app="myApp">. This tells AngularJS to use a module called myApp as the root of your application. So let's define that now:

// app.js

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

The second argument is an array of dependencies. We won't worry about that now. So now we have a module. AngularJS is an MVC framework, so we also need to define a controller somewhere. Let's add this to our app.js file:

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

The $scope variable is how we glue our controller logic to the view. Speaking of the view, we have to tell AngularJS to use this controller someplace. Let's edit the body tag once more:

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

Boom! Our app works. So now AngularJS is all set up and working, so we can tackle your question.

You want to make something appear on a certain action. There's a directive for that called ngShow. It will show whatever's inside of it when the condition is true:

<form ng-show="visible">

What is visible? That's an expression. In this case, it's just a variable. Defined where? On our scope!

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

Okay, so now it starts out as false; how do we change it to true when we click a button? There's a directive for that called ngClick that also takes an expression:

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

In this case, our expression changes the visible variable to true. And immediately, the form is shown! Here's a completed Plunker: http://plnkr.co/edit/Kt4dR2tiTkShVYWCqQle?p=preview

Welcome to AngularJS!

Here are some supplemental resources you should grok:

The Tutorial: http://docs.angularjs.org/tutorial
The Guide: http://docs.angularjs.org/guide/
Migrating from jQuery: "Thinking in AngularJS" if I have a jQuery background?

And also join us on the Mailing List! We're good people.

wow thanks Josh - I have just watched http://www.youtube.com/watch?v=WuiHuZq_cg4 so I am getting into the mind frame — Jess McKenzie, Mar 15 '13 at 21:02
John's videos are great. Also check out the [AngularJS YouTube channel](http://www.youtube.com/angularjs) and the [Egghead.io](http://egghead.io/) tutorials. — Josh David Miller, Mar 15 '13 at 21:20
hey i am understanding the concept very nice but.. were and how to test my example .. i never came across this in my video tutorial — saikiran, Aug 07 '13 at 18:34
Thanks for the quickstart; especially for the lazy people like me :) — HiChews123, Aug 24 '16 at 21:34

score 1 · Answer 2 · answered Mar 15 '13 at 22:40

Sounds like you're just starting to test out Angular. I've only been using it for about a week now. Things are pretty cool when you get realize how they work. Wish there were better/more documentation on it though. I drew up a quick JSFiddle example what it sounded like you were looking for. Let me know if that's somewhat of what you were looking for. Should work completely.

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

And your 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 = '';
};
}

Neil Moffatt · Answer 3 · 2014-03-17T20:14:40.003

0

You can find a simple and a more involved example of creating Angular applications with no prior knowledge:

Formatting an html element

and

Adding a data edit facility

They should help provide easy familiarisation.

edited Mar 17 '14 at 20:14

answered Mar 17 '14 at 19:30

Neil Moffatt

1
1

1

Welcome to SO! Answers here should be self-contained, which means they should make sense and be useful even if any links in them break. Unfortunately this answer will not be very useful if those links break. Perhaps you can **edit it to fix this**? Later, when you have enough reputation to comment, you can give links like this as comments. – hyde Mar 17 '14 at 20:27

A Basic Guide To Starting With Angular JS

3 Answers3