The
app.js file contains the controller definition and initializes the scope with some defaults:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

varapp=angular.module("MyApp",[]);

app.controller("MyCtrl",function($scope){

$scope.name="Peter";

$scope.user={

name:"Parker"

};

});

app.controller("MyNestedCtrl",function($scope){

});

Play around with the various input fields and see how changes affect each other.

2. Services provide an easy way for us to share data and functionality throughout our app.

The services we create are singletons that can be injected into controllers and other services, making them the ideal place for writing reusable code.

In this example, we’ll be creating a service for storing messages, and two controllers, one for rendering a list of messages, and another for adding more messages to the list.

Let’s set up our angular module, and create our service and call it messages

JavaScript

1

2

3

4

5

6

7

angular.module('app',[]);

angular.module('app').factory('messages',function(){

});

Create and return and empty object called messages. This is the object that dependencies of this service will receive.

JavaScript

1

2

3

4

5

6

7

angular.module('app').factory('messages',function(){

varmessages={};

returnmessages;

});

Create a property list on messages, and set it to an empty array. This is where we will be storing our messages.

JavaScript

1

2

3

4

5

6

7

8

9

angular.module('app').factory('messages',function(){

varmessages={};

messages.list=[];

returnmessages;

});

Create a function add on messages that will add provided messages to our list.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

angular.module('app').factory('messages',function(){

varmessages={};

messages.list=[];

messages.add=function(message){

messages.list.push({id:messages.list.length,text:message});

};

returnmessages;

});

Now that our service is ready, let’s create a couple controllers to make use of it.

Create a controller called ListCtrl that injects our messages service, and exposes the list from our service to our view.

JavaScript

1

2

3

4

5

6

7

angular.module('app').controller('ListCtrl',function(messages){

varself=this;

self.messages=messages.list;

});

Within a div that uses the ListCtrl that we just created, use the ng-repeat directive to display our list of messages.

JavaScript

1

2

3

4

5

6

7

8

9

<div ng-app="app">

<h1>Services</h1>

<div ng-controller="ListCtrl as list">

<png-repeat="message in list.messages">{{message.id}}:{{message.text}}</p>

</div>

</div>

The ng-repeat directive iterates over collections within our view, repeating the contents within the element where ng-repeat is used. Since our list of messages is currently empty, let’s create another controller to help us populate the list.

Create a controller named PostCtrl that also injects our messages service. This controller will also contain an addMessage function that uses the add function we made in our service.

JavaScript

1

2

3

4

5

6

7

8

9

angular.module('app').controller('PostCtrl',function(messages){

varself=this;

self.addMessage=function(message){

messages.add(message);

};

});

Create a form underneath our list using PostCtrl

JavaScript

1

2

3

4

5

6

7

8

9

</div>

<div ng-controller="PostCtrl as post">

<form ng-submit="post.addMessage(post.newMessage)">

<input type="text"ng-model="post.newMessage">

<button type="submit">Add Message</button>

</form>

</div>

Set a newMessage within PostCtrl to get a default message, set newMessage to an empty string after calling message.add to clear out the input field after it’s been submitted.

Related Posts

Angularjs4u.com is not endorsed or certified by AngularJS. All AngularJS logos and trademarks displayed on this blog are property of AngularJS.
The views expressed on here are purely to help other developers use AngularJS.