2. What is AngularJS?
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.
3. Agenda
● AngularJS features
● Directives , Filters and Data Bindings
● Views,Controllers and Scope
● Modules,Routes,Factories
18. Summary
● AngularJS provides a robust “SPA”
framework for building robust client centric
applications.
● Directives , Filters and Data Bindings
● Views,Controllers and Scope
● Modules,Routes,Factories
Data Binding : It provide two ways data bandings.
Routing: Provide routing for Different views.
Testing: Testing is design from beginning. So we can very robust testing.
JqLite: For DOM manipulations, JQLite is built in. Minimum Version of Jquery. AngularJS has been built on top up it. It works pretty well with JQuery also.
Templates: templates are written with HTML that contains Angular-specific elements and attributes. Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.
Factories:Share code thru factories.
1: Show where to download AngularJS: http://angularjs.org/
On click on slide to come up tool tips
Any time you see “ng-” that is Angular Directives.
ng-app: help to load scripts and also a module use to get associate to it.
ng-model: its gonna add a property up in the memory called “name” into a $scope(View model).
code demonstration(data binding, repeat, and filter)
Apply intellisense in Visual studio12: C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\Packages\schemas\html
show where to find directives informations in website.
https://docs.angularjs.org/api
which means controller does not know about the views and viceversa. Scope provides loosely coupled relation between view and controller.
code demonstrations.
function parameter as $scope: This is the dependency injection provided by angularJS. When this controller get used angular automatically injects scope object.
Here , i will be showing about Modules and Routes(For SPA Orient applications) and factories
Module have config function . Config function is used to define differents routes.
Routes very important for SPA world. if we different views and those views need to load in a single page(called it Shell page).then we will able to track what route are on and what views are associate with and what controller goes with that view.
Routes have two importants concept. 1 view 2 Controller.
Controller call Factory to do CRUD operations. * say we might have different options like services,Values,Providers.
To make modular application , we need to use Modules.
If we use Module , we can create custom routes, custom filters, custom Directives, create controller, factory etc.
Using “Angular” object we can create module. We can use it to call JQLite which will help do DOM manipulation.
What is benefit here.
It provide reusable.
We can create very useful custom directives and can be used in all modules .
Code Demonstrations..
