Overview

This is not a guide on what AngularJS is and how to make anything and everything. This is for those who want to get a feel for what AngularJS has to offer. I hope you enjoy.

tl;dr - not a complete AngularJS guide

Declaring Your Display Area

In order to get text from a JS file to display on your website, you need to declare where on your HTML document you're going to display it. In order to do this you will need to go into your JS file and type in as follows:

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

Keep in mind that you do not need to name it "myApp", you can name it whatever you'd like or whatever suits the purpose of the site.

The Controller

The Controller is defined by a JS constructor function that is used to augment the AngularJS Scope. Type this under the previous script given.

  app.controller("mainController", ['$scope', function($scope) {
  $scope.title = 'text here';
}]);

Displaying the Contents

Finally we can edit the HTML document to our liking and be able to display the contents that we have been waiting so long to display:

  <body ng-app="myApp">
  <div class="main" ng-controller = "mainController"><h1>{{ title }}</h1></div>
</body>

Example

Conclusion

As I said in the beginning of this article, this was not in any means a in depth tutorial of how everything works, just a quick overview of the syntax of AngularJS and one of the simple things you can do with it. I hope this helped you to determine if this is a framework that you'd like to use in the future.


481 1 7