Course Progress 65%

AngularJS Application

← AngularJS Routing AngularJS Dependency Injection →

AngularJS Application का मतलब है एक complete client-side web application जो AngularJS framework का उपयोग करके बनाई जाती है। इसमें HTML, CSS और JavaScript के साथ AngularJS के components जैसे modules, controllers, directives, services और routing मिलकर काम करते हैं।

इस chapter में आप समझेंगे कि AngularJS application कैसे structure होती है, इसके main parts क्या होते हैं और एक basic से लेकर scalable AngularJS application कैसे बनाई जाती है।

AngularJS Application क्या होती है

AngularJS application एक Single Page Application (SPA) होती है जिसमें:

  • पूरा app एक ही HTML page पर चलता है
  • Page reload नहीं होता
  • Data और UI dynamically update होते हैं

AngularJS application browser में run होती है और server से data API के जरिए लेती है।

AngularJS Application के Main Parts

एक AngularJS application मुख्य रूप से इन parts से मिलकर बनती है:

  • Module
  • Controller
  • View
  • Model
  • Directive
  • Service

ये सभी parts मिलकर MVC (Model View Controller) pattern follow करते हैं।

AngularJS Application का Basic Structure

<!DOCTYPE html>
<html>
<head>
  <script src="angular.min.js"></script>
</head>
<body ng-app="myApp">

  <div ng-controller="mainCtrl">
    <h2>{{title}}</h2>
  </div>

  <script>
    var app = angular.module("myApp", []);
    app.controller("mainCtrl", function($scope) {
      $scope.title = "My First AngularJS Application";
    });
  </script>

</body>
</html>

Code Explanation

  • ng-app="myApp" AngularJS application को initialize करता है
  • angular.module("myApp", []) application का module बनाता है
  • ng-controller controller attach करता है
  • $scope view और controller के बीच data share करता है

AngularJS Module in Application

Module AngularJS application का root होता है।

var app = angular.module("myApp", []);

Explanation

  • Module application के सभी components को hold करता है
  • Large application में multiple modules हो सकते हैं
  • Module dependency management आसान बनाता है

AngularJS Controller in Application

Controller application का business logic handle करता है।

app.controller("appCtrl", function($scope) {
  $scope.name = "AngularJS App";
});

Explanation

  • Controller data और functions define करता है
  • View में bindings के जरिए data show होता है
  • Controller UI logic manage करता है

View और Model का Role

View

View HTML होती है जिसमें AngularJS expressions और directives use होती हैं।

<p>Hello {{name}}</p>

Model

Model application का data होता है।

$scope.name = "AngularJS App";

Explanation

  • Model data store करता है
  • View data display करती है
  • Data binding automatically sync रखती है

AngularJS Application में Data Binding

AngularJS application का core feature data binding है।

<input type="text" ng-model="username">
<p>{{username}}</p>

Explanation

  • ng-model input को model से bind करता है
  • User input change करते ही view update होती है
  • Two-way data binding enable होती है

AngularJS Application में Directives

Directives AngularJS application को powerful बनाते हैं।

<p ng-show="isVisible">Visible Text</p>

Explanation

  • Directives HTML को extend करते हैं
  • UI behavior control करते हैं
  • Reusable components बनाने में मदद करते हैं

AngularJS Application में Services

Services reusable logic और shared data provide करती हैं।

app.service("dataService", function() {
  this.getMessage = function() {
    return "Service Data";
  };
});

app.controller("ctrl", function($scope, dataService) {
  $scope.msg = dataService.getMessage();
});

Explanation

  • Service एक singleton object होती है
  • Multiple controllers में reuse की जा सकती है
  • Business logic centralize होता है

AngularJS Application में Routing

Routing application को multiple views में divide करती है।

<div ng-view></div>

app.config(function($routeProvider) {
  $routeProvider.when("/home", {
    template: "<h2>Home</h2>"
  });
});

Explanation

  • Routing SPA behavior देता है
  • URL change होने पर view change होता है
  • User experience smooth रहता है

AngularJS Application Folder Structure

Small application:

  • index.html
  • app.js

Large application:

  • controllers/
  • services/
  • views/
  • directives/

Explanation

  • Proper structure maintainability बढ़ाता है
  • Team collaboration आसान होता है
  • Large scale app scalable बनती है

AngularJS Application Lifecycle

AngularJS application इन stages से गुजरती है:

  • Bootstrap
  • Compilation
  • Linking
  • Digest Cycle

Explanation

  • Bootstrap में app start होती है
  • Compilation में directives process होते हैं
  • Digest cycle data changes track करता है

Best Practices for AngularJS Application

  • Application logic controllers में रखें
  • Reusable code services में रखें
  • Small controllers बनाएं
  • Proper folder structure follow करें
  • Direct DOM manipulation avoid करें

Common Mistakes in AngularJS Application

  • Single controller में पूरा logic लिखना
  • Global variables use करना
  • Application structure plan न करना
  • Too many watchers create करना

Summary

इस chapter में आपने सीखा:

  • AngularJS application क्या होती है
  • Application के main components
  • Module, controller, view और model का role
  • Data binding, directives और services
  • Routing और application structure
  • Best practices और common mistakes
← AngularJS Routing AngularJS Dependency Injection →
  • Home