Angular JS – Working with Modules

myApp.js
myCtrl.js

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
</head>
<body>
 
    <!--
        I can use modules to avoid using global function for my controllers.
        To do this I define an app object, registered with a particular name,
        then I refer that name as the app name in the "data-ng-app" directive
        -->
    <div data-ng-app="myApp" data-ng-controller="myController">
        <h3>Modules</h3>
        <p>The full name is {{ firstName + " " + lastName }}</p>
    </div>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <script src="JS/Default05/myApp.js"></script>
    <script src="JS/Default05/myCtrl.js"></script>
 
    <script>
 
        //I moved this code to myApp.js!!!
 
        ////This is the app object
        //var app = angular.module("myApp", []);
 
        //I moved this code to myCtrl.js!!!
 
        ////I'm adding the controller to the app object
        //app.controller("myController", function ($scope) {
        //    $scope.firstName = "John";
        //    $scope.lastName = "Doe";
        //});
    </script>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s