Skip to content

Instantly share code, notes, and snippets.

@aaronroberson

aaronroberson/data-binding

Last active August 29, 2015 14:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aaronroberson/c1b0edcf57916813dbe2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aaronroberson/c1b0edcf57916813dbe2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. aaronroberson revised this gist Jun 26, 2014. 1 changed file with 28 additions and 0 deletions.
    28 changes: 28 additions & 0 deletions modular-controller
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <!doctype html>
    <html ng-app="myModule">
    <head>
    <script src="//code.angularjs.org/1.2.16/angular.min.js"></script>
    </head>
    <body ng-controller="myController">

    <div>
    <label>Name:</label>
    <input type="text" ng-model="name" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{name}}!</h1>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
    <script>
    // Initialize the module
    angular.module('myModule', []);

    // Access the module via angular.module('myModule');
    // Add the controller to the module using method chaining
    angular.module('myModule').controller('myController', function($scope) {
    // Anything added to the scope is available to the view
    $scope.name = 'Aaron Roberson';
    });
    </script>
    </body>
    </html>
  2. aaronroberson revised this gist Jun 26, 2014. 1 changed file with 24 additions and 0 deletions.
    24 changes: 24 additions & 0 deletions module
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    <!doctype html>
    <html ng-app="myModule">
    <head>
    </head>
    <body>

    <div>
    <label>Name:</label>
    <input type="text" ng-model="name" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{name}}!</h1>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
    <script>
    // Initialize the module
    // The square brackets is an array of
    // dependency names that angular's
    // dependency injection system uses
    // to compose modules of other modules
    angular.module('myModule', []);
    </script>
    </body>
    </html>
  3. aaronroberson revised this gist Jun 26, 2014. 2 changed files with 37 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions data-binding
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    <!doctype html>
    <html ng-app>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

    <div>
    <label>Name:</label>
    <input type="text" ng-model="user.name" placeholder="Enter a name here">
    <h1>Hello {{user.name}}!</h1>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
    </body>
    </html>
    21 changes: 21 additions & 0 deletions first-controller
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <!doctype html>
    <html ng-app>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body ng-controller="myController">
    <h1>Hello {{user.fullName}}!</h1>

    <script type="text/javascript">
    function myController($scope) {
    $scope.user = {
    firstName: 'Aaron',
    lastName: 'Roberson',
    fullName: this.firstName + ' ' this.lastName
    };
    }
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
    </body>
    </html>
  4. aaronroberson created this gist Jun 25, 2014.
    10 changes: 10 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

    </body>
    </html>