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){
    
    $scope.name = 'Jane Doe';
    $scope.occupation = 'coder';
    
    $scope.getname = function(){
        return 'John Doe';
    };
    
    $scope.getname();
    console.log($scope);
    console.log($scope.getname());

    //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>
 </div>

Interpolation (in the html):

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

Validation messages:

 <div ng-controller='mainController'> 
 
<form name="myForm">
     <label>
       Enter text:
       <input type="text" ng-model="field" name="myField" required minlength="5" />
     </label>
     <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
       </div>
     </div>
   </form>

 </div>

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" />
        <hr>
        <h4>twitter.com/{{ lowercasehandle() }}</h4>

 </div>

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s