Skip to main content

Angular JS Warm-Up



Angular JS is not just another javascript library but an client side javascript framework developed and maintained by Google. AngularJS brings in a revolution in the field of Single Page Application (SPAs) allowing to write a propered architectured, maintainable and testable client side code. It's ability to bring in the power of MVC framework in client side programning is one of the reason it's being popular these days. As we know good software design has High Cohesion(how well does that one thing stick to do just one thing) and Loose Coupling(least possible dependency of one component on another component)Angular JS offers MVC/MVVM paradigm to create components more flexible and loosely coupled
Being an client side framework, Angular JS comprised of HTML, CSS and JavaScript/TypeScript. Angular JS was written in TypeScript because:

Having said that let's install this powerful framework into our machine to explore more



  • First install latest version of nodeJS(for executing JavaScript code outside the browser) and then npm(node package manager to install third party libraries) 
  • Install angular command line interface(cli) using command: 
    • npm install -g @angular/cli
       (g stands for global(system) so that you don't need to install angular cli for every project.)
    • you can also check the version of installed angular/cli
    •  ng -v
    • Now we can create a new angular application using installed angular/cli in desired directory.
    • ng new "DesiredApplicationName"
  • After few minutes you can see an angular application structure or boilerplate is generated. 
    • e2e: e2e stands for end to end, this is where we write end to end tests files(these tests are automated test that simulate real user) for our application.
    • node-modules: This is where all third party libraries that the application depend upon are stored. Node modules packages are purely for development; so when we compile our application, parts of this third party libraries are bundled and deployed in our application. 
    • src Directory: This directory is where we write all our AngularJS code for application development.
    • app: Inside src directory app folder consists of component and module. Every application has atleast one component and one module.
    • assets: Inside this directory all the static resources like image files, text files, icons are placed here.
    • environment: This is where we configure configuration settings for different environments(production and development environment). 
    • main.ts: This TypeScript file is basically a starting point of our application as main method in java.
    • styles.css: For applying global styles to our application.
    • .editorconfig: setting up editor configuration
    • .gitignore: excluding certain files and folders from git repository.
    • karma.conf.js: karma is a test runner for JavaScript code, here it uses jasmine framework for testing.(files preceding with . are configuration files which are not much concerned for us.)
    • package.json:Generally for managing all the libraies and dependencies used in the application.
    • protractor.conf.js: Tool for running e2e tests files.
    • tsconfig.json: Configuration file for TypeScript compiler.
    • tslint.json: Configuration file for tslint (checks for readability, maintainability and functionality errors for TypeScript codes).
  • Now change directory into you angular app location. To run your angular application use command:
  • ng serve
  • After getting "compiled successfully" message you can navigate to localhost:4200 to see your up and running first angular application.
  • Additionally if you want to change the default port number 4200 to something else you can use command (in my case it's 4201)
  • ng serve --host 0.0.0.0 --4201
    Voila !! Now you are up and running with Angular JS version 4.....! Keep Learning By Doing !

Comments

Popular posts from this blog

Is java pass by value or pass by reference ??

After getting familiar with java programming fundamentals one with programming mind always thinks about 'is java pass by value or reference '. Throughout this blog we would be able to conclude that java is pass by value. Java is always pass by value, often confusion occurs when Object are passed into method as arguments. Pass by value: Make a copy in memory of the actual parameter's value that is  passed in. For eg: suppose you hava file1.txt in local disk, let say 'D' drive, copying file1.txt into Desktop and changing it doesn't change the content inside the file1.txt of 'D' drive. Pass by reference: pass a copy of the address of actual parameters. For eg: suppose you created a shortcut file for file1.txt in desktop then changing contents from shortcuts also changes file in 'D' drive. Above program prints 9, from which means copy of value 9 is sent to the argument for test function due to which printing value of x in main method give

Parsing xml file with JSOUP

Let say we have a xml formatted file as: snapshot of a stack-overflow data dump xml file as posts.xml Here is a sample program to extract title and tag from above xml file using jsoup library in java. Once importing  jsoup library  in our program, we can write program as: public class JsoupParser { public static void main(String[] args) throws Exception { String question; String tag; File fileQuestion = new File( "F: \\ Data \\ stackoverflow.com-Posts \\ posts.xml" ); Document docQuestion = Jsoup. parse (fileQuestion, "UTF-8" ); Elements eachrowQuestion = docQuestion.getElementsByTag( "row" ); for ( int i = 0 ; i < eachrowQuestion.size(); i++) { question= eachrowQuestion.get(i).attr( "Title" ); tag=eachrowQuestion.get(i).attr( "Tags" ); System.out.println(question+ "---->" + tag); } } } Now we can

Shahrukh khan At a Glance

Unbeaten king since twenty-two years: Shah Rukh Khan (“Naam toh suna hi hoga”) Through this article i am not emphasizing over my favorite actor. He is the legend that every-one of you must know about him. Figuratively Shahrukh khan is an actor, film producer and TV personality while speaking literally these words aren’t enough that describes khan. After reading this article anyone can figure out why i am approaching him so deeply.                                                                                                                   Shah Rukh Khan, informally referred to as SRK, is an Indian film actor. Often referred to as “The King of Bollywood”, Khan has acted in over 65 Hindi films.  In 2005, the Government of India honored him with the Padma Shri for his contributions towards Indian Cinema which is regarded as a very honorable award in India. Glancing on his study, he had graduated with a bachelor degree in economics. He had started his career with TV ser