Leveling up with AngularJS
0 likes275 views
The document discusses AngularJS as a framework that enhances HTML for dynamic web applications, promoting a clear separation of concerns through the MV* pattern. It introduces core concepts such as two-way data binding, directives, filters, and dependency injection, which facilitate efficient application development. Additionally, it explains the importance of routing for creating bookmarkable URLs to improve user experience.
![LEVELING UPDIRECTIVES
<slides>
<slide ng-repeat=“slide in slides”
duration=“{{slide.duration}}”
color=“{{slide.color}}”
src=“{{slide.img}}”
link=“{{slide.link}}” />
</slides>
$scope.slides = [
{
img: ‘img/slide01.jpg’,
color: ‘red’,
link: ‘google.com’,
duration: ‘2000’
},
{
img: ‘img/slide02.jpg’,
color: ‘blue’,
link: ‘apple.com’,
duration: ‘3000’
},
{
img: ‘img/slide03.jpg’,
color: ‘purple’,
link: ‘theverge.com’,
duration: ‘2500’
},
{
img: ‘img/slide04.jpg’,
color: ‘green’,
link: ‘techcrunch.com’,
duration: ‘1500’
}
]
<ul class=“slider”>
<li class=“slide” style=“background-
color:red” data-duration=“2000”>
<a href=“google.com”>
<img src=“img/slide01.jpg” />
</a>
</li>
<li class=“slide” style=“background-
color:blue” data-duration=“3000”>
<a href=“apple.com”>
<img src=“img/slide02.jpg” />
</a>
</li>
<li class=“slide” style=“background-
color:purple” data-duration=“2500”>
<a href=“theverge.com”>
<img src=“img/slide03.jpg” />
</a>
</li>
<li class=“slide” style=“background-
color:green” data-duration=“1500”>
<a href=“techcrunch.com”>
<img src=“img/slide04.jpg” />
</a>
</li>
</ul>](https://image.slidesharecdn.com/levelingupwithangularjs-150311163545-conversion-gate01/85/Leveling-up-with-AngularJS-9-320.jpg)
![LEVELING UP
Dependency Injection is a software design pattern that deals with how
components get hold of their dependencies. The Angular injector
subsystem is in charge of creating components, resolving their
dependencies, and providing them to other components as requested.
DEPENDENCY INJECTION
app.controller('DynamicFormCtrl', ['$scope', '$http', '$modal', '$filter',
function($scope, $http, $modal, $filter) { ... }]);](https://image.slidesharecdn.com/levelingupwithangularjs-150311163545-conversion-gate01/85/Leveling-up-with-AngularJS-11-320.jpg)
Leveling up with AngularJS
- 1. LEVELING UP
- 2. LEVELING UP Bring AngularJS beginners up to speed and level up everyone’s skills so we can understand core concepts and develop complex web applications for our clients more effectively. OBJECTIVE
- 3. LEVELING UP HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. WHY USE ANGULAR?
- 4. LEVELING UP WHY USE ANGULAR? MV* Pattern Modular code Future proof your code Develop faster Two-way data binding/Scope Directives Filters Dependency injection Services Routes Simple API Consumption It’s Awesome!
- 5. LEVELING UP ANGULAR IS AN MV* FRAMEWORK Model View Controller Model-View-Controller is an architectural design pattern that encourages improved application organization through a separation of concerns. It enforces the isolation of business data (Models) from user interfaces (Views), with a third component (Controllers) traditionally present to manage logic, user-input and the coordination of models and views.
- 6. LEVELING UP Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. SCOPE
- 7. LEVELING UP Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source- of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. TWO-WAY DATA BINDING
- 8. LEVELING UP At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children. DIRECTIVES <slide duration=“500” color=“blue” src=“img/slide-01.jpg” link=“http://google.com/” />
- 9. LEVELING UPDIRECTIVES <slides> <slide ng-repeat=“slide in slides” duration=“{{slide.duration}}” color=“{{slide.color}}” src=“{{slide.img}}” link=“{{slide.link}}” /> </slides> $scope.slides = [ { img: ‘img/slide01.jpg’, color: ‘red’, link: ‘google.com’, duration: ‘2000’ }, { img: ‘img/slide02.jpg’, color: ‘blue’, link: ‘apple.com’, duration: ‘3000’ }, { img: ‘img/slide03.jpg’, color: ‘purple’, link: ‘theverge.com’, duration: ‘2500’ }, { img: ‘img/slide04.jpg’, color: ‘green’, link: ‘techcrunch.com’, duration: ‘1500’ } ] <ul class=“slider”> <li class=“slide” style=“background- color:red” data-duration=“2000”> <a href=“google.com”> <img src=“img/slide01.jpg” /> </a> </li> <li class=“slide” style=“background- color:blue” data-duration=“3000”> <a href=“apple.com”> <img src=“img/slide02.jpg” /> </a> </li> <li class=“slide” style=“background- color:purple” data-duration=“2500”> <a href=“theverge.com”> <img src=“img/slide03.jpg” /> </a> </li> <li class=“slide” style=“background- color:green” data-duration=“1500”> <a href=“techcrunch.com”> <img src=“img/slide04.jpg” /> </a> </li> </ul>
- 10. LEVELING UP A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter. FILTERS {{ expression | filter }}
- 11. LEVELING UP Dependency Injection is a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested. DEPENDENCY INJECTION app.controller('DynamicFormCtrl', ['$scope', '$http', '$modal', '$filter', function($scope, $http, $modal, $filter) { ... }]);
- 12. LEVELING UP Angular services are substitutable objects that are wired together using dependency injection. You can use services to organize and share code across your app. SERVICES
- 13. LEVELING UP THREE TYPES OF SERVICES Factories Syntax: module.factory('factoryName', function); Result: When declaring factoryName as an injectable argument you will be provided with the value that is returned by invoking the function reference passed to module.factory. Services Syntax: module.service('serviceName', function); Result: When declaring serviceName as an injectable argument you will be provided with an instance of the function. In other words new FunctionYouPassedToService(). Providers Syntax: module.provider('providerName', function); Result: When declaring providerName as an injectable argument you will be provided with ProviderFunction().$get(). The constructor function is instantiated before the $get method is called - ProviderFunction is the function reference passed to module.provider.
- 14. LEVELING UP 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, and send those URLs to friends etc. In AngularJS each such bookmarkable URL is called a route. ROUTES
- 15. LEVELING UP