AngularJs setup and
Installation
1. View on GitHub.
2. Downloading and hosting files locally.
Moving forward to the AngularJs development we need to setup the environment for AngularJs.
1. View on GitHub.
2. Downloading and hosting files locally.
Moving forward to the AngularJs development we need to setup the environment for AngularJs.
To
start with AngularJs lets open https://angularjs.org/ and there we can
see something like below –
This
contains three options –
1. View on GitHub – these options will take us to GitHub, where we can see clear instruction on how to take checkout from there and setup the same at our end.
2. Download –clicking on the download button will open the below dialog box –
1. View on GitHub – these options will take us to GitHub, where we can see clear instruction on how to take checkout from there and setup the same at our end.
2. Download –clicking on the download button will open the below dialog box –
Now let us understand what it contains and what they stand for actually –
Branch – this tells
about the version as this is easy to understand from what is written there. 1.3. X is the stable version of AngularJs
framework and 1.4.X is the latest
one.
Build – this tells
about in which format we can download the AngularJs library i.e. Minified, Uncompressed or Zip.
CDN – CDN basically
stands for Content Delivery Network which provides the facility to host your
files (static files) on distributed servers rather thanhosting them on a single
server. There are number of free CND are provided by different providers like
Microsoft, Google etc. One benefit of using CDN here is, there will be no need
to make extra call to server if you have already loaded AngularJs in your
browser earlier. It will use the cached one. You can get more information on
web about what is CDN and benefits of using CDN.
Bower – This command
based method to add AngularJs, first install bower to your system using “$ npm install -g bower” (supposing you
already have installed npm). And then get AngularJs by the given command “bower install angular#1.3.14”.Npm- or
you can easily use the npm command to add AngularJs
AngularJs Syntax (First Sample
Application)
1. Important parts of AngularJs
i) ng-app
ii) ng-model
iii) ng-controller
ng-app : - The ngApp directive
are used to define the root element and the auto-bootstrapping to an
application. It's called auto initialization process. If you have multiple
angular apps (more than one ng-app) that time you set manually bootstrap.
ng-model :- The ngModel directive are used to bind
the custom form control(input, select, textarea) to a property.
The ngModel
is responsible for:-
i.
Bind the
views to the model.
ii.
Validate the
form control (just like required, number, email and URL validation etc.)
iii.
Keep the
state of valid controls
iv.
Setting of CSS
classes (just like ng-valid, ng-invalid etc.)
ng- controller :- The ngController directive are used to link
the angular controller to the HTML Views.
Creating & Executing
AngularJs Apps
First Sample Application:-
Let
us go ahead with developing our fist app after setting up the AngularJs
Environment.
Step 1: -
Create
an Empty Web Application in your JavaScript IDE (there are many IDEs available
like AptanaStudio, WebStorm etc.) and add a HTML page (say index.html). After
adding the index.html page add below line in the head tag –
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
type="text/javascript" charset="utf-8"></script>
Step 2:-
Add
a JavaScript file named “app.js” and
include the reference of this file into your index.html <head> tag.
<head>
<script src="app.js"></script>
</head>
Step 3:-
In
the body tag of your index.html add ng-app attribute, this will tells angular
that what part of HTML contains the angular App. We are free to add this to
HTML element or body tag or event to DIVs as well. Like below –
<body ng-app="AngularApp"></body>
Step 4:-
Now
we have to attach controller to the view so that the data-binding can be
controlled. We can do this by adding ng-controller attribute to the div where
we want to add.
Like
below –
<div ng-controller="HelloController"></div>
Step 5:-
Creating
controller - We can create controller in our app.js as below –
Var myApp= angular.module("AngularApp",[]);
myApp.controller("HelloController", function($scope){
$scope.text=
"";
});
Step
6:-
Add the model and data to
the view like below –
<input
type="text" ng-model
= "text">
<p>Hello
: {{text}}</p>
Run the application in the
browser and you will see the magic of AngularJs
Below is the complete code
of index.html and app.js –
Index.html
–
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="utf-8" />
<title>Angular
Demo</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
type="text/javascript" charset="utf-8"></script>
<script
src="app.js"></script>
</head>
<body
ng-app="AngularApp">
<div
ng-controller="HelloController">
<input
type="text" ng-model
= "text">
<p>Hello
: {{text}}</p>
</div>
</body>
</html>
App.js
–
Var myApp= angular.module("AngularApp",[]);
myApp.controller("HelloController", function($scope){
$scope.text=
"";
About Blogger
|
Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
|
0 comments:
Post a Comment