Scal`a`ngular - Scala and Angular

Scal`a`ngular - Scala and Angular

• 1.
  Scal`a`ngularScal`a`ngular Harsh Sharma Khandal SoftwareConsultant Knoldus Software LLP
• 2.
  What is Scal`a`ngular? ●A term composed of Scala and Angular JS ● A relationship, a handshake between Scala and Angular JS ● Way to build AngularJS based applications in type safe manner with Scala ● Way to provide the bindings to core AngularJS classes and functions ● A term composed of Scala and Angular JS ● A relationship, a handshake between Scala and Angular JS ● Way to build AngularJS based applications in type safe manner with Scala ● Way to provide the bindings to core AngularJS classes and functions
• 3.
  Requirements in SBT ●Add the following dependency and resolves in the sbt file, "com.greencatsoft" %%%! "scalajs-angular" % "0.8-SNAPSHOT" resolvers += Resolver.sonatypeRepo("snapshots")
• 4.
  Defining Angular JSapp Scala provides Angular JS app to be defined by registering the structures and code blocks in two ways, ● By registering the classes ● By registering the singleton objects
• 5.
  Registering the classes Angular.module("todomvc") .controller[TodoCtrl] .directive[TodoItemDirective] .directive[EscapeDirective] .directive[FocusDirective] .filter[StatusFilter] .factory[TaskServiceProxy.Factory]
• 6.
  Registering the singletonobjects Angular.module("todomvc") .controller(TodoCtrl) .directive(TodoItemDirective) .directive(EscapeDirective) .directive(FocusDirective) .filter(StatusFilter) .factory(TaskServiceProxy.Factory)
• 7.
  Injectable Services Injectable servicescan be defined as follows, ● Controllers, ● Factories, ● Directives, ● Filters
• 8.
  Defining a Service ●Any service we define must be inherited from its parent trait Service, ● In injectable services like, we use the @injectable to specify the name of service
• 9.
  Services @injectable("todoUser") class UserDirective extendsAttributeDirective { ... }
• 10.
  Factory @injectable("taskService") class TaskService(http: HttpService)extends Service { ... } @injectable("taskService") class TaskServiceFactory(http: HttpService) extends Factory[TaskService] { ... }
• 11.
  Controllers and Scopes ●Controller is a special angular JS service, used to communicate with template by manipulating a scope object ● In Scala, scope declares a set of properties we want to access from controller class ● Controller uses the name of the scope trait as type parameter of controller or AbstractController class
• 12.
  Scope trait UserScope extendsScope { var id: String = js.native var name: String = js.native var email: String = js.native var friends: js.Array[String] = js.native var delete: js.Function = js.native }
• 13.
  Controller @injectable("userDetailsCtrl") class UserDetailsController(scope: UserScope,http: HttpService) extends AbstractController[UserScope](scope) { val future: Future[User] = http.get("/users/john")
• 14.
  Controller with JSExport @JSExport @injectable("userDetailsCtrl") classUserDetailsController(scope: UserScope, http: HttpService) extends AbstractController[UserScope](scope) { ... @JSExport def delete(): Unit = userService.delete(scope.id) } <div ng-controller="userDetailsCtrl"> ... <button ng-click="controller.delete()">Delete</button> </div>
• 15.
  References ● https://github.com/greencatsoft/scalajs-angular