Angular JS

Getting Started

Transcript

2. What is angular js ? • AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, and maintainable front- end applications. • AngularJS is open source, completely free, and used by thousands of developers around the world • AngularJS is a very powerful JavaScript library • It is used in Single Page Application (SPA) projects
3. Why use angular js ? • The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility. • AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates • Open source and completely free • Reusable • Based on MVC architecture and can be integrated into your existing application.
4. • It also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. • Data is stored as javascript objects • Based on two Principles – Declarative Programming – Designing of user interface – Imperative Programming – Establishing domain logic
5. AngularJS application execution • Html document is loaded into the browser and evaluated by the browser. • Angular scans for the apps and views in html. • Executes the controller functions and updates the views with data from the model. • Listens to the browser events • If any of the events requires a view to change angular will update the views correspondingly.
6. Expressions • Angular js expressions are written inside double braces. • Binds data to the html. • Will output the data exactly where the expression is written. • Eg: {{5*5}}
7. Creating hello world application • Steps to create an angular application – Load framework – Define angular js application using ng-app – Define a model 'name' using ng-model – Bind the value using {{name}}
8. Directives • Attributes used to extend html. • Starts with a prefix 'ng-' • Numerous built-in directives like – ng-app -initialize angular application. – ng-init – initialize application data. – ng-bind – binds the value of html controls. – ng-repeat – repeats an html element • We can define custom directives using directive function.
9. Views • AngularJS supports Single Page Application via multiple views on a single page. • Angular js views are designed in a way that supports the single page application development • ng-view directive is used to render the views to the respective place. • The views rendered inside the ng-view directive will be partial views.
10. Controllers • Regular java script objects • Controllers are the behavior behind the DOM elements. • Controls the data of the AngularJS application. • ng-controller directive defines the application controller. • A controller can also have methods.
11. Filters • Filters are used to change or modify the data. • Can be clubbed in an expression or directives using a pipe character. • Commonly used filters are : – Uppercase - converts text to uppercase – Lowercase - converts text to lowercase – Currency - formats text in a currency format – Orderby - orders the array based on provided criteria
12. AngularJS HTML DOM • Can perform events with html event directives. • ng-disabled- disables a given control • ng-show- shows a given control • ng-hide- hides a given control • ng-click- represents a click event
13. Services • Javascript functions responsible to do a specific task. • This makes them individual entities which is maintainable and testable. • Services can be called by controllers on the basis of requirement.
14. • Angular provides many inbuilt services like: – $http- used to make ajax calls to get the server data – $route- used to define the routing information to the application. – And there is $location, $window...etc • There are two methods to create a service : – Using factory method- here we first define a factory and then assign a method to it. – Using service method-here first we define a service and then assign a method to it.
16. Modules • Used to separate logic • Keeps the code clean. • Modules are defined in separate js files
17. Folder Structure
18. Scope • Javascript object. • Plays the role of connecting the controller and view. • Contains the model data. • Controller specific-model data is accessed in controller via $scope object. • If we define nested controllers, the child controller will inherit the scope of its parent controller.
20. Routing • AngularJS routes enable you to create different URLs for different content in your application • Having different URLs for different content enables the user to bookmark URLs to specific content. • Each such bookmarked URL is called a route.
22. Thank You!