AngularJS 101

"AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology."  What is AngularJS

This is a crash-course into learning AngularJS.  We will go through initial setup of downloading and including AngularJS, defining our App's module and adding logic to our controllers.  This tutorial is inspired by the excellenet short video tutorial presented by Carlos Kelkboom.

Key Concepts

  • MVC
    Angular has adopted the MVC (Model-View-Controller) framework for structuring app code: Model (Data structure, for example Employee), View (Basically its your rendered HTML) and lastly Controller (What sits between your Model and View).
  • Tying your view with your controller
    Once you define your Controller in the <head>:
    myApp.controller('MainCtrl', ['$scope', function ($scope) {
    	$scope.text = 'Hello world!';
    }]);
    You then need to create the View component in the <body> like so:
    Note: Syntax will vary slightly if you're loading Angular with RequireJS.
    <div ng-app="myApp">
    	<div ng-controller="MainCtrl">
    		{{ employee.details.name }} and {{ employee.details.jobTitle }}
    	</div>
    </div>
  • $scope
    Refers to the current element in the DOM.

     

Hello World

  1. Code structure:
    + /yourapp
    +--+ /app
    +--+--+ app.js
    +--+--+ utils.js
    +--+--+ main.js
    + /bower_components
    + /images
    + bower.json
    + index.html
  2. Create a new empty HTML file (index.html)
    <!DOCTYPE html>
    <html>
    <body></body>
    </html>
    
  3. Initialise Bower to manage dependencies.
    bower init
  4. Install Angular using Bower
    Learn more about Bower in this post.
    bower install angular --save-dev
    
  5. Install RequireJS to manage dependencies.
    bower install requirejs --save-dev
  6. Create your app Main file (main.js) and initialise app.
    require.config({
    	paths: {
    		app: 'app',
    		utils: 'utils',
    		angular: '../bower_components/angular/angular.min',
    		jquery: '../bower_components/jquery/dist/jquery.min'
    	},
    	shim: {
    		app: {
    			deps: ['angular', 'utils']
    		},
    		angular: {
    			deps: ['jquery'],
    			exports: 'angular'
    		},
    		utils: {
    			deps: ['angular']
    		}
    	}
    });
    require(['app'], function() {
    	angular.bootstrap(document, ['app']);
    });
    
  7. Create your new RequireJS app module (app.js).

    define("app", ["angular", "angularResource"], function(angular) {
    	var app = angular.module("app", ["utils"] );
    	return app;
    });
    
  8. Define utils module.
    This basically consists of common functions that would be used throughout your app.
    define( function() {
    	var utils = angular.module("utils", [] );
    	utils.controller('MainCtrl', ['$scope', function ($scope) {
    		$scope.employee = {};
    		$scope.employee.details = {
    			"name": "Zaid Al-Dabbagh",
    			"jobTitle": "Angular Developer"
    		};
    	}]);
    });
    
  9. Load Main app with RequireJS.
    <body>
    <!-- Load Main with RequireJS --> <script src="bower_components/requirejs/require.js" data-main="app/main.js"></script>
    </body>
  10. Insert data-ng-controller declaration to define your app.
    <!DOCTYPE html>
    <html>
    <head>
    	<link rel="shortcut icon" href="images/favicon.png" />
    </head>
    <body data-ng-controller="MainCtrl">
    	<h1>Hello {{ employee.details.name }} ({{ employee.details.jobTitle }})!</h1>
    	<!-- Load Main with RequireJS -->
    	<script src="bower_components/requirejs/require.js" data-main="app/main.js"></script>
    
    </body>
    </html>

References
http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/
https://www.youtube.com/watch?v=Id9ryNSjVgI