Angular JS Introduction
0 likes•346 views
This document provides an introduction and overview of AngularJS, including its key concepts like data binding, dependency injection, and directives. It discusses how to get started with AngularJS, recommends best practices like following style guides and writing tests, and provides additional resources for learning AngularJS like documentation, tutorials, blogs, books, and tools.
![module application
dependency
injection
...service
3rd's module
service
angular.module('app', ['alerter'])
.controller('GreetingController', function($scope, Alerter) {
$scope.name = 'John Doe';
$scope.greet = function() {
Alerter.show('Hello ' + $scope.name);
};
});
angular.module('alerter', [])
.factory('Alerter', function($window) {
return {
show: function(string) {
$window.alert(string);
}
};
});](https://image.slidesharecdn.com/angularjsintroduction-150509174045-lva1-app6892/85/Angular-JS-Introduction-21-320.jpg)
![install the component
bower install --save angular-material
load the component scripts
<link rel="stylesheet" href="angular-material.min.css"
rel="stylesheet">
<script src="angular-material.min.js"></script>
load the component module
angular.module('app', ['ngMaterial']);](https://image.slidesharecdn.com/angularjsintroduction-150509174045-lva1-app6892/85/Angular-JS-Introduction-37-320.jpg)
Angular JS Introduction
- 10. “AngularJS: a kind of HTML extension.”
- 11. D D D
- 13. Data-binding
- 17. model module bootstrap template expression <div ng-app> <div> <label>Name:</label> <input type="text" ng-model="yourName"> <hr> <h1>Hello {{yourName}}!</h1> </div> </div>
- 20. controller bootstrap <div ng-app="app" ng-controller="GreetingController"> <form ng-submit="greet()"> <input type="text" ng-model="name"> <button type="submit">Greet</button> </form> </div>
- 21. module application dependency injection ...service 3rd's module service angular.module('app', ['alerter']) .controller('GreetingController', function($scope, Alerter) { $scope.name = 'John Doe'; $scope.greet = function() { Alerter.show('Hello ' + $scope.name); }; }); angular.module('alerter', []) .factory('Alerter', function($window) { return { show: function(string) { $window.alert(string); } }; });
- 22. Directives
- 23. Tab Component
- 24. Non-semantic way bootstrap plugin element<div id="tab"> <ul class="tab-head"> <li><a href="#content-1">Title 1</a></li> <li><a href="#content-2">Title 2</a></li> <li><a href="#content-3">Title 3</a></li> </ul> <div id="content-1" class="tab-content"> <p>Content 1 goes here</p> </div> <div id="content-2" class="tab-content"> <p>Content 2 goes here</p> </div> <div id="content-3" class="tab-content"> <p>Content 3 goes here</p> </div> </div> $('#tab').tab();
- 26. Semantic way directives bootstrap ... tab components <tabset> <tab heading="Title 1"> <p>Content 1 goes here</p> </tab> <tab heading="Title 2"> <p>Content 2 goes here</p> </tab> <tab heading="Title 3"> <p>Content 3 goes here</p> </tab> </tabset> angular.module('tab') .directive('tabset', function() { // ... }) .directive('tab', function() { // ... });
- 28. Hello {{ world }}
- 29. load angular script bootstrap application set model template <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <input type="text" ng-model="name"> <h1>Hello {{ name }}</h1> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/ angular.min.js"></script> </body> </html>
- 30. Some golden tips
- 31. Don't reinvent the wheel
- 32. ...use 3rd's components ✓ nice documentation ✓ great tests suit ✓ maintained ✓ best practices
- 37. install the component bower install --save angular-material load the component scripts <link rel="stylesheet" href="angular-material.min.css" rel="stylesheet"> <script src="angular-material.min.js"></script> load the component module angular.module('app', ['ngMaterial']);
- 38. follow the style guide
- 40. write tests
- 43. use generators
- 46. putting it all together
- 48. keep learning
- 50. with videos
- 53. with blogs
- 57. with books
- 58. AngularJS - Up & Running
- 60. with tools
- 63. and more...
- 64. Angular 2
- 67. Questions?
- 68. Now it's up to you