what is angularjs€¦ · angular directives ng-app: directive initializes an angularjs...

19

Upload: others

Post on 11-Jul-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application
Page 2: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

What is AngularJS

• MV* Javascript Framework maintained by

Google for Rich Web Application

Development.

• AngularJS extends HTML attributes

with Directives.

Page 3: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

MVC

Model (Data)

Controller

(Logic)

View (UI) Notifies

Notifies Changes

Page 4: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Today’s Topics

Why use Angular?

Directives

Expressions

Module

Controller

$scope

Filters

Services

Page 5: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Why Angular ?

• Maintained by Google

• Free, no license

• Structured code

• Write less code

• Help available

• Unit Testing is easy

Page 6: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Other Javascript Frameworks

• BackboneJS

• EmberJS

Page 7: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Angular Directives

• ng-app: directive initializes an AngularJS

application.

• The ng-model directive binds the value of the

input field to the application variable name.

• ng-bind: This directive binds the AngularJS

Application data to HTML tags.

Page 8: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application
Page 9: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Expressions

Expressions allow you to execute some

computation in order to return a desired

value.

• {{ 1 + 1 }}

• {{ 946757880 | date }}

• {{ user.name }}

Page 10: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Angular module

AngularJS module defines AngularJS applications.

Initializes our app and register the modules on

which it depends

Page 11: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Angular Controller

Controls AngularJS applications.

JavaScript constructor function

Page 12: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application
Page 13: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

currency filter lowercase uppercase orderBy

Page 14: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Services

• Services are javascript functions and are

responsible to do a specific tasks only.

• Singleton objects

• Inbuilt services: $http, $route, $window

Page 15: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Useful Links

• https://angularjs.org/

• http://campus.codeschool.com/courses/shapi

ng-up-with-angular-js/contents

• http://www.toptal.com/angular-js/a-step-by-

step-guide-to-your-first-angularjs-app

• https://github.com/raonibr/f1feeder-part1

Page 16: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application
Page 17: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application
Page 18: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application

Questions ?

Page 19: What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS application. The ng -model directive binds the value of the input field to the application