The Basics Angular JS

Getting Started With

Getting Started With

Ref: OICS/TR/PPT/101

Presentation By,Presentation by,

Mr.Manoj MohanOrisysIndia Consultancy Services,Technopark

Introduction

AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.4 .

Defenition :

"AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology".

Features

● AngularJS is a powerful JavaScript based development framework to create RICH Internet Application(RIA).

● AngulajJS provides developers options to write client side application (using JavaScript) in a clean MVC(Model View Controller) way.

● Application written in AngularJS is cross-browser compliant. AngularJS automatically handles javascript code suitable for each browser.

● AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

● Overall, AngularJS is a framework to build large scale and high performance web appliation while keeping them as easy-to-maintain.

Why angular JS ?● Defines numerous ways to organize web application at client side.

● Enhances HTML by attaching directives, custom tags, attributes, expressions, templates within HTML.

● Encourage TDD

● Encourage MVC/MVVM design pattern

● Code Reuse

● Good for Single Page Apps (SPA)

Core Features

Expression

Angular JS

Modules

Controllers

Directives

Validators

Providers

Data Binding

Factories

Services

Filters

Dependency Injection

Scope

Architecture

Event

Controller

View

Model

Application

Before we start with creating actual HelloWorld application using AngularJS, let us see what are the actual parts of a AngularJS application. An AngularJS application consists of following three important parts

ng-app : This directive defines and links an AngularJS application to HTML.

ng-model : This directive binds the values of AngularJS application data to HTML input controls.

ng-bind : This directive bidns the AngularJS Application data to HTML tags.

Test App<html>

<title>AngularJS First Application</title>

<body>

<h1>Sample Application</h1>

<div ng-app="">

<p>Enter your Name: <input type="text" ng-model="name"></p>

<p>Hello <span ng-bind="name"></span>!</p>

</div>

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

</body>

</html>

AngularJS Directives

AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix. We're going to discuss following directives:

ng-app - This directive starts an AngularJS Application.

ng-init - This directive initializes application data.

ng-model - This directive defines the model that is variable to be used in AngularJS.

ng-repeat - This directive repeats html elements for each item in a collection.

AngularJS Controllers<html>

<head>

<title>Angular JS Controller</title>

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

</head>

<body>

<h2>AngularJS Sample Application</h2>

<div ng-app="mainApp" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>

Enter last name: <input type="text" ng-model="student.lastName"><br>

<br>

You are entering: {{student.fullName()}}

</div>

AngularJS Controllers<script>

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

mainApp.controller('studentController', function($scope) {

$scope.student = {

firstName: "Mahesh",

lastName: "Parashar",

fullName: function() {

var studentObject;

studentObject = $scope.student;

return studentObject.firstName + " " + studentObject.lastName;

}

};

});

</script>

</body>

</html>

Ajax test code<html>

<head>

<title>Angular JS Includes</title>

</head>

<body>

<h2>AngularJS Sample Application</h2>

<div ng-app="" ng-controller="studentController">

<table>

<tr ng-repeat="student in students">

<td>{{ student.Name }}</td>

<td>{{ student.RollNo }}</td>

<td>{{ student.Percentage }}</td>

</tr>

</table>

Hello JQuery<p id="greeting2"></p> <script>$(function(){ $('#greeting2').text('Hello World!');});

</script>

Hello AngularJS

<p ng:init="greeting = 'Hello World!'">{{greeting}}</p>

Html Dom

1 ng-disabled disables a given control.

2 ng-show shows a given control.

3 ng-hide hides a given control.

4 ng-click represents a AngularJS click event.

Advanced AngularJS Concept•Dependency Injection•Modularity•Digesting•Scope•Handling SEO•End to End Testing•Promises•Localization•Filters

ServicesThis service is used to display toast message for every action.

Sample Code:-mainApp.service('getToast', ['$mdToast', '$animate', function($mdToast, $animate) { this.messageBox = function(msg, type) { var box = $mdToast.show( $mdToast.simple() .textContent(msg) .position('top right') .theme(type) .hideDelay(2000) ); return box; }}]);

FactoryThis factory is used to list users which is saved as json file.

Sample CodemainApp.factory('myAppFactory', function($http) { return { getData: function() { return $http({ method: 'GET', url: 'json/userlist.json' }); } } })

Dis-advantageAngular is not the silver bullet. Some of its disadvantages are backsides of its strong points, some are inherent to the JavaScript ineffectiveness that could not be overcome even with the best derivatives.

The weaknesses are:

● Angular is big and complicated. With multiple ways to do the same thing it is hard to tell which way is better for particular task. Mastering Angular over the “Hello world” level requires considerable efforts. Different developers’ coding styles and habits might complicate integration of different components into a whole solution.

● The lifecycle of Angular application is complex, and to master it you really need to read the code. Compile and link are not intuitive, and specific cases can be confusing (recursion in compile, collisions between directives etc.).

● As the project grows with time, you most likely will need to throw away existing implementations and create new versions using different approaches. Angular implementations scale poorly.

● More than 2000 watchers can severely lag the UI. That limits the complexity of your Angular forms, especially big data grids and lists.

jQuery & AngularJS

Basement (-2), Thejaswini BuildingTechnopark, Kerala 695 581, Indiawww.orisys.in

Email: [email protected] , Office (Technopark) :+91-9946 014 345Office (Sasthamangalam) :+91-8086 800 203

mailto:[email protected]

The Basics Angular JS

Technology

Transcript of The Basics Angular JS