Book Image

AngularJS Web Application Development Blueprints

By : Vinci J Rufus
Book Image

AngularJS Web Application Development Blueprints

By: Vinci J Rufus

Overview of this book

Table of Contents (17 chapters)
AngularJS Web Application Development Blueprints
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Models and views


In AngularJS, a model could be a primitive, a hash table, or a JavaScript object. The data from the model can be displayed in the view using the {{ }} expression.

Models can be defined in multiple ways. Like we saw in the first example, we can define the model within the ng-init directive. It can be created in the template within the expression as follows:

<button ng-click="firstName='John Doe' ">click </button>

Alternatively, it could also be created within a controller using the scope, which is the ideal way to do it. Refer to the following code:

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Model in Scope</title>
</head>
<body ng-controller="PeopleController">
    {{person.name}} lives in {{person.city}}
    <script src="angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function PeopleController($scope) {
        $scope.person = {
            name: "John Doe",
            city: "New York"
        }
    }
    </script>
</body>
</html>

In the preceding example, we created a controller called PeopleController and defined the model person, which is storing the data as a hash table. The $scope is an AngularJS object that is able to reference the JavaScript object model as a property.