AngularJS – MVW framework – Model

View Github Repository Open presentation in a new window

zabil

See all presentation from zabil

AngularJS – MVW framework – Model

0 0

angularjsprez

Angular js presentation

On Github zabil / angularjsprez

AngularJS

MVW framework

maintained by google

Model

View

Whatever works for you

Declarative

vs

Imperative

Event handling

DOM manipulation

Boiler plate

Extending HTML

and

2 way data binding

Single page applications

mUzima

mobile patient care

openmrs

http://openmrs.org

modules

hibernate

Spring mvc

jquery

Interactiveness

go

Angular

Building Blocks

Bootstrapping

<html ng-app>
    <body>
        ....
        <script src="angular.js"></script>
    </body>
</html>

Modularization

Module

var myModule = angular.module("myModule");

myModule.factory('greeter', function(){
    return {
        greet : function(){
            return "Hello";
        }
    }
});

Multiple modules

var services = angular.module("services");
services.factory(...);

var controllers = angular.module("controllers");
controllers.controller(...);
var myModule =
    angular.module("myModule", ['services', 'controllers']);

Module bootstrap

<html ng-app="myModule">
    <body>
    ....
    <script src="angular.js"></script>
    </body>
</html>

Dependency Injection

Factory

var myModule = angular.module("myModule");

myModule.factory('greeter', function(){
    return {
        greet : function(){
            return "Hello";
        }
    }
});
myModule.controller('GreeterController',['Greeter',
    function(Greeter){
        greeter.greet();
}]);

Routing

Reference section of the url

http://awesome.com/index.html#/hello

Partials

myModule.config(['$routeProvider',
   function($routeProvider){
    $routeProvider.
        when('/hello', {templateUrl: 'hello.html'}).
        when('/bye', {templateUrl:'bye.html'}).
        otherwise({redirectTo:'/hello'});
}]);
<html ng-app>
    <body>

        <div ng-view></div>

        <script src="angular.js"></script>
    </body>
</html>

Binding

Controller

myModule.controller('GreeterController',['$scope',
    function($scope){

    }
 ]);
<div ng-controller="GreeterController">
    <input type="text" ng-model="message"></input>
</div>

2 way binding

<div ng-controller="GreeterController">
    <input type="text" ng-model="message"></input>
    <div>{{message}}</div>
</div>

Lists

myModule.controller('GreeterController',['$scope',
    function($scope){
        $scope.greetings = ['Ola', 'Hello', 'Namaste'];
    }
]);
<div ng-controller="GreeterController">
    <ul ng-repeat="greeting in greetings">
            <li>{{greeting}}</li>
    </ul>
</div>

Lists 2 way binding

myModule.controller('GreeterController',['$scope',
    function($scope){
        $scope.greetings = ['Ola', 'Hello', 'Namaste'];
        $scope.addGreeting = function(greeting){
             $scope.greetings.push(greeting);
        }
    }
]);
<div ng-controller="GreeterController">
    <input type="text" ng-model="greeting"></input>
    <input type="button"
            ng-click="addGreeting(greeting)"></input>
    <ul ng-repeat="greeting in greetings">
        <li>{{greeting}}</li>
    </ul>
</div>

Extending

Directives

myModule.directive('displayGreeting',function(){
    return {
        templateUrl: 'greeter.html'
    }
});
<div display-greeting>

Testing

DOM