Free standing Angular Controller without Module

by Javascript Specialist August 21, 2014 23:11
This is a simplistic version way of creating controllers. All that is needed is function name and the name can be considered a controller.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<title>z54.com programming school</title>
<script>
function GreetingsCtrl($scope) {
$scope.greet = "Hello angularJS programmers";
}
</script>
</head>
<body ng-app>
<div ng-controller="GreetingsCtrl">{{greet}}</div>
</body>
</html>

AngularJS | Tutorial

What is an AngularJS Controller?

by Javascript Specialist December 5, 2014 07:08

AngularJS Controllers are objects are that manages DOM or html elements within an HTML page.

To declare an AngularJS Controller, you can associate to the module as per below. A controller is associated to the element by adding the controller directive to the html tag. Once the controller is associated, AngularJS will enable the controller object to process and bind within the HTML Element by using {{ }}.

<script>
var myApp=angular.module('websites',[]);
myApp.controller('GreetingsCtrl', function($scope) {
$scope.greet='Hello web programmers';
});
</script>

AngularJS | Tutorial

What is an Angular Module?

by Javascript Specialist August 21, 2014 23:33

Angular Modules are complete and independent unit such as Administrator functions or form submission.
How it is coded - coded on the HTML tag of each page that shares that same module. If you don't understand this, that's ok. You will figure it out once you start using it.

<html ng-app>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
...
</html>

or you like to give your module a name such as myApp.

<html ng-app='myApp'>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
...
<script>
angular.module('myApp',[])
</script>
</html>

AngularJS | Tutorial

Process Expressions inside HTML

by Javascript Specialist August 21, 2014 23:40
Below is the absolute basics of an AngularJS application. It has three essential components.
  1. The ng-app directive - The word ng-app initiates this page as an AngularJS page and the AngularJS engine will begin processing according to AngularJS rules. You can also place this ng-app directive on the body tag such as <body ng-app>. You can also add module name to the directive such as <html ng-app="myFirstAngularJSApp">

  2. The script reference to "//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js" - This references to the AngularJS core library. Notice that you do not need JQuery references beforehand. AngularJS comes with lighter version of JQuery when you do not reference it. If you do add the JQuery reference, AngularJS will use the full JQuery version. (Yes, the AngularJS developers are geniuses!)

  3. The {{...}} data binding expression - {{...}} tells AngularJS to evaluate anything inside the curly double brackets. For example below, {{1+2}} changes to 3. As a newbie developer to AngularJS, I use this a test to see if AngularJS engine is running. I know the engine is running when {{1+2}} displays as 3.
<html ng-app>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
    <title>Angular Example - processing expressions inside HTML</title>
<body>
1+2={{1+2}}
</body>
</html>

AngularJS | Tutorial