Posts

Angular 4 - The Beginning

Image
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 dependencies . Do you kn…

Angular - 4 year road map

Image
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 interesting. …

AngularJs with ocLazyLoad and webpack

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 the f…

RequireJS: More with templating - Dynamic data

Find the previous episode here.

Checkout the part 3 branch
git checkout -b part4.0 origin/part4.0
Lets change the templating a bit different so that we could add data to the template. Now if we click on a link other than home everything will be gone.

So we will move the link list to the index before maincontent so that it will always remain there. Next we will replace the modules/home/Home.html with some dummy text.
The index.html wil looks like this
<div>   <ul>     <li><a href="#home">Home</a></li>     <li><a href="#employee">Employees</a></li>     <li><a href="#project">Projects</a></li>   </ul> </div> <div id="maincontent">   </div>
Next we will add some more dummy content to other template html file in projects and employees. And also change the controllers to load and how the content. And also we need to change the router.js like…

RequireJS: More with modules - Templates

Find the previous episode here.

Checkout the part 3 branch
git checkout -b part3.0 origin/part3.0
We have created the routing and added a test module to the application. Lets try to add more to module.

Templating 
        Am going to use RequireJS "Text" plugin for templating along with  Underscore.js and Jquery
Text
    An AMD loader plugin for requireJS to load text resouces. We will load html using text.
Underscore.js
    "Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects."
underscore provides a powerfull templating option. You could try lodash also which is a fork of UnderscoreJS

Let's do some coding now. First we need to create a template in html.
We will extract this code from index.html and will create a new html in modules/home/templates/home.html

<div> <ul> <li><a href="#home">Home</a></li> <li><a href="#em…