No Custom Markup

AngularJS - No Custom MarkupAngularJS Video Tutorial by John Lindquist

Extending the semantics of HTML is one of the core features of AngularJS, however, you can use AngularJS without any custom markup.


The ability to reply to discussions is limited to PRO subscribers. Want to join in the discussion? Click here to subscribe now.

egghead.io comment guidelines

egghead.io
Avatar

Extending the semantics of HTML is one of the core features of AngularJS, however, you can use AngularJS without any custom markup.


index.html

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>Egghead Videos</title>
</head>
<body>

  <div id="container" class="app">
    {{app.random}}
  </div>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

app.js

var app = angular.module("app", []);

app.controller("AppCtrl", function() {
    this.random = Math.random()
})

app.directive("app", function() {
    return {
        restrict: "C",
        controller: "AppCtrl as app"
    }
})

angular.bootstrap(document.getElementById("container"), ["app"])

John Lindquist: While we're on the subject of using Bootstrap and sort of NG app to initialize your app, it's worthwhile to mention, even though I don't recommend this practice, that you don't have to use any custom elements or attributes at all for your directives.

If I were to create a controller, like an app controller -- we'll say "math.random", you might wonder, "Where am I going to put this controller if I can't use ng controller?" The way you could use this is if you use a directive. We'll just call this "app", and we'll return an object which restricts to a class -- you may see where I'm going now with controller of app control as app.

From here if I simply give this a class of app and then look up my app.random this way, that should work the exact same way. You could build your whole application using classes for your directives, setting up controllers through your classes, whether just using the controller or linking functions and everything that you'd typically use in a directive.

You could have a completely clean dom with no ngApp, no ng controller, no ng anything and still use the bindings and everything you're used to. Again, I don't recommend that way. I prefer my dom to be more descriptive of what the app is actually doing, but if this is the way you really want to do it, it is an option.

Tech logo bar

Don't miss out on the latest PRO lessons.

Get Your PRO Subscription Now

Because you like code... not PowerPoint slides.