Suppose you are building an Angular app with login feature. You are using a server-sided framework to build an API that the Angular app consumes. You don't want the server-sided framework to render different pages depending on the user's session status. Instead, you want Angular to check the session status and show/hide certain parts of the page. When the user logs in, the page can respond without a refresh.
Sounds like a plan! But wait, there is one problem. How does Angular know whether the user is logged in before rendering the page?
One option would be to use the server-sided framework to embed session data as globals in the HTML index, so that Angular can take those session data and turn them into appropriate injectable dependencies. But placing session data in a script block on the index just doesn't seem right to me. It results in globals and the data are exposed on the index HTML.
Another option that I adore is to load the session data asynchronously before Angular bootstraps the app. We can guarantee that the data are available and packaged as injectable dependencies when the app bootstraps. All we have to do in the app is to inject the data as dependencies and access them immediately.
Normally, you would place an ng-app on the body or the html tag, to mark the app as an Angular app. Angular would sniff through your HTML, find the ng-app mark, and bootstrap your app once script files are loaded. There is no easy way to sneak in some asynchronously-retrieved data before bootstrapping.
Fortunately, Angular offers us the ability to manually bootstrap our app. This means we can load data asynchronously, and manually bootstrap our app once the data are retrieved. The function that does the manual bootstrapping is angular.bootstrap.
To make the data pre-loading process clean and organized, we want to make the data available through dependency injection and not expose them to the global scope. To do this, we can create a pre-load module that contains the pre-loading logic. Pre-loaded data can be registered in another module which can then be injected to the app via module dependency. This Plunker example demonstrates how it works: http://plnkr.co/edit/gwelwkSQyHCroPes4m5e?p=preview
Wednesday, July 23, 2014
Saturday, March 1, 2014
First week on the job: GitHub, JIRA, AngularJS, Yeoman, Bower, Grunt
My first week as a part of a professional development team is definitely an eye-opener. I was overwhelmed, in a good way, by all the tools used that give efficiency and quality to programming.
GitHub
First, let's talk about GitHub. I used GitHub before, or so I thought. Just a week ago, I thought downloading the GitHub client and clicking some buttons is all I needed to do. Now, I realize how useless the GitHub client really is when I have the awesome git (command line, not GitHub) installed. Here's a list of useful git commands I learned so far:
git clone your-clone-url
This command will create a local repository from the remote repository described by the URL (the URL can be found on the GitHub repository page, it's on the right side under the title "HTTPS clone URL". Make sure you get the one for HTTPS.
git checkout your-branch-name
This command switches your local active branch to the branch that you specify. If you never pulled the branch that you specified, it will get pulled before switching to that branch.
git checkout -b your-branch-name
Adding the -b flag creates a new branch and makes it your active branch. In this case, the branch name specified can be anything. The new branch will have the same files as whatever previous branch you were on.
git pull
This command updates your local branch with the remote branch to include any commits that you missed. You keep changes that you make though, if they don't conflict with the changes from the commits on the remote branch.
git branch
This command lists all your local branches.
git branch -r
Adding the -r flag lists all your remote branches.
git branch -a
Adding the -a flag lists all your local and remote branches.
git branch your-branch-name
If you specify a branch name, that branch will get created, but you will not checkout that branch.
git branch -d your-branch-name
Adding the -d flag will delete the branch that you specify.
git branch -dr your-branch-name
Adding the -r flag with the -d flag will also delete your remote branch.
git add your-directory
This command will include all the changes to existing files and new files to your next commit. It will ignore file deletions. I usually just use . for directory to indicate that I want to include changes in all files.
git add -u
This command will include file deletions to your next commit.
git add -A
This command combines the previous two, so that you will include file changes, new files, and file deletions in your next commit.
git commit -m "your-commit-description"
This command will commit all changes you've included via git add, with a commit description.
git push
This command pushes your local commits to the remote branch.
That's it for git commands that I learned.
JIRA
The next thing I got introduced to is JIRA. So far from my understanding, JIRA is an issue tracking system with support for Agile development. Since it's my first week, I was assigned some simple JIRA tickets that usually involves an easy-to-squash bug. Basically, I had to begin my progress on these tickets by literally dragging them with my mouse, log my hours spent on them, and drag them again to indicate that they have been solved and await for deployment and QA. I was also fortunate enough to be given the chance to create a ticket. For that, I had to choose the severity of the issue, estimate the duration needed to solve the issue, and provide a description of the issue (among other minuscule things).
AngularJS
Now let's talk about the real deal: AngularJS. In my opinion, learning a new language isn't so hard, since they are mostly based on familiar concepts. Learning a clever framework, however, is not as easy. AngularJS is a JavaScript MVC framework developed by the pros at Google. MVC on the front-end is definitely a new concept to me, and I found it to be very exciting. In contrast to the very-popular jQuery, which adds content dynamically to a web application, AngularJS prefers to have all the template of the web application available at the very start and fills the template dynamically while the application runs. One probably can't tell what a jQuery application does just by reading its markup (ignoring comments), but one should definitely have an idea of what an AngularJS application does by reading its template views.
In case you didn't know, MVC stands for model-view-controller. Its concept is to separate structure (model), markup (view) and application logic (controller). In AngularJS, the presence of model is weak because one can add properties dynamically to a JavaScript object. Therefore, in most cases, dynamic JavaScript objects make up the model component. Views are HTML-like markups that act as template with bindings to data which can be dynamically updated (a little more on that in the next paragraph). Controllers are what truly drives the application. They are the necromancers that animate the view templates. Controllers define models, assign models with values, consume back-end services, define behaviour for that cool button, and much more. After all, application logic is a broad term.
Much of what AngularJS does seems like magic to me (maybe I will see through their tricks after a few weeks). By surrounding expressions in double curly brackets or by assigning expressions as strings to directives, the expressions can be interpreted by AngularJS during its compilation process and markup will be outputted with your expressions evaluated. To make things crazier, data binding allows the expression to be re-evaluated if something changes and the markup will be updated.
If you don't know what a directive is, then you are probably slightly puzzled by the last paragraph. Well... to be honest, I don't know what exactly it is yet either. So far, it seems to me that they are used to assign certain properties to a view element, but the properties that you can assign seem so diverse and I am still very confused. I'll fill the gap after I master this concept.
Yeoman, Bower, Grunt
Yeoman (yo), Bower and Grunt are all modules that run on the infamous node.js. They are development tools that make life easy for JavaScript developers. yo is a scaffolding tool that can automatically generate files for your project with generators. Say you are sick of having to create 10 controllers manually. You can do it with yo by, perhaps, simply specifying the controller name. Of course, it is configurable so you can create your own generators for your projects.
Bower is a dependency management tool. You can list all your project dependencies in its config file (generated for you by yo) and you will be able to fetch and/or update dependencies with a simple bower install. It downloads and/or updates dependencies for you via git.
Grunt is my favourite of the trio. It allows you to run a development server, automatically build your project with minification and uglification, automatically update the build and your pages when you edit files while the server is running, and so much more. It supports plugins so the possibilities are truly without limit!
The end
Phew. I just realized after writing this that I've learned so much during my first week! I can't wait to discover what new intellectual treasures await me in my second week!
GitHub
First, let's talk about GitHub. I used GitHub before, or so I thought. Just a week ago, I thought downloading the GitHub client and clicking some buttons is all I needed to do. Now, I realize how useless the GitHub client really is when I have the awesome git (command line, not GitHub) installed. Here's a list of useful git commands I learned so far:
git clone your-clone-url
This command will create a local repository from the remote repository described by the URL (the URL can be found on the GitHub repository page, it's on the right side under the title "HTTPS clone URL". Make sure you get the one for HTTPS.
git checkout your-branch-name
This command switches your local active branch to the branch that you specify. If you never pulled the branch that you specified, it will get pulled before switching to that branch.
git checkout -b your-branch-name
Adding the -b flag creates a new branch and makes it your active branch. In this case, the branch name specified can be anything. The new branch will have the same files as whatever previous branch you were on.
git pull
This command updates your local branch with the remote branch to include any commits that you missed. You keep changes that you make though, if they don't conflict with the changes from the commits on the remote branch.
git branch
This command lists all your local branches.
git branch -r
Adding the -r flag lists all your remote branches.
git branch -a
Adding the -a flag lists all your local and remote branches.
git branch your-branch-name
If you specify a branch name, that branch will get created, but you will not checkout that branch.
git branch -d your-branch-name
Adding the -d flag will delete the branch that you specify.
git branch -dr your-branch-name
Adding the -r flag with the -d flag will also delete your remote branch.
git add your-directory
This command will include all the changes to existing files and new files to your next commit. It will ignore file deletions. I usually just use . for directory to indicate that I want to include changes in all files.
git add -u
This command will include file deletions to your next commit.
git add -A
This command combines the previous two, so that you will include file changes, new files, and file deletions in your next commit.
git commit -m "your-commit-description"
This command will commit all changes you've included via git add, with a commit description.
git push
This command pushes your local commits to the remote branch.
That's it for git commands that I learned.
JIRA
The next thing I got introduced to is JIRA. So far from my understanding, JIRA is an issue tracking system with support for Agile development. Since it's my first week, I was assigned some simple JIRA tickets that usually involves an easy-to-squash bug. Basically, I had to begin my progress on these tickets by literally dragging them with my mouse, log my hours spent on them, and drag them again to indicate that they have been solved and await for deployment and QA. I was also fortunate enough to be given the chance to create a ticket. For that, I had to choose the severity of the issue, estimate the duration needed to solve the issue, and provide a description of the issue (among other minuscule things).
AngularJS
Now let's talk about the real deal: AngularJS. In my opinion, learning a new language isn't so hard, since they are mostly based on familiar concepts. Learning a clever framework, however, is not as easy. AngularJS is a JavaScript MVC framework developed by the pros at Google. MVC on the front-end is definitely a new concept to me, and I found it to be very exciting. In contrast to the very-popular jQuery, which adds content dynamically to a web application, AngularJS prefers to have all the template of the web application available at the very start and fills the template dynamically while the application runs. One probably can't tell what a jQuery application does just by reading its markup (ignoring comments), but one should definitely have an idea of what an AngularJS application does by reading its template views.
In case you didn't know, MVC stands for model-view-controller. Its concept is to separate structure (model), markup (view) and application logic (controller). In AngularJS, the presence of model is weak because one can add properties dynamically to a JavaScript object. Therefore, in most cases, dynamic JavaScript objects make up the model component. Views are HTML-like markups that act as template with bindings to data which can be dynamically updated (a little more on that in the next paragraph). Controllers are what truly drives the application. They are the necromancers that animate the view templates. Controllers define models, assign models with values, consume back-end services, define behaviour for that cool button, and much more. After all, application logic is a broad term.
Much of what AngularJS does seems like magic to me (maybe I will see through their tricks after a few weeks). By surrounding expressions in double curly brackets or by assigning expressions as strings to directives, the expressions can be interpreted by AngularJS during its compilation process and markup will be outputted with your expressions evaluated. To make things crazier, data binding allows the expression to be re-evaluated if something changes and the markup will be updated.
If you don't know what a directive is, then you are probably slightly puzzled by the last paragraph. Well... to be honest, I don't know what exactly it is yet either. So far, it seems to me that they are used to assign certain properties to a view element, but the properties that you can assign seem so diverse and I am still very confused. I'll fill the gap after I master this concept.
Yeoman, Bower, Grunt
Yeoman (yo), Bower and Grunt are all modules that run on the infamous node.js. They are development tools that make life easy for JavaScript developers. yo is a scaffolding tool that can automatically generate files for your project with generators. Say you are sick of having to create 10 controllers manually. You can do it with yo by, perhaps, simply specifying the controller name. Of course, it is configurable so you can create your own generators for your projects.
Bower is a dependency management tool. You can list all your project dependencies in its config file (generated for you by yo) and you will be able to fetch and/or update dependencies with a simple bower install. It downloads and/or updates dependencies for you via git.
Grunt is my favourite of the trio. It allows you to run a development server, automatically build your project with minification and uglification, automatically update the build and your pages when you edit files while the server is running, and so much more. It supports plugins so the possibilities are truly without limit!
The end
Phew. I just realized after writing this that I've learned so much during my first week! I can't wait to discover what new intellectual treasures await me in my second week!
Tuesday, February 25, 2014
A new beginning for a programmer with a biology degree
I loved programming back in high school. Then a mistake happened, thanks to youth, idealism and naivety. As a student who excelled in high school math, physical sciences, computer science, and logical reasoning, I became a biology major in university, "planning" to study medicine, after taking zero biology courses in high school. Of course, I was not aware that intelligence plays almost no role in getting a 4.0 in biology (jamming stuff into your brain does).
I began to realize my mistake as early as my first year in university. But an awesome quality called persistence kept me on the bumpy road. By second year, I was convinced that memorizing molecularly tiny details about little squishy aquatic creatures called cells is not my thing, but the persistence was still strong. By third and fourth years, the persistence that kept me going for two years was replaced by a sadistic force called despair, and I was convinced that I had walked past the point of no return.
Luckily, my interest in programming pulled me towards research projects that involved a great deal of programming. After nearly going on to become a Masters candidate in the medical faculty (What does a Masters degree in science do anyway???), my mind suddenly became clear and I finally let go of my four-years worth of efforts with little regret. With some luck, I found temporary employment as a programmer in the academia. Although guidance from a more experienced programmer was absent, I managed to learn a lot through trial and error.
At last, near the completion of my temporary employment, I was offered a real programmer job in the industry! With joy and excitement, I am creating this blog to log and document my experience as a programmer with a biology degree. In the least, I will get a good chuckle when I read this on my rocking chair one day.
I began to realize my mistake as early as my first year in university. But an awesome quality called persistence kept me on the bumpy road. By second year, I was convinced that memorizing molecularly tiny details about little squishy aquatic creatures called cells is not my thing, but the persistence was still strong. By third and fourth years, the persistence that kept me going for two years was replaced by a sadistic force called despair, and I was convinced that I had walked past the point of no return.
Luckily, my interest in programming pulled me towards research projects that involved a great deal of programming. After nearly going on to become a Masters candidate in the medical faculty (What does a Masters degree in science do anyway???), my mind suddenly became clear and I finally let go of my four-years worth of efforts with little regret. With some luck, I found temporary employment as a programmer in the academia. Although guidance from a more experienced programmer was absent, I managed to learn a lot through trial and error.
At last, near the completion of my temporary employment, I was offered a real programmer job in the industry! With joy and excitement, I am creating this blog to log and document my experience as a programmer with a biology degree. In the least, I will get a good chuckle when I read this on my rocking chair one day.
Subscribe to:
Posts (Atom)