Angular.js

 Angular.js

9fae8c5d475fe322a3a74e53d56ee2a0?s=128

Tymon Tobolski

January 28, 2013
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 14.

    <!doctype html> <html ng-app> <head> <script src="angular.js"></script> </head> <body> <div>

    <input type="text" ng-model="name"/> <span>Hello {{ name }}!</span> </div> </body> </html>
  5. 16.

    app = angular.module('myapp', []) app.controller 'ItemsCtrl', ($scope) -> $scope.items =

    [ {name: "Item A"} {name: "Item B"} ] $scope.newName = "" $scope.add = () -> $scope.items.push({name: $scope.newName}) $scope.newName = "" angular.bootstrap(document, ['myapp']) <div ng-controller="ItemsCtrl"> <li ng-repeat="item in items"> {{ item.name }} </li> <input type="text" ng-model="newName"/> <button ng-click="add()">+</button> </div> http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT
  6. 17.

    app = angular.module('myapp', []) app.controller 'ItemsCtrl', ($scope) -> $scope.items =

    [ {name: "Item A"} {name: "Item B"} ] $scope.newName = "" $scope.add = () -> $scope.items.push({name: $scope.newName}) $scope.newName = "" angular.bootstrap(document, ['myapp']) <div ng-controller="ItemsCtrl"> <li ng-repeat="item in items"> {{ item.name }} </li> <input type="text" ng-model="newName"/> <button ng-click="add()">+</button> </div> http://plnkr.co/edit/koQ2iu4wLTosQxZbh6KT
  7. 18.
  8. 26.

    ROUTING app.config ($routeProvider) -> $routeProvider. when('/', {controller: IndexCtrl, templateUrl: 'index.html'}).

    when('/edit/:id', {controller: EditCtrl, templateUrl: 'edit.html'}). when('/new', {controller: NewCtrl, templateUrl: 'new.html'}). otherwise({redirectTo:'/'})