HTML enhanced for web apps

Introduction to AngularJS with Yeoman

Oliver Zeigermann / @DJCordhose

Online version at: http://djcordhose.github.io/angular-introduction/slides/angular.html

Angular

HTML enhanced for web apps!

http://angularjs.org

Concepts

  • Client Side Templates
  • MVC (Model rather is a view-model)
  • Three Ds
    • Data Binding
    • Dependency Injection
    • Directives

Hello World #1

<html ng-app>
<head>
    <script src="angularjs/angular.min.js"></script>
</head>
<body>
    <input ng-model="name">
    <p>Hello, {{name}}!</p>
</body>
</html>
Run

Hello World #2

<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

Hello World #3

<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

Yeoman

Modern Workflows For Modern Webapps

http://yeoman.io/

Creating a simple Angular project with yo

# 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

Live-Demo #1: Tests in WebStorm

  • Open application in WebStorm
  • Execute tests karma.conf.js (right mouse click on file)
  • Locate matching Jasmine-Testsuite
  • Add failing test, e.g. expect(scope.awesomeThings[0]).toBe("Olli");
  • Find matching controller and make test pass
  • Ensure changes are reflected in Browser immediately

Live-Demo #2: Build

  • Execute task grunt jshint and make it fail
  • Inspect Gruntfile.js to identify jshint task - where is the configuration file?
  • Change configuration file to make grunt jshint pass
  • Compare index.html in app folder with the one in dist folder

Live-Coding #1

  • 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

Live-Coding #2

  • 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

Thank you

Questions / Discussion

Oliver Zeigermann / @DJCordhose

Fork me on GitHub