Www.luxoft.com AngularJS Forms & validation. AngularJS form example First.
What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS...
Transcript of What is AngularJS€¦ · Angular Directives ng-app: directive initializes an AngularJS...
![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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/1.jpg)
![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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/2.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/3.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/4.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/5.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/6.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/8.jpg)
![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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/9.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/10.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/11.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/12.jpg)
![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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/13.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/14.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/15.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/16.jpg)
![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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/17.jpg)
![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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/18.jpg)
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](https://reader033.fdocuments.us/reader033/viewer/2022043017/5f39ade73c4513021d47c61e/html5/thumbnails/19.jpg)