AngularJS
1 minute for digging
Fun facts about AngularJS
- Founded in 2009
- Maintained by Google
- Weight only 104 KiB in production
- Has more than 52,000 tickets in Stack Overflow
- Has 13,829 related projects in Github
- Using Angular: NewRelic, YouTube, Lynda, Sphere :)
What's AngularJS?
Framework. Not library. Just framework.
Made with 100% Javascript.
Main concepts
- Model - Application data
- View - What the user see
- Controller - Application behaviour
- Scope - Glue all parts together
- Module - configures the injector
- Injector - assembles the app
ng-app example
<html>
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-app="">
</div>
</body>
</html>
ng-app example
<html>
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-app="">
Hello {{name}}
</div>
</body>
</html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-app="">
Hello {{name}}
</div>
</body>
</html>ng-app example
<html>
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-app="">
Hello {{name}}, you're {{70 + 11}} years old.
</div>
</body>
</html>
<html>
<head>
<script src="angular.js"></script>
</head>
<body>
<div ng-app="">
Hello {{name}}, you're {{70 + 11}} years old.
</div>
</body>
</html>ng-app example
<div ng-app="">
<div ng-controller="FirstCtrl">
Hello {{name}}, you're {{age + 11}} years old. </div></div>
<div ng-app=""> <div ng-controller="FirstCtrl"> Hello {{name}}, you're {{age + 11}} years old.</div></div>
var FirstController = function($scope) {
$scope.name = 'Ronen';
$scope.age = 70;
}
ng-app example
<div ng-app="">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="age" />
Hello {{name}}, you're {{age + 11}} years old.
</div></div>
<div ng-app=""> <div ng-controller="FirstCtrl"> <input type="text" ng-model="age" /> Hello {{name}}, you're {{age + 11}} years old.</div></div>
var FirstController = function($scope) {$scope.name = 'Ronen';$scope.age = 70;}
ng-app example
<div ng-app="">
<div ng-controller="FirstCtrl">
<input type="text" ng-model="age" />
Hello {{name}}, you're {{age + 11}} years old.
<button ng-click="sayMyName()">Say my name!</button> </div></div>
<div ng-app=""> <div ng-controller="FirstCtrl"> <input type="text" ng-model="age" /> Hello {{name}}, you're {{age + 11}} years old.<button ng-click="sayMyName()">Say my name!</button></div></div>
var FirstController = function($scope) {$scope.name = 'Ronen';$scope.age = 70;$scope.sayMyName = function() {alert($scope.name);};}
How does it works?
- Browser loads the HTML and then the AngularJS script.
- Angular waits for DOMContentLoaded event and looks for ng-app directive.
- The module specified in ng-app is used to cofigure the injector.
- The injector is used to create $compile service and the $rootScope.
- $compile compiles the DOM and link it with the relevant scope.