TypeScript,Karma, Jasmine,Angular,Gulp... - LearningRbcRegistry/Wiki GitHub Wiki

Angular / TypeScript / Gulp / Css / HTML

Antoine Bour / Nov 16*

Through a new -light- version of the petStore:

  • Prerequired: - WebStorm (as IDE) - Nodejs + Npm installed - A rest API proposing the following:

Start

  • Start a new project in WebStorm:

1.png

  • Create the following structure:

1.png

    • init the NPM project

1.png

1.png

this create the project. A Package.json is now available

1.png

  • Create 3 files on the root path of the project:

    • gulpfile.js -> contains the task that you will automate in order to package your webapp
    • gulpfile.config.js -> gulp optional configuration file. Can be direct in gulpfile.js
    • tslint.js -> for Code quality plugin provided with gulp.

  • Now install Gulp:

  • Retrieve my project and copy/paste the content of the 4 files in you project - Gulpfile.js

    • Var gulp contains all linked plugin
    • Reference to the typescript compiler definition (tsconfig.json)
    • List of tasks:
      • Compile-ts / compile typescript files
      • Clean-ts / clean compiled typescript files
      • Watch / On the fly deployment
      • Serve / Provide server connectivity
      • Default / list of chained tasks to execute for “gulp” cmd
      • Ts-lint / check the code quality
-	Gulpfile.config.js
    -	Define the path used for the tasks
