Course Progress 5%

AngularJS Get Started

← AngularJS Intro AngularJS Expressions →

AngularJS के साथ काम शुरू करने के लिए आपको किसी heavy setup या complex installation की जरूरत नहीं होती। आप AngularJS को सीधे browser में run कर सकते हैं। इस chapter में आप सीखेंगे कि AngularJS को project में कैसे include करें और अपना पहला AngularJS application कैसे बनाएं।

AngularJS Include कैसे करें

AngularJS को use करने के दो common तरीके हैं।

CDN के जरिए AngularJS जोड़ना

सबसे आसान तरीका है Google CDN का उपयोग करना।

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

इस script को HTML file के <head> या <body> के end में add किया जा सकता है।

Local File के जरिए AngularJS जोड़ना

आप AngularJS की file download करके भी use कर सकते हैं।

  • angularjs.org से AngularJS library download करें
  • angular.min.js file को अपने project folder में रखें
  • HTML file में script include करें
<script src="js/angular.min.js"></script>

पहला AngularJS Application

AngularJS application बनाने के लिए सबसे पहले ng-app directive का उपयोग किया जाता है।

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-app="">
  <p>Enter your age:</p>
  <input type="number" ng-model="age">
  <h2>Your age is: {{age}}</h2>
</div>

</body>
</html>

इस example में:

  • ng-app AngularJS application को define करता है
  • ng-model input field को data से bind करता है
  • {{age}} expression data को display करता है

ng-app Directive क्या करता है

ng-app directive AngularJS को बताता है कि application कहाँ से start होगा। AngularJS इसी element के अंदर अपना control रखता है।

एक page पर सिर्फ एक ng-app होना चाहिए।

AngularJS Expressions

AngularJS expressions double curly braces {{ }} में लिखे जाते हैं।

<p>Total: {{10 + 20}}</p>
<p>Name in uppercase: {{ name | uppercase }}</p>

Expressions HTML के अंदर JavaScript की तरह काम करते हैं लेकिन limited और safe होते हैं।

ng-model Directive

ng-model directive का उपयोग HTML form controls को application data से bind करने के लिए किया जाता है।

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

यह two-way data binding provide करता है।

AngularJS Automatically Updates View

AngularJS की सबसे बड़ी खासियत यह है कि:

  • User input change करता है
  • Model update होता है
  • View अपने आप update हो जाता है

इसके लिए आपको extra JavaScript code लिखने की जरूरत नहीं होती।

AngularJS Without Controller

शुरुआत में AngularJS बिना controller के भी काम कर सकता है। यह छोटे examples और demos के लिए useful है।

लेकिन real applications में controllers का use जरूरी होता है।

AngularJS Application Structure

Basic AngularJS application में ये parts होते हैं:

  • HTML View
  • AngularJS Library
  • Directives
  • Expressions
  • Controllers (advanced usage में)

इस chapter का उद्देश्य आपको AngularJS के basic working से familiar कराना था।

← AngularJS Intro AngularJS Expressions →
  • Home