Oliver Zeigermann / @DJCordhose
Online version at: http://djcordhose.github.io/angular-introduction/slides/angular.html
<html ng-app>
<head>
<script src="angularjs/angular.min.js"></script>
</head>
<body>
<input ng-model="name">
<p>Hello, {{name}}!</p>
</body>
</html>
Run
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="HelloController">
<input ng-model="greeting.text">
<p>{{greeting.text}}, World!</p>
</body>
</html>
function HelloController($scope) {
$scope.greeting = {
text: 'Hello'
};
}
Run
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="HelloController as helloController">
<input ng-model="helloController.greeting.text">
<p>{{helloController.greeting.text}}, World!</p>
<input type="button" value="Click" ng-click="helloController.func()">
</body>
</html>
function HelloController() {
this.greeting = {
text: 'Hello'
};
}
HelloController.prototype.func = function() {
this.greeting.text = "Soso";
};
Run
# install node via http://nodejs.org/download/
# Installation yo
sudo npm install -g yo
sudo npm install -g generator-angular
# Create
mkdir sandbox
cd sandbox
yo angular
# Unit Tests
grunt build test
# Start
grunt build serve
karma.conf.js
(right mouse click on file)
expect(scope.awesomeThings[0]).toBe("Olli");
grunt jshint
and make it fail
Gruntfile.js
to identify jshint
task - where is the configuration file?
grunt jshint
pass
index.html
in app
folder with the one in dist
folder
Standard Directives
: HTML-Extensions
Scope
: Context containing model and logic, interface to Template
Controller
: Initializes Scope
Modules
: Encapsulates a part of the application, can import others
Routing
: URLs mapped to templates and controllers
Custom Directives
: Your custom HTML-Extensions
Services
: Singletons to be used by other part of the app
DI
: Inject services based on their name
Resources
: Access REST services in the most natural way