AngularJs Development

1
Miracle Studios Web Design Development
Company

• Manmohan Singh
• Internet Marketing Engg.
• Miracle Studios

2
AngularJs JavaScript MVW Framework

• AngularJS is a superheroic JavaScript MVW
  framework. It can be added to an HTML page with a
  ltscriptgt tag. It extends HTML attributes with
  Directives, and binds data to HTML with
  Expressions.
• ltscript src"http//ajax.googleapis.com/ajax/li
  bs/angularjs/1.2.15/angular.min.js"gtlt/scriptgt

3
AngularJs Example

• lt!DOCTYPE htmlgt
• lthtmlgt
• ltbodygt
• ltdiv ng-app""gt
• ltpgtName ltinput type"text" ng-model"name"gtlt/pgt
  
• ltp ng-bind"name"gtlt/pgt
• lt/divgt
• ltscript src"http//ajax.googleapis.com/ajax/lib
  s/angularjs/1.2.15/angular.min.js"gtlt/scriptgt
• lt/bodygt
• lt/htmlgt

4
The MVC of AngularJS

5
Key Features of AngularJs

• Extends HTML with directives
• Model View Controller architecture
• Dependency injections
• Declarative two way data binding
• Build with testing in mind
• Dynamic templates

6
Directives of AngularJS

• At a high level, directives are markers on a DOM
  element such as
• Attribute
• Element name
• Comment
• CSS Class
• That tell AngularJS's HTML compiler to attach a
  specified behavior to that DOM element or even
  transform the DOM element and its sub elements.

7
Example of Directives AngularJS

• myapp angular.module("myapp", )
• myapp.directive('div', function()
• var directive
• directive.restrict 'E' / restrict this
  directive to elements /
• directive.template "My first directive
  textToInsert"
• return directive
• )

8
AngularJS Controllers

• AngularJS applications are controlled by
  controllers. The ng-controller directive defines
  the application controller. A controller is a
  JavaScript Object, created by a standard
  JavaScript object.
• ltdiv ng-app"" ng-controller"personControlle
  r"gtFirst Name ltinput type"text" ng-model"pers
  on.firstName"gtltbrgtLast Name ltinput type"text" n
  g-model"person.lastName"gtltbrgtltbrgtFull
  Name person.firstName " "
  person.lastNamelt/divgtltscriptgtfunction
  personController(scope)     scope.person
          firstName "John",        lastName
  "Doe"    lt/scriptgt ct constructor.

9
Standard Services

• Many general purpose services provided by
  AngularJS
• http
• Used for XMLHttpRequest handling
• location
• Provide information about the current URL
• q
• A promise/deferred module for asynchronous
  requests
• routeProvider
• Configure routes in an SPA
• log
• Logging service
• Many more

10
AngularJS Modularization Dependency Injection

• AngularJS is built-in dependency injection
  mechanism. You can divide your application into
  multiple different types of components which
  AngularJS can inject into each other.
• Modularizing your application makes it easier to
  reuse, configure and test the components in your
  application.

11
Core types of AngularJs objects and components

• Below are the core objects and component of
  AngularJS
• 1. Value
• A value in AngularJS is a simple object. It
  can be a number, string or JavaScript object. 
• Example
• var myModule angular.module("myModule", )
• myModule.value("numberValue", 999)
• myModule.value("stringValue", "abc")
• myModule.value("objectValue", val1 123, val2
  "abc" )

12
Core types of AngularJs objects and components

• 2. Factory
• Factory is a function that creates values. When
  a service,
• controller etc. needs a value injected from a
  factory, the factory
• creates the value on demand. Once created, the
  value is reused
• for all services, controllers etc. which need it
  injected. 
• Example
• var myModule angular.module("myModule", )
• myModule.factory("myFactory", function()
• return "a value" )
• myModule.controller("MyController",
  function(scope, myFactory) console.log(myFactor
  y) )

13
Core types of AngularJs objects and components

• 3. Service
• A service in AngularJS is a singleton JavaScript
  object which contains a set of functions. The
  functions contain whatever logic is necessary for
  the service to carry out its work.
• Example
• function MyService()
• this.doIt function() console.log("done")
  