-	Tslint.js
    -	Code quality plugin definition
    -	[More details](https://www.npmjs.com/package/gulp-tslint "")
-	Package.json:	Add the devdependencies linked to gulp

  • Install the proposed dependencies: npm install

  • npm install --save del -Install now the typescript definition files that are used to provide code help in Webstorm (or other): npm install tsd -g

  • And init tsd files: Created a tsd.json ans tsd.d.ts. These are optional files that are useful to init valid project references or for editing the configuration. Just check the content of the files for more informations!: tsd init

  • Check that the value for the key “path” and “bundle” are correct.

  • Now install typescript definition file for angular: tsd install angular –save

  • For Jquery: tsd install jquery –save. These 2 files will let you compile tsc files without errors

  • Your tsd.d.ts file is referencing these 2 files.

  • For our project it’s still not enough, do the same for:

    • tsd install angular-route
    • tsd install angularjs/ -> install all angular definitions.
    • “tsd rebundle” will update tsd.d.ts with installed definitions.

  • Now, let’s go for implementation of our small application:

    • Create the following project structure:

1.png

  • On “src/app” root path, create you routing module

  • Now let’s implement the service layer that handle the communication with our Rest Appli:

  • Now let’s implement our CategoriesController: file src/app/controllers/categories.controller.ts

    • Module
    • ‘use strict’ force the typing of a variable
    • $inject, this is angular dependency injection
    • Angular.module().controller() Declaration of the function for use in angular

  • And create the categories.html page:

    • Using simply angular

  • Final create the entry point of the application: index.html in the root path of app folder

    • References to angular resources
    • References to transpiled ts scripts

  • Now build your application: “gulp”, launch the default task (but is your tsconfig.json (config of compiler) created?)

  • gulp serve / http-server (npm install http-server)

  • Still not working? Fix you tslint issues!

Now that we have done a little TypeScript introduction, let’s get more details about Gulp which was the taskRunner for transpiling, code quality and transpiling:

Gulp is able to :

  • Concatenate CSS or Javascript
  • Create or update an existing folder structure
  • Optimize images
  • Simulate phantom browser in order to run tests
  • Create a local server in order to run the application

Gulp require node.js and the ability to write shell commands.

  • To install gulp: npm install gulp –g
  • In order to run, gulp is based on package.json (plugins)
  • And a gulpfile.js that contains the tasks to be automated.

-- Exemple 1: Move css to the destination file

gulp.task('css', function () {
  return gulp.src(sourceFolder)
     .pipe(gulp.dest(destinationFolder));
});

Exemple 2: Use linter that avoid the transpiling of TypeScript files if the coding sucks

gulp.task('ts-lint', function () {
    return gulp.src(config.allTypeScript).pipe(tslint()).pipe(tslint.report('prose'));
});

Exemple 3: define the default gulp task. In this case we check the code quality and compile typescript (compile-ts task to see in the project)

gulp.task('default', ['ts-lint', 'compile-ts']);

But this small site is graphically very poor. Let’s get the help from html5 and css:

CSS Selectors: fix on which element a style is applied:

For "

" in html: "p{font-family:Arial};"

  • Font-family is a property
  • Value is Arial
  • Types and Classes selectors:
    • P{} is a type selector
    • .class{} is a class selector:
  • .rouge{color: red;}
  • ID selectors: #identifier{…} -> only applied to the html element id indicated*
Selector Applied to
h2 each

element
.red Each element for the .red class
#tall Element with “tall” identifier
:first-letter First letter of an element
.red:first-letter First letter from red classes element
* All elements

Let's Decorate: Bootstrap

CSS open-source framework, propose html and javascript elements.

  • Allow management multi browser (through normalize.css)

  • Time win with preconfigured elements.

  • Bootstrap is based on grids: Adapted to differents surfing way (smartphones, tablets..):

    • ...
    • 10 col for md screen (md = desktop)
    • 8 cols for sm (sm = tablets)
    • 6 cols for xs (aka smartphone)

  • Shift the element of a grid : col-md-4 col-md-offset-2

  • Grid can contains other grids:

  • How to manage css dependencies (bootstrap), javascript plugins:

    • Bower is a client dependencies manager
    • But NPM do the same and has a more libraries

  • npm install bootstrap –savedev -> save-dev to update package.json

  • Content of bootstrap:

  • Base classes in bootstrap.css

  • Specific themes in bootstrap-theme.css

  • Glyphicons** -> icons

  • bootstrap.js : Javascript code of bootstrap components ;

If you modifiy the bootstrapp css it would be impossible to use CDN for them

How to use bootstrap: - css in "

" - declare bootstrap.min.js after jquery.js (bootstrap need jquery to run)

Exemples: bootstraptheme.html and bootstraptheme2.html from associated tutorial (see in git)

Use of SASS: Syntactically awesome style sheet

  • npm install node sass

  • Why SASS?

    • Css is easy but not readable
    • Not need to declare each style one after the other
    • SASS can nest the css.
    • A processor will transform the special file (scss) in normal css
    • Variable can be used: $myGreen:”#99cc00”;
    • And reused in the whole application: $typekit-link-color: $myGreen

  • Mixins: Reusable properties in other components:

    • @mixin bold-underlined-text { font-weight: bold; background-color: $underlinedColor }

      .underlined-result{ span {@include bold-underlined-text} }

  • Dynamics functionsDynamics functions

Karma and Jasmine

####Karma Exemples from Jasmine user with Karma are all available in the provided git projects

  • Is a test runner: Start the tests, support them and execute them.

  • On different browser

  • http://karma-runner.github.io/1.0/intro/installation

  • Install and use karma for jasmine unit tests:

    • npm install jasmine
    • npm install karma –save-dev
    • npm install karma-jasmine karma-chrome-launcher –save-dev
    • npm install –g karma-cli
    • karma start (only possible if CLI is installed)

  • when?

    • .. we need to test our application in a real browser
    • .. in mobile devices browser
    • .. for local tests during development
    • .. For Continuous Integration
    • And automated tests
    • Live mode is possible. On each file save it launch the test on the fly (setup can be done for isolation)

  • Why testing:

    • Refer to testing documentation, devoxx conferences..
    • Providing correct code
    • Quick feedback
    • No regressions
    • Safer refactoring
    • Better documentation
    • Best design

  • Advantages:

####Jasmine

Behavior driven development framework for javascript testing Tutorial done: https://scotch.io/tutorials/testing-angularjs-with-jasmine-and-karma-part-1

git of the TypeScript project on AngularJs

git of the typeScript tutorial ...

⚠️ **GitHub.com Fallback** ⚠️