August 25, 2014

Getting Started With AngularJS

AngularJS is a framework. A framework implies that instead of writing code however you want, you change the way you write your applications and follow the standards set by framework.

By doing this, you can take advantage of some of the built-in features and with AngularJS that means templating, filters, two-way data-binding and more.

Today, I'd like to share with you the basic key points to start the AngularJS development phase. This is the AGENDA of this post:

1. What is AngularJS? Which architecture it follows
2. MVC Architecture Overview in AngularJS
3. Basic Building Blocks
4. Divide project into modules
5. Examples: Source Code
6. Pros and Cons of AngularJS
7. Download the PPT and Source Code

1. What is AngularJS? Which architecture it follows
  • A JavaScript framework for building the single page application.
  • Based on MVC architecture and can be integrate into your existing application.
  • Based on two principles
    • Declarative Programming = Designing of user interface
    • Imperative Programming = Establishing domain logic

2. MVC Architecture Overview in AngularJS
  • Model
    • The data
  • Controller
    • The behavior
    • Modifying / updating the models
  • View
    • The interface
    • How the data is presented to the user
3. Basic Building Blocks
  • Installing AngularJS is pretty simple. It is just like adding the any other library. 
  • Go to the AngularJS.org website and download the stable version from there.
  • You can manage the file directory as:


Directives: ng-
A command that is given to library. Few of them are: 
  • ng-app
    • Determines which part of the page will use AngularJS.
    • If given a value it will load that application module
  • ng-controller
    • Determines which JavaScript Controller should be used for that part of the page 
  • ng-model
    • Determines what model the value of an input field will be bound to
    • Used for two-way binding
  • ng-if=“<model expression>”
    • Inserts HTML element if expression is true
    • Does not insert element in the DOM if it is false
  • ng-repeat=“<variable> in <array>”
    • Repeats the HTML element for each value in the array
    • Also a key-value pair version for JSON objects
  • ng-view
    • Determine where the partial will be placed
    • Can only have one ng-view per page
Angular Expression: {{ }}
It is use to insert model values directly into view

Controllers:
  • $scope
    • JavaScript object
    • Contains data (i.e. models) and methods (i.e. functions)
    • Can add own properties
    • $scope.<my new property> = <value>;
  • Controller function takes at least one parameter: $scope
    • Function is a constructor
    • Ex:
    • function SimpleController($scope) { … }
  • We will see a different way of creating a controller constructor later
Rounting:

  • Use different views for different URL fragments
  • Makes use of template partials
  • Templates that are not a whole web page (i.e. part of a page)
  • Used in conjunction with the ng-view directive
  • ng-view determines where the partial will be placed
  • Can only have one ng-view per page
  • URL parameters
    • To access the parameters in the URL, use the $routeParams service
  • The $routeParams object will have a field with the same name as the parameter
    • Ex.
    • $routeParams.userId
  • Paths default to Hashbang mode
    • http://www.mysite.com/#/users
  • Can use HTML 5 mode by configuring the $locationProvider
    • Ex.
    • // Inject $locationProvider into the module using config $locationProvider.html5Mode(true);
    • Example URL:
    • http://www.mysite.com/users

How to enable the Rounting:

  • Enable by injecting the $routeProvider
    • myApp = angular.module(‘myApp’, [‘ngRoute’]); myApp.config([‘$routeProvider’, function($routeProvider) { … }]);
    • $routeProvider.when(<path>, {<route>});
  • Defines a new route that uses the given path
  • The path may have parameters
    • Parameters start with a colon (‘:’)
    • Ex
    • ‘/user/:userId’
  • Typical route fields:
    • controller = The name of the controller that should be used
    • templateUrl = A path to the template partial that should be used
  • $routeProvider.otherwise({<route>});
    • Typical route fields:
  • redirectTo: ‘<path>’
4. Divide project into modules:
  • Modules are a way of organizing your code in which you split up the work between different sections of your code rather than writing single huge application.
  • Application module can include the other modules by listing them as dependencies
  • angular.module(<name>, [<dependencies>]);
    • Creates a module with the given name
    • We use module if we want to attach the controller with specific page only
    • This module can then be configured
    • Ex.
      • var employee = angular.module(‘employee’, []); employee.controller(‘EmployeeController’, function($scope) { … });
    • Then assign “employee” to view as ng-app=“employee”
5. Examples: Source Code

















6. Pros and Cons of AngularJS
  • Pros
    • MVC Capability
    • Two-way data binding
    • Directives
  • Cons
    • Too heavy
7. Download the PPT and Source Code:

1 comment:

  1. Precise, brief and good start for a beginner. Keep it up Atif, Its really helpful for me to start AngularJs.
    Stay blessed.

    ReplyDelete