logicmania

In previous post we tried to create module, component and routing. Lets look into how to add third party libraries. You could check out the code from  here . git checkout -b part3.0 origin/part3.0 In Angular4 adding third party libraries is pretty easy. Install using npm and add the module. Its one of my most loved feature in Angular4. PrimeNG PrimeNG is one of the most used and most popular Angular4 library. It consists lot of components and its easy to setup and use. Besides it does have a good team working behind this library. In my experience it's one of the fast developing library. To install PrimeNg run npm install primeng --save npm install font-awesome --save PrimeNg needs font awesome for icons . Unlike any other libraries , PrimeNG had separate module for each component, which helps to include only selected component in the bundle. Lets include styles for the components. In .angular-cli.json add "styles": [ "../node_modules/bootstra...

In the previous post we created a new Angular 4 project. Lets check the how to add modules, components and routing. You could check out the code from here . git checkout -b part2.0 origin/part2.0 We are going to use bootstrap styling . So lets add bootstrap in our aplication . We are going to use only styling not the components. npm install bootstrap@3 We need to add the bootstrap stylesheet in tha .angular-cli.json. "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], Our first Module Lets add a new module employee.  Inside "src/app" run ng generate module employee or ng g m employee Wait we are going to lazy load this module , so we need routing inside the module, right? So we are going to create the routing also. ng g m employee --routing Time for component It will create new employee module with its own routing.   lets add a component for listing the employee. S...

When i first started using Angular 2 its in beta. Getting started with Angular is pretty easy. The team provided an awesome cli-tool which will help to create, develop, test and build the Angular project easily. We need to install the angular/cli (Formerly angular-cli) globally. Latest angular/cli(1.1.2 at the time of this writing) will create an Angular 4 project. npm install -g @angular/cli Suppose you need to create an Angular 2 project. What will you do? NOrmally what i will do is will install rc4 version of angular cli and create a new project, which will by default create a angular2 project. Then later will update to latest cli and the project will work smoothly in latest cli, npm install -g @angular/cli@1.0.0-rc.4 So that's all about angular/cli. You could check out detail in here. Lets create an application and try it. For creating new application run the following command. ng new ngApp This will create a new application and it will install all the dependenc...

AngularJS is one of the most popular JavaScript frameworks in the web. The Google developed framework is considered as one of the easiest framework to kick start a project. Two way binding and the dependency injection is the highlight of this framework. My journey with AngularJS started about 4 years ago. Then popular ver1.4 amazed me in its capabilities. Developer like me, coming from Actionscript and plain old JQuery , AngularJS is a good option to kick start a project. It give me the confidence in JavaScript world, and from then I have tried lot of framework and tools from JavaScript itself like requireJS, webpack, etc. I did projects in Angular from 1.4 to the current 2.0, and trying to upgrade to the latest 4. Angular has now become one of the fastest growing framework. The journey starts with 1.4 One of the stable and mostly uses version. Started working on this for small projects and it seems easy for development. Dependency injection and two way binding seems quite interest...

Recently i got chance to work with 2 technologies. One is the most popular framework and another is the latest version of the later one. Its AngularJS and Angular2. Most interesting thing was, i had to write the entire code in ES6. Intresting? Scenario The scenario is interesting. Most SPA in AngularJS face a big challenge. As the project grows it will become slow to load. The modules, libararies. Everything need to be loaded in the initial stage. In this scenario lazy loading comes in to handy. The modules and libraries only be loaded whenever they were required and it's dynamically added to the application. Though Angular2 supports lazy loading by dafault, AngularJS doesn't support lazy loading by default.  And also angular need to register the directives, controllers etc. It will create so many requests for a single module. If we could bundle all the required templates, js ,css into a single file we could reduce the number of requests send to the server for retrieving...