Scal`a`ngular - Scala and Angular
Download as ODP, PDF0 likes2,190 views
Scal`a`ngular is a framework that integrates Scala with AngularJS, allowing the development of type-safe AngularJS applications. It involves defining AngularJS apps via registered classes and singleton objects while utilizing injectable services for controllers and directives. Essential components and services in this framework can be specified using annotations, enhancing the integration between Scala and AngularJS.
![Registering the classes
Angular.module("todomvc")
.controller[TodoCtrl]
.directive[TodoItemDirective]
.directive[EscapeDirective]
.directive[FocusDirective]
.filter[StatusFilter]
.factory[TaskServiceProxy.Factory]](https://image.slidesharecdn.com/scalangular-160822062514/85/Scal-a-ngular-Scala-and-Angular-5-320.jpg)
![Factory
@injectable("taskService")
class TaskService(http: HttpService) extends Service {
...
}
@injectable("taskService")
class TaskServiceFactory(http: HttpService) extends
Factory[TaskService] {
...
}](https://image.slidesharecdn.com/scalangular-160822062514/85/Scal-a-ngular-Scala-and-Angular-10-320.jpg)
![Scope
trait UserScope extends Scope {
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
}](https://image.slidesharecdn.com/scalangular-160822062514/85/Scal-a-ngular-Scala-and-Angular-12-320.jpg)
 {
val future: Future[User] = http.get("/users/john")](https://image.slidesharecdn.com/scalangular-160822062514/85/Scal-a-ngular-Scala-and-Angular-13-320.jpg)
 {
...
@JSExport
def delete(): Unit = userService.delete(scope.id)
}
<div ng-controller="userDetailsCtrl">
...
<button ng-click="controller.delete()">Delete</button>
</div>](https://image.slidesharecdn.com/scalangular-160822062514/85/Scal-a-ngular-Scala-and-Angular-14-320.jpg)
Scal`a`ngular - Scala and Angular
- 1. Scal`a`ngularScal`a`ngular Harsh Sharma Khandal Software Consultant 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 JS app 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
- 6. Registering the singleton objects Angular.module("todomvc") .controller(TodoCtrl) .directive(TodoItemDirective) .directive(EscapeDirective) .directive(FocusDirective) .filter(StatusFilter) .factory(TaskServiceProxy.Factory)
- 7. Injectable Services Injectable services can 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 extends AttributeDirective { ... }
- 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 extends Scope { 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") class UserDetailsController(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>