Chapter 3: Introducing scripts

In the previous example, we saw a very static HTML piece.
Now, instead of hard coding, we will bring in the data from a script file. This will be a bit more dynamic than the previous example, though we will improve on it later on.

See the Pen Introducing scripts by harikrishnan (@harikrishkk) on CodePen.

Here in this codepen, we are taking the values from script. One huge limitation with codepen is that i cannot create multiple script files, so i need to include them all in one js file. (Apologies, its not my fault ). If someone knows to create multiple local js files or create local folders and include them , please help me understand how to do it. Feel free to comment below the post , i will get back to you asap.

Analysis

1.  Here we have introduced a 3rd party animation ( animate.css). Is that a necessity? No, we can use angular specific animations later on. This is just a start and a dirty quick way.
2. We introduced jquery. Does angular require jquery as a dependency? No, we will remove this later on as well.
3. We are using the font awesome for the icons
4.  Regarding the approach, its an imperative approach (where nothing is explicitly mentioned or understandable unless we dig into the scripts behind the scene )rather than a declarative approach ( where HTML itself is self explanatory regarding its purpose and intended functionality.
5. For a person looking at the HTML for the first time, the only thing we see is a "ul" with an ID.
6. One has got no clue of what is getting attached to that ul unless we take a look at the scripts and thoroughly go through it.
7. If we take a look at the script, we can see that its a cruel mix of HTML sprinkled with javascript variables in between. This is mixing of concerns.
8. What if I needed to change the structure of the HTML later on? We need to know the script file on which we need to make that change.
9. The entire data is being handled by an object array called "players".So to add a new player profile, i just need to update this.
10. The MV* architecture stresses on separating everything and removing the dependency between them. Here, the HTML list has an id named (#lstPlayers). 
11. The very same id is mentioned in the scripts and the whole logic hinges around this very same id name. If the designer decides to change the name of the list , may be because of a naming convention that he decides to adopt later on, then the scripts need to also change accordingly without which the scripts wont fire.
12. On a real project scenario, the front end may be done by one team, the scripting by another. One cannot expect to get all the HTML post which we write the logic for it. These might be parallel activities.To write a logic with a dummy variable and later look at the HTML and change the same is a practice which is crude and impractical.
13. The chat icon as of now will show a dummy div with a text.

Lets start introducing angular step by step and see how we can improve on the examples which we have seen till now.