Starting with Angular

Starting your base application js file for Angular requires you to declare and initialize your global module. Here is the starting point:

Here is the start of the javascript file:

// This is the only variable that goes into global namespace
// we put all other variables into this above object
// it takes a name and an array of dependencies (sample resources injected, these must 
// be included in your html file)
var myApp = angular.module('myApp', ['ngMessages','ngResource']); 

//now add controllers:

myApp.controller('mainController',['$scope','$timeout', '$filter',function($scope,$timeout,$filter){
    $ = 'Jane Doe';
    $scope.occupation = 'coder';
    $scope.getname = function(){
        return 'John Doe';

    //converting a string to lowercase is REALLY simple:
    $scope.handle = ''; 
    $scope.lowercasehandle = function(){
        return $filter('lowercase')($scope.handle);


In your HTML file in the ‘html’ tag or other container tag add ng-app=’myApp’

<html ng-app='myApp' />

Including the scripts files in the html head section:

 <script src="scripts/Angularjs/angular.js" ></script>
    <script src="scripts/Angularjs/angular-messages.min.js"></script>
    <script src="scripts/Angularjs/angular-resource.min.js"></script>
    <script src="/scripts/Angularjs/_app.js"></script>

Lower in your html, you’ll need to set up your view and tie it back to the controller. Here I’ll setup a div as a view that is tied to ‘mainController’ in the js file above:

 <div ng-controller='mainController'> 
 <h3>Hi {{name}}!</h3>

Interpolation (in the html):

 <div ng-controller='mainController'> 
 <h3>Hello {{ name  + '! How are you?'}}</h3>

Validation messages:

 <div ng-controller='mainController'> 
<form name="myForm">
       Enter text:
       <input type="text" ng-model="field" name="myField" required minlength="5" />
     <div ng-messages="myForm.myField.$error" role="alert">
      <div ng-message="required">You did not enter a field</div>
       <div ng-message="minlength, maxlength">
        Your email must be between 5 and 100 characters long


Calling a function to get a string output to the screen:

 <div ng-controller='mainController'> 
       <label>What is your twitter handle?</label>
        <input type="text" ng-model="handle" />
        <h4>{{ lowercasehandle() }}</h4>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s