Downloaded 13 times
![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://cdn.statically.io/img/image.slidesharecdn.com/angularjsintroduction-150509174045-lva1-app6892/75/Angular-JS-Introduction-21-2048.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://cdn.statically.io/img/image.slidesharecdn.com/angularjsintroduction-150509174045-lva1-app6892/75/Angular-JS-Introduction-37-2048.jpg)
Uploaded byDhyego Fernando
Angular JS Introduction
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.
Angular JS Introduction
- 1.
- 2.
- 5.
- 6.
- 8.
- 10. “AngularJS: a kindof HTML extension.”
- 11.
- 12.
- 13.
- 14.
- 17. model module bootstrap template expression <divng-app> <div> <label>Name:</label> <input type="text" ng-model="yourName"> <hr> <h1>Hello {{yourName}}!</h1> </div> </div>
- 19.
- 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.
- 23.
- 24. Non-semantic way bootstrap plugin element<divid="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 ... tabcomponents <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.
- 29. load angular script bootstrapapplication 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.
- 31. Don't reinvent thewheel
- 32. ...use 3rd's components ✓nice documentation ✓ great tests suit ✓ maintained ✓ best practices
- 33.
- 34.
- 35.
- 36.
- 37. install the component bowerinstall --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 styleguide
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. putting it alltogether
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. AngularJS - Up& Running
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. Now it's upto you
- 69.