Question

28

A Basic Guide To Starting With Angular JS

rated 0 times [ 32] [ 4] / answers: 1 / hits: 18895 / 11 Years ago, fri, march 15, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alorac

Add To Favorites

Follow

Total Points: 262

Total Questions: 82

Total Answers: 97

Location: Libya

Member since Mon, Dec 7, 2020

4 Years ago

alorac questions

1 Invalid Form Body in Discord.js ban command

Sat, Oct 10, 20, 00:00, 4 Years ago

1 How to change URL without refreshing the page?

Tue, Sep 22, 20, 00:00, 4 Years ago

1 How to Query a Model based on its Relation in Strapi

Wed, Jul 1, 20, 00:00, 4 Years ago

1 How can I access react redux state in index.js file?

Wed, Jun 3, 20, 00:00, 4 Years ago

1 Alpine.js - nested components

Sun, May 17, 20, 00:00, 4 Years ago

View All

answered 11 Years ago claudiofredye · Accepted Answer

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.