• var myModule angular.module("myModule",
  ) myModule.service("myService", MyService)

14
Core types of AngularJs objects and components

• 4. Providers
• Providers in AngularJS is the most flexible
  form of factory you can create. You register a
  provider with a module just like you do with a
  service or factory, except you use
  the provider() function instead.
• Example
• var myModule angular.module("myModule", )
  myModule.provider("mySecondService", function()
  var provider provider.get function()
  var service service.doService function()
  console.log("mySecondService Service Done!")
  
• return service
• return provider )

15
Configuring a Provider

• var myModule angular.module("myModule", )
• myModule.provider("mySecondService", function()
• var provider var config configParam
  "default"
• provider.doConfig function(configParam)
  config.configParam configParam
• provider.get function() var service
  service.doService function()
  console.log("mySecondService "
  config.configParam)
• return service
• return provider
• )
• myModule.config( function( mySecondServiceProvider
  ) mySecondServiceProvider.doConfig("new config
  param")
• ) myModule.controller("MyController",
  function(scope, mySecondService)
  scope.whenButtonClicked function()
  mySecondService.doIt()
• )

16
AngularJS Routes

• AngularJS routes enable you to create different
  URLs for different content in your application.
• Having different sets of URLs for different
  content enables the user to bookmark URLs to
  specific content, and send those URLs to friends
  etc. So such bookmarkable URL in AngularJS is
  called a route.

17
AngularJS Routes Example

• lt!DOCTYPE htmlgt lthtml lang"en"gt
• ltheadgt lttitlegtAngularJS Routes examplelt/titlegt
• ltscript src"https//ajax.googleapis.com/ajax/libs
  /angularjs/1.2.5/angular.min.js"gtlt/scriptgt
• ltscript src"https//ajax.googleapis.com/ajax/libs
  /angularjs/1.2.5/angular-route.min.js"gt
• lt/scriptgt
• lt/headgt
• ltbody ng-app"sampleApp"gt lta href"/route1"gtRoute
  1lt/agtltbr/gt
• lta href"/route2"gtRoute 2lt/agtltbr/gt
• ltdiv ng-viewgtlt/divgt ltscriptgt var module
  angular.module("sampleApp", 'ngRoute')
• module.config('routeProvider',
  function(routeProvider)
• routeProvider. when('/route1',
• templateUrl 'angular-route-template-1.jsp',
  controller 'RouteController' ).
• when('/route2',
• templateUrl 'angular-route-template-2.jsp',
  controller 'RouteController' ). otherwise(
  redirectTo '/' )
• )
• module.controller("RouteController",
  function(scope) )
• lt/scriptgt

18
AngularJS Internationalization

• AngularJS has built-in support for
  internationalization of numbers and dates. In
  this text I will take a look at how they work.
• Internationalization in Filters
• theDate date 'fullDate'
• theValue currency
• theValue number

19
AngularJS Internationalization Example

• lt!DOCTYPE htmlgt
• lthtml lang"en"gt
• ltheadgt
• lttitlegtAngularJS Routes examplelt/titlegt
• ltscript src"https//ajax.googleapis.com/ajax/libs
  /angularjs/1.2.5/angular.min.js"gtlt/scriptgt
• ltscript src"https//code.angularjs.org/1.2.5/i18n
  /angular-locale_da-dk.js"gt
• lt/scriptgt
• lt/headgt
• ltbody ng-app"myapp"gt
• AngularJS I18n
• ltdiv ng-controller"mycontroller"gt
• theDate date "fullDate" ltbr/gt
• theValue currency
• lt/divgt
• ltscriptgt var module angular.module("myapp",
  )
• module.controller("mycontroller",
  function(scope)
• scope.theDate new Date()
• scope.theValue 123.45 )
• lt/scriptgt

20
Hire AngularJs Developers

• Miracle Studios Pvt. Ltd.Tower D, Third
  Floor,DLF Building, IT Park,Chandigarh, India,
  160101.
• Toll Free 91-172-5022070-99
• Fax [phone]
• Website www.miraclestudios.in/angular-js-de
  velopment-india.htm

21

• Thank you For Visiting Us