AngularJS Directive Example

In this example below you will see how to do a AngularJS Directive Example with some HTML / CSS and Javascript

Example code used in my video tutorial "AngularJS: The Pros, MV* Terminology, and Example Code" (Link: http://www.youtube.com/watch?v=3OOoG8sfzdM)

Thumbnail
This awesome code was written by 13thDayCoder, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 13thDayCoder ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>AngularJS Directive Example</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body ng-app="myApp">
    <div ng-controller ="mainController as mainCtr">
        <form>
            <label for="song-name">What is your favorite song? </label>
            <input ng-model="mainCtr.song" type="text" name="song-name">
        </form>

        <p>Your favorite song is "{{mainCtr.song}}"</p>
    </div>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/13thDayCoder/angularjs-directive-example-EjLjeZ */
html, body, label, input {
  font-size: 1.2em;
}

/*Downloaded from https://www.codeseek.co/13thDayCoder/angularjs-directive-example-EjLjeZ */
var app = angular.module('myApp', []);

app.controller('mainController', function () {
    var mv = this;
    
    mv.song = "All About That Bass";
});

Comments