Today we are going to see how to create a basic angular app
from scratch.For creating an angular js app we can use any of the code editors
there are lots of code editors available online which are available for free or
you can call it open source I’m using Visual Studio Code that’s one of my Favourite do tell me in the comments below
which is yours favourite.
First add the Angular Js library from any of the CDN or
angularjs.org site.
Links are below
Or
<html data-ng-app="">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4"crossorigin="anonymous">
</head>
<body>
<h1 class="page-header" style="text-align:center">Basic Angular App</h1>
<div class="container">
<div class="row">
<div class="col-sm-2">
<span>Enter Message</span>
</div>
<div class="col-sm-2">
<input type="text" data-ng-model="message">
</div>
</div>
<h1>{{message}}</h1>
</div>
</body>
</html>
In the above example we have created a basic angular app
which takes the input from the user and displays. Here the data-ng-app= ” ” is
to indicate the browser that this is a angular js application in many other
cases you might have already seen the code without the prefix data- added the
reason is that some browser did not recognize the angular application so to
indicate we need to specify that but now a days most of the latest browsers
identifies that it is an angular js application then next the part data-ng-model
is like the id which we give for the input field and {{message}} the
curly braces {{}} are called expressions which we have used to display
the data we inserted. I have also given the link below for the angular js Angular Docs please go through
the documentation for more clear picture.
No comments:
Post a Comment